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) {
|
||||
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;
|
||||
if (files.length) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
const data = await uploadFile(img);
|
||||
replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
|
||||
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).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 data = await uploadFile(img);
|
||||
const pos = simplemde.codemirror.getCursor();
|
||||
simplemde.codemirror.replaceRange(`![${name}](${AppSubUrl}/attachments/${data.uuid})`, pos);
|
||||
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
|
||||
files.append(input);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue