mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-08-23 10:45:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

[v12.0/forgejo] fix(ui): Add pasted images to dropzone (#8362)

Browse source 
**Backport:** https://codeberg.org/forgejo/forgejo/pulls/7749

This adds pasted images to the dropzone. To provide the same experience
as when using the dropzone. This gives the possibility to preview and
delete the image. Additionally it provides a copy button to copy the
markdown code for inserting the image.

Fixes #4588

Co-authored-by: Beowulf <beowulf@beocode.eu>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8362
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
This commit is contained in:
forgejo-backport-action 2025-06-30 16:19:58 +02:00 • committed by Otto
commit b2125a774e
10 changed files with 303 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web_src/js/features/comp/Paste.js
View file

@ -82,9 +82,8 @@ class CodeMirrorEditor {
async function handleClipboardImages(editor, dropzone, images, e) {
const uploadUrl = dropzone.getAttribute('data-upload-url');
const filesContainer = dropzone.querySelector('.files');
if (!dropzone || !uploadUrl || !filesContainer || !images.length) return;
if (!dropzone || !uploadUrl || !images.length) return;
e.preventDefault();
e.stopPropagation();
@ -92,7 +91,7 @@ async function handleClipboardImages(editor, dropzone, images, e) {
for (const img of images) {
const name = img.name.slice(0, img.name.lastIndexOf('.'));
const placeholder = `![${name}](uploading ...)`;
const placeholder = `![${name}](uploading...)`;
editor.insertPlaceholder(placeholder);
const {uuid} = await uploadFile(img, uploadUrl);
@ -101,12 +100,11 @@ async function handleClipboardImages(editor, dropzone, images, e) {
const text = `![${name}](${url})`;
editor.replacePlaceholder(placeholder, text);
const input = document.createElement('input');
input.setAttribute('name', 'files');
input.setAttribute('type', 'hidden');
input.setAttribute('id', uuid);
input.value = uuid;
filesContainer.append(input);
const attachment = {uuid, name: img.name, browser_download_url: url, size: img.size, type: img.type};
dropzone.dropzone.emit('addedfile', attachment);
dropzone.dropzone.emit('create-thumbnail', attachment, img);
dropzone.dropzone.emit('complete', attachment);
dropzone.dropzone.emit('success', attachment, {uuid});
}
}