This project demonstrates how to use the Cloudinary Node.js SDK to create a photo album app.
The sample project has two distinctive parts: a backend and a frontend and together they demonstrate uploading media to your product environment and displaying the uploaded media.
Create a .env file with the following content at the root of the project:
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_CLOUD_NAME=
VITE_API_ENDPOINT=http://localhost:3000
VITE_CLOUDINARY_IMAGE_PREFIX=https://res.cloudinary.com/YOUR-CLOUD-NAME/image/upload
VITE_CLOUDINARY_VIDEO_PREFIX=https://res.cloudinary.com/YOUR-CLOUD-NAME/video/upload
VITE_TITLE='Node.js Sample App'
Please make sure to change the
YOUR-CLOUD-NAMEpart in bothVITE_CLOUDINARY_IMAGE_PREFIXandVITE_CLOUDINARY_VIDEO_PREFIX!
From your terminal, in the root folder of your project, run:
npm inpm start
The last command starts both the backend and the frontend as well. The backend uses Cloudinary's Node.js SDK and exposes a bunch of endpoints to achieve the desired functionality of the app.
The frontend uses (Lit)[https://lit.dev/docs/v1/lit-html/introduction/] to provide a user interface to demonstrate how to consume the endpoints exposed by the backend.
Try uploading images and videos using each of the pages, then see them being displayed on the Gallery page.
If you would like to explore how some backend specific API endpoints work, have a look at the /upload-from-local and /upload-large-from-local endpoints that both upload files from the local filesystem and not from the browser. (The browser upload examples are visible via the UI and are handled by the remaining endpoints)
- Take a look at the source code to understand how it works.
- Discover more features in the Cloudinary Docs.
- Ask for help in our Community Forum, in Discord, or raise a support request.
Feel free to fork this repo as a starting point for your own Node.js app, contribute to it, or star it if you like it!