pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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

82
web_src/js/index.js
View file

@ -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 = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
$('.files').append(input);
});
});
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 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);
});
});
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);
}
});
}