Fixed Recipe Image Storage & "Update Recipe" Page Improvements

[IkkiOcean]

Description:

This PR addresses two major improvements for the recipe management functionality:

1. Fixed Recipe Image Storage: Updated the application to store recipe images directly in the database rather than storing them on GitHub, which improves data security, organization, and accessibility.

2. Enhanced Update Recipe Page: Added support for changing the recipe image on the update page, including backend support. Previously, there was no option to change the image, and the backend controller didn’t support this functionality.

---

Changes Made:

1. Recipe Image Storage Fix:

   • Before: Recipe images were being stored on GitHub, which led to complications in managing image data and potential issues with scalability and access.
   • After: Recipe images are now stored directly in the recipes database, making it easier to retrieve, manage, and secure image data.
   • Updates:
     • Modified the backend image handling logic to store images in the database.
     • Adjusted API routes to support image storage as base64 or BLOB data.

2. Update Recipe Page Fix:

   • Before: The update recipe page did not allow users to change the recipe image, and there was no backend support to handle image updates.
   • After: Added a file input option for the recipe image on the update page, allowing users to upload a new image. Updated the backend controller to support image updates.
   • Updates:
     • Frontend: Added a file upload button on the update recipe page to allow changing the recipe image.
     • Backend: Enhanced the recipe update controller to handle changes in the image field, ensuring the new image is stored correctly in the database.
     • Updated validation and error handling to ensure the image change is optional but, if provided, stored correctly.

---

Screenshots/Visual Changes:

reci.mp4

---

Related Issues:

• Closes FEATURE: Store Recipe Images in the Database Instead of GitHub #432

How should this be tested?

• For storage shift from GitHub to mongoose db

  • You can either check you mongooses database or look into the schema change in recipe schema folder.

• For update fix

  • Go to update recipe page and press change image to upload new image
  • save the changes and refresh
  • changes will be present as its not in the database

Checklist

• Filled out the "How to test" section in this PR
• Read Contributing guide
• Self-reviewed my own code
• Checked for warnings, there are none
• Removed all console.logs
• The changes don't cause any responsiveness issues

[netlify]

✅ Deploy Preview for delightful-daifuku-a9f6ea canceled.

Name	Link
🔨 Latest commit	1ac4692
🔍 Latest deploy log	https://app.netlify.com/sites/delightful-daifuku-a9f6ea/deploys/672f599c6011c400089f9374

[IkkiOcean]

During the shifting of storage from GitHub to database, I found that update page is not able to change the image of the recipe. so I fixed it also! I hope you dont mind it.
@AlfiyaSiddique

[AlfiyaSiddique]

@IkkiOcean can you share a video by creating one dummy recipe with an image upload, since the current video only shows the update operation and not the add operation

[IkkiOcean]

@IkkiOcean can you share a video by creating one dummy recipe with an image upload, since the current video only shows the update operation and not the add operation

yeah sure! doing it right away

[AlfiyaSiddique]

Also remove the GitHub related envs from the env example file

[IkkiOcean]

WhatsApp.Video.2024-11-09.at.18.20.00.mp4

@AlfiyaSiddique the video of upload

[github-actions]

🎉 Thank you @IkkiOcean Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep up the fantastic work! 🚀