From 842a75776a1a6c4bbe54e1fdd830fdc18f7b7153 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Nov 2020 18:08:30 +0100 Subject: [PATCH] Refactor image paste code (#13354) Some minor refactors I did while investigating another issue. Functionalily should be pretty much the same as before. Co-authored-by: techknowlogick Co-authored-by: Lauris BH --- web_src/js/index.js | 82 +++++++++++++++++++-------------------------- 1 file changed, 34 insertions(+), 48 deletions(-) diff --git a/web_src/js/index.js b/web_src/js/index.js index fa80b5fb65..ef6d72a4f7 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -305,42 +305,32 @@ function replaceAndKeepCursor(field, oldval, newval) { } } -function retrieveImageFromClipboardAsBlob(pasteEvent, callback) { - if (!pasteEvent.clipboardData) { - return; +function getPastedImages(e) { + if (!e.clipboardData) return []; + + const files = []; + for (const item of e.clipboardData.items || []) { + if (!item.type || !item.type.startsWith('image/')) continue; + files.push(item.getAsFile()); } - const {items} = pasteEvent.clipboardData; - if (typeof items === 'undefined') { - return; - } - - for (let i = 0; i < items.length; i++) { - if (!items[i].type.includes('image')) continue; - const blob = items[i].getAsFile(); - - if (typeof (callback) === 'function') { - pasteEvent.preventDefault(); - pasteEvent.stopPropagation(); - callback(blob); - } + if (files.length) { + e.preventDefault(); + e.stopPropagation(); } + return files; } -function uploadFile(file, callback) { - const xhr = new XMLHttpRequest(); - - xhr.addEventListener('load', () => { - if (xhr.status === 200) { - callback(xhr.responseText); - } - }); - - xhr.open('post', $('#dropzone').data('upload-url'), true); - xhr.setRequestHeader('X-Csrf-Token', csrf); +async function uploadFile(file) { const formData = new FormData(); formData.append('file', file, file.name); - xhr.send(formData); + + const res = await fetch($('#dropzone').data('upload-url'), { + method: 'POST', + headers: {'X-Csrf-Token': csrf}, + body: formData, + }); + return await res.json(); } function reload() { @@ -350,33 +340,29 @@ function reload() { function initImagePaste(target) { target.each(function () { const field = this; - field.addEventListener('paste', (event) => { - retrieveImageFromClipboardAsBlob(event, (img) => { + field.addEventListener('paste', async (e) => { + for (const img of getPastedImages(e)) { const name = img.name.substr(0, img.name.lastIndexOf('.')); insertAtCursor(field, `![${name}]()`); - uploadFile(img, (res) => { - const data = JSON.parse(res); - replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`); - const input = $(``).val(data.uuid); - $('.files').append(input); - }); - }); + const data = await uploadFile(img); + replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`); + const input = $(``).val(data.uuid); + $('.files').append(input); + } }, false); }); } function initSimpleMDEImagePaste(simplemde, files) { - simplemde.codemirror.on('paste', (_, event) => { - retrieveImageFromClipboardAsBlob(event, (img) => { + simplemde.codemirror.on('paste', async (_, e) => { + for (const img of getPastedImages(e)) { const name = img.name.substr(0, img.name.lastIndexOf('.')); - uploadFile(img, (res) => { - const data = JSON.parse(res); - const pos = simplemde.codemirror.getCursor(); - simplemde.codemirror.replaceRange(`![${name}](${AppSubUrl}/attachments/${data.uuid})`, pos); - const input = $(``).val(data.uuid); - files.append(input); - }); - }); + const data = await uploadFile(img); + const pos = simplemde.codemirror.getCursor(); + simplemde.codemirror.replaceRange(`![${name}](${AppSubUrl}/attachments/${data.uuid})`, pos); + const input = $(``).val(data.uuid); + files.append(input); + } }); }