This project demonstrates how to upload images to Cloudinary using Next.js API routes.
pages/index.js
contains a form that allows you to upload an image to the api/upload
route using fetch.
It then displays all uploaded images from a state persisted in local storage.
pages/api/upload.js
contains the route that handles the image upload.
- It uses the
formidable
package to parse the incoming request. - It uses the
cloudinary
package to upload the image to Cloudinary.
You need to set up cloudinary account and create a cloudinary project to use this demo.
Set these environment variables in your .env.local
file or in your deployment environment:
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
This project was created from the neue fische next
template.
You can π use this template on CodeSandbox or locally by running this command in your Terminal:
npx -y ghcd@latest neuefische/web-exercises/tree/main/templates/next my-app -i
To work locally, please install the dependencies using npm i
first.
Run npm run dev
to start a development server and open the displayed URL in a browser.
Use npm run test
to run the tests.
Select the "Preview: 3000" tab to view this project.
Select the "Tests: logs" tab to view the tests.
The
npm run dev
andnpm run test
scripts run automatically.
You can use the following commands:
npm run dev
to start a development servernpm run build
to build the projectnpm run start
to start a production servernpm run test
to run the testsnpm run lint
to run the linter