dullage
Add page to manage attachments
I understand that the interface is very minimal on purpose and I've grown to really love it, but there's one thing that I miss: a list of uploaded attachments - especially those that are not referenced in any note - with the ability to delete them, so I'm open this issue as a suggestion.
As a workaround, I access the folder mapped to the Docker volume and do some housekeeping there, but it's not very convenient.
Hey @dsolera. I'm glad you're enjoying flatnotes.
I agree this would be very useful. Unfortunately, the databaseless nature of flatnotes would make this tricky to implement. Tricky, but not impossible. So I'll leave this as an open suggestion for now to gauge interest.
I see. I was thinking that it would be a matter of iterating over the attachments on file system and searching for them in the search index, but I'm probably missing some complexity here.
I'm a former developer but I don't know the frameworks used in Flatnotes. Mind you, with enough free time and effort I could probably do it, but I don't have the time.
So, are you willing to review a pull request that adds this feature and that was entirely written by AI (Google Gemini) supervised by me? It works perfectly on my local machine. Here is a summary of the changes.
I've implemented a new "Attachments" management section, accessible from the main menu, with the following features and improvements:
- Backend API:
- Added new API endpoints to:
- List all uploaded attachments, including their filename, size, URL, and a list of notes they are used in.
- Delete a specific attachment.
- Modified the FileSystemAttachments class to implement the new listing and deletion logic, and to check for attachment usage within notes.
- Updated api_messages.py with new messages related to attachment deletion.
- Added new API endpoints to:
- Frontend UI:
- Created a new Attachments.vue view component to display the attachment list.
- Each attachment entry now shows its filename, size, and a list of notes it's used in (with clickable links to the notes).
- Image attachments now display a preview directly within the list.
- Implemented a delete button for each attachment, which:
- Is only visible if the attachment is not used in any notes.
- Triggers a confirmation modal before deletion.
- Is styled prominently in red.
- Is aligned to the right and inline with the file size/usage information for a more compact view.
- The file size display is now more compact, rounding to zero decimals for files under 1 MB and one decimal for files 1 MB or larger.
- The main title of the attachments page is now larger and not bold.
- The layout of the attachment blocks has been changed to a masonry-like view for a more compact and visually appealing display.
- Authentication & Error Handling:
- Ensured that the new attachment management endpoints are properly authenticated based on the FLATNOTES_AUTH_TYPE configuration.
- Improved frontend error handling for API calls to the attachments section, specifically for 401 Unauthorized errors, redirecting to the login page as appropriate.
- Fixed a Vue prop type warning related to the style prop on CustomButton.
List of Modified or Added Files:
- server/attachments/base.py (Modified)
- server/attachments/models.py (Modified)
- server/attachments/file_system/file_system.py (Modified)
- server/main.py (Modified)
- server/api_messages.py (Modified)
- client/views/Attachments.vue (Added and Modified extensively)
- client/router.js (Modified)
- client/api.js (Modified)
- client/partials/NavBar.vue (Modified)
- client/components/CustomButton.vue (Modified)
@dsolera is there a PR for this?
I like the idea of adding some management of attachments and the AI-assisted coding is something I think we're going to see a lot more of. I would be willing to start a review.
