Feature: Image Upload and Display for Notes

[Samriddhi903]

Demo:

imageuploadfix.mp4

I have updated documentation to include new env variable setup for cloudinary.
Changes:
Backend
Installed and configured Cloudinary, Multer, and multer-storage-cloudinary for image uploads.
Created a Cloudinary config file and set up environment variables.
Added an image upload route (/dashboard/upload-image) that handles AJAX image uploads and returns Cloudinary URLs.
Updated the Note model to include an images array for storing image URLs.
Updated the note creation controller to save image URLs from the frontend.
Updated the note update controller to allow updating the images array (add/remove images).
Ensured Multer is only used on the relevant routes to avoid field errors.
Frontend
Note creation page:
Added file input and drag-and-drop support for uploading images.
Preview images before upload.
AJAX upload to /dashboard/upload-image and store returned URLs in a hidden field.
Prevent form submission until image upload is complete.
Note view page:
Display all images below the title and above the body, inside a Bootstrap card.
Allow users to remove existing images (with an "×" button).
Allow users to add new images (drag-and-drop or file input, with preview and AJAX upload).
On update, send the new list of image URLs to the backend.
Dashboard page:
Show all images for each note as thumbnails inside the card, not just the first image.
Improved card structure so images, title, and body are all inside the white card area.

closes #7

[Samriddhi903]

@soumya813 please check it out.

[Samriddhi903]

@soumya813 ?

[soumya813]

Thanks for working on the image upload feature. Right now, the photo gets added as a separate section above the note, but that’s not quite the experience I was aiming for.

The idea was to allow users to insert images or code snippets within the note content itself, at any position they choose — or not at all, depending on the context. Kind of like how rich-text or markdown editors work.

This version feels a bit rigid and breaks the writing flow. If you're open to it, we can explore integrating a rich-text editor that supports inline media.

Let me know what you think!

[Samriddhi903]

sure, i'll look into it, and send you an update asap!