Fix Display images by folder in cloudinary with gitauto model

[gitauto-ai]

Original issue: #1

What is the feature

The feature involves integrating Cloudinary with a Next.js application to manage images and folders. Specifically, it includes creating API endpoints and UI components for listing folders and their images, creating new folders, and uploading photos to selected folders from an admin page.

Why we need the feature

This feature is essential for efficiently managing a large number of images and organizing them into folders, making it easier for users to navigate and manage their content. It enhances the admin's ability to control and update the website's visual content directly from the admin page without needing to manually handle files or interact with the Cloudinary dashboard.

How to implement and why

1. Create a Next.js API route for listing folders and images:

   • Path: pages/api/photos/get-cloudinary-photos.ts
   • This endpoint will use Cloudinary's API to fetch the list of folders and their respective images. It will then return this data in a structured format that the frontend can easily display.
   • Why: Separating the logic for fetching data from Cloudinary into its own API route encapsulates the functionality, making the codebase cleaner and more maintainable.

2. Update the admin page to display folders and images:

   • File: pages/admin.tsx
   • Implement a UI component that fetches the folder and image data from the new API route and displays it in a user-friendly manner. This could include a tree view or a grid with folders that can be expanded to show their contents.
   • Why: Providing a visual representation of the folder structure and contents directly in the admin page improves usability and makes it easier for admins to manage their images.

3. Create a Next.js API route for creating a new folder:

   • Path: pages/api/photos/create-folder.ts
   • This endpoint will accept a folder name as input and use Cloudinary's API to create a new folder.
   • Why: Automating folder creation through the admin page streamlines the process and avoids the need for manual folder management on Cloudinary's platform.

4. Add functionality to upload photos to a selected folder:

   • New API Route: pages/api/photos/upload-photo.ts
   • This endpoint will accept an image file and a folder name, uploading the image to the specified folder in Cloudinary.
   • Update the admin page (pages/admin.tsx) to include a file upload input and a folder selection dropdown. When a user selects a file and a folder and submits the form, it will call this API route to perform the upload.
   • Why: Enabling photo uploads directly from the admin page simplifies content management, allowing admins to add new images to the website without complex procedures.

Implementing these features will significantly enhance the admin's ability to manage images and folders, making the website more dynamic and easier to update. It leverages Cloudinary's powerful media management capabilities while providing a simple and intuitive interface for the admin.

Test these changes locally

git checkout -b gitauto/issue-#1-fae20174-9f9c-49cd-9689-9cc2f2cb7cce
git pull origin gitauto/issue-#1-fae20174-9f9c-49cd-9689-9cc2f2cb7cce