realaravinth/bench-forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor image paste code (#13354)

Browse source 
Some minor refactors I did while investigating another issue.
Functionalily should be pretty much the same as before.

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
silverwind 2020-11-02 18:08:30 +01:00 committed by GitHub
parent fc40cdfa89
commit 842a75776a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
web_src/js/index.js
View file

@ -305,42 +305,32 @@ function replaceAndKeepCursor(field, oldval, newval) {
} }
} }
function retrieveImageFromClipboardAsBlob(pasteEvent, callback) { function getPastedImages(e) {
if (!pasteEvent.clipboardData) { if (!e.clipboardData) return [];
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 (files.length) {
if (typeof items === 'undefined') { e.preventDefault();
return; e.stopPropagation();
}
return files;
} }
for (let i = 0; i < items.length; i++) { async function uploadFile(file) {
if (!items[i].type.includes('image')) continue;
const blob = items[i].getAsFile();
if (typeof (callback) === 'function') {
pasteEvent.preventDefault();
pasteEvent.stopPropagation();
callback(blob);
}
}
}
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);
const formData = new FormData(); const formData = new FormData();
formData.append('file', file, file.name); 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() { function reload() {
@ -350,33 +340,29 @@ function reload() {
function initImagePaste(target) { function initImagePaste(target) {
target.each(function () { target.each(function () {
const field = this; const field = this;
field.addEventListener('paste', (event) => { field.addEventListener('paste', async (e) => {
retrieveImageFromClipboardAsBlob(event, (img) => { for (const img of getPastedImages(e)) {
const name = img.name.substr(0, img.name.lastIndexOf('.')); const name = img.name.substr(0, img.name.lastIndexOf('.'));
insertAtCursor(field, `![${name}]()`); insertAtCursor(field, `![${name}]()`);
uploadFile(img, (res) => { const data = await uploadFile(img);
const data = JSON.parse(res);
replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`); replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
$('.files').append(input); $('.files').append(input);
}); }
});
}, false); }, false);
}); });
} }
function initSimpleMDEImagePaste(simplemde, files) { function initSimpleMDEImagePaste(simplemde, files) {
simplemde.codemirror.on('paste', (_, event) => { simplemde.codemirror.on('paste', async (_, e) => {
retrieveImageFromClipboardAsBlob(event, (img) => { for (const img of getPastedImages(e)) {
const name = img.name.substr(0, img.name.lastIndexOf('.')); const name = img.name.substr(0, img.name.lastIndexOf('.'));
uploadFile(img, (res) => { const data = await uploadFile(img);
const data = JSON.parse(res);
const pos = simplemde.codemirror.getCursor(); const pos = simplemde.codemirror.getCursor();
simplemde.codemirror.replaceRange(`![${name}](${AppSubUrl}/attachments/${data.uuid})`, pos); simplemde.codemirror.replaceRange(`![${name}](${AppSubUrl}/attachments/${data.uuid})`, pos);
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
files.append(input); files.append(input);
}); }
});
}); });
} }