Add image upload support to document editor

- Create ImageUploadController to handle image uploads - Store images in storage/app/public/images with UUID filenames - Integrate with EasyMDE editor for drag-drop, paste, and toolbar upload - Use original filename as alt text in markdown 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-13 20:08:40 +09:00
parent 8ea8b3f6b6
commit 80deff661d
3 changed files with 94 additions and 0 deletions
@@ -147,6 +147,42 @@ class="w-full"
                            'guide'
                        ],
                        status: ['lines', 'words', 'cursor'],
+                        // Image upload configuration
+                        uploadImage: true,
+                        imageMaxSize: 2 * 1024 * 1024, // 2MB
+                        imageAccept: 'image/png, image/jpeg, image/gif, image/webp',
+                        imageUploadFunction: (file, onSuccess, onError) => {
+                            const formData = new FormData();
+                            formData.append('image', file);
+
+                            fetch('{{ route("images.upload") }}', {
+                                method: 'POST',
+                                headers: {
+                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                                    'Accept': 'application/json',
+                                },
+                                body: formData,
+                            })
+                            .then(response => {
+                                if (!response.ok) {
+                                    return response.json().then(data => {
+                                        throw new Error(data.message || 'Upload failed');
+                                    });
+                                }
+                                return response.json();
+                            })
+                            .then(data => {
+                                // Insert markdown with alt text directly
+                                const cm = this.editor.codemirror;
+                                const altText = data.data.altText || 'image';
+                                const url = data.data.filePath;
+                                const markdown = `![${altText}](${url})`;
+                                cm.replaceSelection(markdown);
+                            })
+                            .catch(error => {
+                                onError(error.message || 'Failed to upload image');
+                            });
+                        },
                    });

                    this.editor.codemirror.on('change', () => {