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);
+ }
});
}