From 8f36287d1268b2a75157212357fe5d0985559be2 Mon Sep 17 00:00:00 2001 From: Oliver Walters Date: Mon, 25 May 2026 09:56:52 +0000 Subject: [PATCH] Add support for image upload in editor --- .../src/components/editors/NotesEditor.tsx | 32 +++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/components/editors/NotesEditor.tsx b/src/frontend/src/components/editors/NotesEditor.tsx index 8ca066bb38..1314e38374 100644 --- a/src/frontend/src/components/editors/NotesEditor.tsx +++ b/src/frontend/src/components/editors/NotesEditor.tsx @@ -108,12 +108,6 @@ export default function NotesEditor({ const [language] = useLocalState(useShallow((s) => [s.language])); const { colorScheme } = useMantineColorScheme(); - const editor = useCreateBlockNote({ - dictionary: - BlockNoteLocales[language as keyof typeof BlockNoteLocales] || - BlockNoteLocales.en - }); - const [isDirty, setIsDirty] = useState(false); // The ID of the selected note @@ -121,6 +115,32 @@ export default function NotesEditor({ undefined ); + // Callback to upload an image file against the currently selected note + // Returns the URL of the uploaded image on success, or throws an error on failure + const uploadFile = useCallback( + (file: File) => { + const formData = new FormData(); + formData.append('note', String(selectedNoteId)); + formData.append('image', file); + + return api + .post(apiUrl(ApiEndpoints.notes_image_upload), formData, { + headers: { 'Content-Type': 'multipart/form-data' } + }) + .then((response) => response.data.image); + }, + [selectedNoteId] + ); + + const editor = useCreateBlockNote({ + dictionary: + BlockNoteLocales[language as keyof typeof BlockNoteLocales] || + BlockNoteLocales.en, + uploadFile: async (file: File) => { + return uploadFile(file); + } + }); + // Fetch the available notes for the given model type and ID const notesQuery = useQuery({ queryKey: ['notes', modelType, modelId],