Fix Display images by folder in cloudinary with gitauto model

[gitauto-ai]

Original issue: #1

What is the feature

This feature involves integrating Cloudinary with our Next.js application to manage images and folders. The admin page will allow users to list folders and their respective images, create new folders, and upload photos to selected folders.

Why we need the feature

Managing images and folders directly from the admin page will streamline the workflow for administrators, making it easier to organize and maintain the media assets. This will enhance the user experience by providing a centralized location for all media management tasks.

How to implement and why

1. Create Next.js API Routes:

   • List Folders and Images: Implement an API route at pages/api/photos/get-cloudinary-photos.ts to fetch and return the list of folders and their respective images from Cloudinary.
   • Create New Folder: Implement an API route at pages/api/photos/create-folder.ts to handle the creation of new folders in Cloudinary.
   • Upload Photo: Implement an API route at pages/api/photos/upload-photo.ts to handle photo uploads to a selected folder in Cloudinary.

2. Update Admin Page UI:

   • List Folders and Images: Modify pages/admin.tsx to call the get-cloudinary-photos API route and display the folders and images in a structured format.
   • Create New Folder: Add a form in pages/admin.tsx to allow users to input a new folder name and call the create-folder API route.
   • Upload Photo: Add a file input in pages/admin.tsx to allow users to select a photo and a dropdown to select the target folder, then call the upload-photo API route.

3. Cloudinary Integration:

   • Use the Cloudinary Node.js SDK in the API routes to interact with Cloudinary's API for listing folders, creating folders, and uploading photos.

4. Error Handling and Notifications:

   • Implement error handling in the API routes to manage any issues that arise during the Cloudinary operations.
   • Use the existing Toast components (components/Toast/createErrorToast.tsx and components/Toast/createSuccessToast.tsx) to provide feedback to the user on the success or failure of their actions.

By following these steps, we ensure a seamless integration with Cloudinary, providing a robust and user-friendly interface for managing media assets.

Test these changes locally

git checkout -b gitauto/issue-#1-a80a5d36-e595-4742-a9e4-76d6cd7bf0e2
git pull origin gitauto/issue-#1-a80a5d36-e595-4742-a9e4-76d6cd7bf0e2