Feature: Image Upload and Display for Notes #60
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Author
|
@soumya813 please check it out. |
Contributor
Author
soumya813
reviewed
Jul 4, 2025
Owner
soumya813
left a comment
soumya813
left a comment
There was a problem hiding this comment.
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!
Contributor
Author
|
sure, i'll look into it, and send you an update asap! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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