diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index 78581ec44..a90f74e27 100644 --- a/resources/js/components/markdown-editor.js +++ b/resources/js/components/markdown-editor.js @@ -14,6 +14,7 @@ class MarkdownEditor { this.pageId = this.$opts.pageId; this.textDirection = this.$opts.textDirection; this.imageUploadErrorText = this.$opts.imageUploadErrorText; + this.serverUploadLimitText = this.$opts.serverUploadLimitText; this.markdown = new MarkdownIt({html: true}); this.markdown.use(mdTasksLists, {label: true}); @@ -446,8 +447,7 @@ class MarkdownEditor { this.insertDrawing(resp.data, cursorPos); DrawIO.close(); }).catch(err => { - window.$events.emit('error', trans('errors.image_upload_error')); - console.log(err); + this.handleDrawingUploadError(err); }); }); } @@ -491,12 +491,20 @@ class MarkdownEditor { this.cm.focus(); DrawIO.close(); }).catch(err => { - window.$events.emit('error', this.imageUploadErrorText); - console.log(err); + this.handleDrawingUploadError(err); }); }); } + handleDrawingUploadError(error) { + if (error.status === 413) { + window.$events.emit('error', this.serverUploadLimitText); + } else { + window.$events.emit('error', this.imageUploadErrorText); + } + console.log(error); + } + // Make the editor full screen actionFullScreen() { const alreadyFullscreen = this.elem.classList.contains('fullscreen'); diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index a44ab1c62..bde73f4bf 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -283,6 +283,15 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) { const id = "image-" + Math.random().toString(16).slice(2); const loadingImage = window.baseUrl('/loading.gif'); + const handleUploadError = (error) => { + if (error.status === 413) { + window.$events.emit('error', wysiwygComponent.serverUploadLimitText); + } else { + window.$events.emit('error', wysiwygComponent.imageUploadErrorText); + } + console.log(error); + }; + // Handle updating an existing image if (currentNode) { DrawIO.close(); @@ -292,8 +301,7 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) { pageEditor.dom.setAttrib(imgElem, 'src', img.url); pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id); } catch (err) { - window.$events.emit('error', wysiwygComponent.imageUploadErrorText); - console.log(err); + handleUploadError(err); } return; } @@ -307,8 +315,7 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) { pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id); } catch (err) { pageEditor.dom.remove(id); - window.$events.emit('error', wysiwygComponent.imageUploadErrorText); - console.log(err); + handleUploadError(err); } }, 5); } @@ -432,6 +439,7 @@ class WysiwygEditor { this.pageId = this.$opts.pageId; this.textDirection = this.$opts.textDirection; this.imageUploadErrorText = this.$opts.imageUploadErrorText; + this.serverUploadLimitText = this.$opts.serverUploadLimitText; this.isDarkMode = document.documentElement.classList.contains('dark-mode'); this.plugins = "image imagetools table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media"; diff --git a/resources/views/pages/markdown-editor.blade.php b/resources/views/pages/markdown-editor.blade.php index 017a971ff..39d628e17 100644 --- a/resources/views/pages/markdown-editor.blade.php +++ b/resources/views/pages/markdown-editor.blade.php @@ -2,6 +2,7 @@ option:markdown-editor:page-id="{{ $model->id ?? 0 }}" option:markdown-editor:text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}" option:markdown-editor:image-upload-error-text="{{ trans('errors.image_upload_error') }}" + option:markdown-editor:server-upload-limit-text="{{ trans('errors.server_upload_limit') }}" class="flex-fill flex code-fill">