Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-09-13 04:52:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored WYSIWYG editor image upload code

Browse Source 
Added sketchy timeout to fix images being pasted at end of page.
Fixes #489
This commit is contained in:
Dan Brown 2017-09-20 20:27:00 +01:00
parent 09936566dd
commit 212f924ffa
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
1 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
resources/assets/js/pages/page-form.js
View File

@ -4,51 +4,53 @@ const Code = require('../code');
/** /**
* Handle pasting images from clipboard. * Handle pasting images from clipboard.
* @param e - event * @param {ClipboardEvent} event
* @param editor - editor instance * @param editor
*/ */
function editorPaste(e, editor) { function editorPaste(event, editor) {
if (!e.clipboardData) return; if (!event.clipboardData || !event.clipboardData.items) return;
let items = e.clipboardData.items; let items = event.clipboardData.items;
if (!items) return;
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === -1) return; if (items[i].type.indexOf("image") === -1) continue;
event.preventDefault();
let file = items[i].getAsFile();
let formData = new FormData();
let ext = 'png';
let xhr = new XMLHttpRequest();
if (file.name) {
let fileNameMatches = file.name.match(/\.(.+)$/);
if (fileNameMatches) {
ext = fileNameMatches[1];
}
}
let id = "image-" + Math.random().toString(16).slice(2); let id = "image-" + Math.random().toString(16).slice(2);
let loadingImage = window.baseUrl('/loading.gif'); let loadingImage = window.baseUrl('/loading.gif');
editor.execCommand('mceInsertContent', false, `<img src="${loadingImage}" id="${id}">`); let file = items[i].getAsFile();
setTimeout(() => {
let remoteFilename = "image-" + Date.now() + "." + ext; editor.insertContent(`<p><img src="${loadingImage}" id="${id}"></p>`);
formData.append('file', file, remoteFilename); uploadImageFile(file).then(resp => {
formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content')); editor.dom.setAttrib(id, 'src', resp.thumbs.display);
}).catch(err => {
xhr.open('POST', window.baseUrl('/images/gallery/upload'));
xhr.onload = function () {
if (xhr.status === 200 || xhr.status === 201) {
let result = JSON.parse(xhr.responseText);
editor.dom.setAttrib(id, 'src', result.thumbs.display);
} else {
console.log('An error occurred uploading the image', xhr.responseText);
editor.dom.remove(id); editor.dom.remove(id);
} window.$events.emit('error', trans('errors.image_upload_error'));
}; console.log(err);
xhr.send(formData); });
}, 10);
} }
} }
/**
* Upload an image file to the server
* @param {File} file
*/
function uploadImageFile(file) {
if (file === null || file.type.indexOf('image') !== 0) return Promise.reject(`Not an image file`);
let ext = 'png';
if (file.name) {
let fileNameMatches = file.name.match(/\.(.+)$/);
if (fileNameMatches.length > 1) ext = fileNameMatches[1];
}
let remoteFilename = "image-" + Date.now() + "." + ext;
let formData = new FormData();
formData.append('file', file, remoteFilename);
return window.$http.post('/images/gallery/upload', formData).then(resp => (resp.data));
}
function registerEditorShortcuts(editor) { function registerEditorShortcuts(editor) {
// Headers // Headers
for (let i = 1; i < 5; i++) { for (let i = 1; i < 5; i++) {
@ -375,9 +377,7 @@ module.exports = function() {
}); });
// Paste image-uploads // Paste image-uploads
editor.on('paste', function(event) { editor.on('paste', event => { editorPaste(event, editor) });
editorPaste(event, editor);
});
} }
}; };
return settings; return settings;