Next.js .CAR File Upload

Learn how to configure Next.js .car File Upload for use with Filebase.

What is Next.js .car File Upload?

Next.js .car File Upload is a tool developed to provide an easy, locally hosted interface for multiple image files to be uploaded to Filebase as a .CAR file.

Special thanks to @dapponics for developing this tool.

Read below to learn how to use Next.js .car File Upload with Filebase.

Prerequisites:

• Sign up for a free Filebase account.

• Have your Filebase Access and Secret Keys. Learn how to view your access keys here.

• Create a Filebase IPFS Bucket. Learn how to create a bucket here.

1. Start by cloning the Github Repository:

git clone https://github.com/Dapponics/filebase-nextjs-example.git

2. Navigate into the filebase-nextjs-example directory.

cd filebase-nextjs-example

3. Create an .env.local file similar to .env.example.

4. In the env.local file, input the following text:

FILEBASE_ACCESS_KEY_ID=”FILEBASE_ACCESS_KEY_ID”

FILEBASE_SECRET_ACCESS_KEY=”FILEBASE_SECRET_ACCESS_KEY”

FILEBASE_BUCKET_NAME=”FILEBASE_BUCKET_NAME”

5. Run yarn install, then yarn dev to start the Next.js app at localhost:3000.

6. Navigate to localhost:3000 in a web browser.

7. Choose any .png or .jpg files to be uploaded to your Filebase bucket.

These images will be uploaded under the same CID in your Filebase bucket.