Updated drawing upload error to shown/handle server limit errors

Closes #2740
This commit is contained in:
Dan Brown 2021-05-26 18:23:27 +01:00
parent 1a2d374f24
commit 9cbea1eb08
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 26 additions and 8 deletions

View File

@ -14,6 +14,7 @@ class MarkdownEditor {
this.pageId = this.$opts.pageId; this.pageId = this.$opts.pageId;
this.textDirection = this.$opts.textDirection; this.textDirection = this.$opts.textDirection;
this.imageUploadErrorText = this.$opts.imageUploadErrorText; this.imageUploadErrorText = this.$opts.imageUploadErrorText;
this.serverUploadLimitText = this.$opts.serverUploadLimitText;
this.markdown = new MarkdownIt({html: true}); this.markdown = new MarkdownIt({html: true});
this.markdown.use(mdTasksLists, {label: true}); this.markdown.use(mdTasksLists, {label: true});
@ -446,8 +447,7 @@ class MarkdownEditor {
this.insertDrawing(resp.data, cursorPos); this.insertDrawing(resp.data, cursorPos);
DrawIO.close(); DrawIO.close();
}).catch(err => { }).catch(err => {
window.$events.emit('error', trans('errors.image_upload_error')); this.handleDrawingUploadError(err);
console.log(err);
}); });
}); });
} }
@ -491,10 +491,18 @@ class MarkdownEditor {
this.cm.focus(); this.cm.focus();
DrawIO.close(); DrawIO.close();
}).catch(err => { }).catch(err => {
this.handleDrawingUploadError(err);
});
});
}
handleDrawingUploadError(error) {
if (error.status === 413) {
window.$events.emit('error', this.serverUploadLimitText);
} else {
window.$events.emit('error', this.imageUploadErrorText); window.$events.emit('error', this.imageUploadErrorText);
console.log(err); }
}); console.log(error);
});
} }
// Make the editor full screen // Make the editor full screen

View File

@ -283,6 +283,15 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) {
const id = "image-" + Math.random().toString(16).slice(2); const id = "image-" + Math.random().toString(16).slice(2);
const loadingImage = window.baseUrl('/loading.gif'); 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 // Handle updating an existing image
if (currentNode) { if (currentNode) {
DrawIO.close(); DrawIO.close();
@ -292,8 +301,7 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) {
pageEditor.dom.setAttrib(imgElem, 'src', img.url); pageEditor.dom.setAttrib(imgElem, 'src', img.url);
pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id); pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
} catch (err) { } catch (err) {
window.$events.emit('error', wysiwygComponent.imageUploadErrorText); handleUploadError(err);
console.log(err);
} }
return; return;
} }
@ -307,8 +315,7 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) {
pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id); pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
} catch (err) { } catch (err) {
pageEditor.dom.remove(id); pageEditor.dom.remove(id);
window.$events.emit('error', wysiwygComponent.imageUploadErrorText); handleUploadError(err);
console.log(err);
} }
}, 5); }, 5);
} }
@ -432,6 +439,7 @@ class WysiwygEditor {
this.pageId = this.$opts.pageId; this.pageId = this.$opts.pageId;
this.textDirection = this.$opts.textDirection; this.textDirection = this.$opts.textDirection;
this.imageUploadErrorText = this.$opts.imageUploadErrorText; this.imageUploadErrorText = this.$opts.imageUploadErrorText;
this.serverUploadLimitText = this.$opts.serverUploadLimitText;
this.isDarkMode = document.documentElement.classList.contains('dark-mode'); this.isDarkMode = document.documentElement.classList.contains('dark-mode');
this.plugins = "image imagetools table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media"; this.plugins = "image imagetools table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media";

View File

@ -2,6 +2,7 @@
option:markdown-editor:page-id="{{ $model->id ?? 0 }}" option:markdown-editor:page-id="{{ $model->id ?? 0 }}"
option:markdown-editor:text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}" 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: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"> class="flex-fill flex code-fill">
<div class="markdown-editor-wrap active"> <div class="markdown-editor-wrap active">

View File

@ -2,6 +2,7 @@
option:wysiwyg-editor:page-id="{{ $model->id ?? 0 }}" option:wysiwyg-editor:page-id="{{ $model->id ?? 0 }}"
option:wysiwyg-editor:text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}" option:wysiwyg-editor:text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"
option:wysiwyg-editor:image-upload-error-text="{{ trans('errors.image_upload_error') }}" option:wysiwyg-editor:image-upload-error-text="{{ trans('errors.image_upload_error') }}"
option:wysiwyg-editor:server-upload-limit-text="{{ trans('errors.server_upload_limit') }}"
class="flex-fill flex"> class="flex-fill flex">
<textarea id="html-editor" name="html" rows="5" <textarea id="html-editor" name="html" rows="5"