forked from gitea/gitea
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 <techknowlogick@gitea.io> Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
parent
fc40cdfa89
commit
842a75776a
|
@ -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);
|
||||||
});
|
}
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue