Always use 'image' as name for pasted images #13339

silverwind · 2020-10-28T17:23:17Z

Some browsers seem to put file system paths into blob.name which look rather odd and should not be part of the posted content. Always set name to static "image" like GH does.

Ref: #13333 (comment)

@a1012112796 please confirm this works for you, also test multiple pastes.

Some browsers seem to put file system paths into blob.name which look rather odd and should not be part of the posted content. Always set name to static "image" like GH does.

silverwind · 2020-10-28T17:50:09Z

I generally wonder if it's ever desirable to accept the browser-provided filename. Generally I think not because it's bound to always be something autogenerated because clipboard conceptionally stores a byte stream without a filename, thought there might be exceptions.

silverwind · 2020-10-28T19:11:10Z

Here's something to check out browser behaviour. On macOS, I see get image.png in Firefox, Chrome and Safari. I wonder if there are differences on other platforms.

zeripath · 2020-10-28T20:58:04Z

Couldn't we look for the last index of '/' and trim between it and the last indexof '.'? (defaulting to 'image' if that is nothing)

silverwind · 2020-10-28T21:17:39Z

Looking at #13333 (comment) again, it appears the strange path appears before the pasted content.

So I think there might be two dataTransfer items (one text, one image) and it ends up pasting both but [image] is still visible in the gif so at least the image's filename seems consistent with my tests. We could just ignore any textual items when an image is contained to work around.

@a1012112796 please tell the exact os/browser used there and if it happens on CTRL-V too as opposed to right click. Also, what tool is used to copy the content and could it be that that tool puts two items on the system clipboard?

a1012112796 · 2020-10-29T05:49:15Z

@silverwind Thanks for your work, But sadly it maybe not usefull.

test result:

test with ctrl + v:

test on gh:

test with a simple text editor, you can see it only add one link to system clipboard, not other thing.

test with ubunt v20.04, chrome 86.0.4240.111（正式版本）（64 位）

silverwind · 2020-10-29T08:07:46Z

@a1012112796 can you try pasting on https://jsfiddle.net/silverwind/acezbfkd/?

It should only show the image item like this:

a1012112796 · 2020-10-29T08:47:16Z

@a1012112796 can you try pasting on https://jsfiddle.net/silverwind/acezbfkd/?

It should only show the image item like this:

Hmm, I see.

let me have a look on the code.

a1012112796 · 2020-10-29T09:52:31Z

web_src/js/index.js

        uploadFile(img, (res) => {
          const data = JSON.parse(res);
-          replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
+          replaceAndKeepCursor(field, `![image]()`, `![image](${AppSubUrl}/attachments/${data.uuid})`);


Suggested change

replaceAndKeepCursor(field, `![image]()`, `![image](${AppSubUrl}/attachments/${data.uuid})`);

replaceAndKeepCursor(field, `![Uploading image ...]()`, `![image](${AppSubUrl}/attachments/${data.uuid})`);

a1012112796 · 2020-10-29T09:53:09Z

web_src/js/index.js

@@ -352,11 +352,10 @@ function initImagePaste(target) {
    const field = this;
    field.addEventListener('paste', (event) => {
      retrieveImageFromClipboardAsBlob(event, (img) => {
-        const name = img.name.substr(0, img.name.lastIndexOf('.'));
-        insertAtCursor(field, `![${name}]()`);
+        insertAtCursor(field, `![image]()`);


Suggested change

insertAtCursor(field, `![image]()`);

insertAtCursor(field, `![Uploading image ...]()`);

Not sure if this is helping any, I prefer the text to not change after upload.

a1012112796 · 2020-10-29T10:02:04Z

suggest show error message on the editor bottom when uploading image failed like Upload image failed, and remov previous added strings.

silverwind · 2020-10-29T14:59:30Z

The issue is your paste actions pastes two things, a path and a image while generally the expectation is that only a image is there. I think we can workaround by ignoring textual items when a image is present. I'm not sure how GitHub handles this as the minified JS is quite hard to read but I assume you don't have the issue on GitHub, right?

Maybe there is a helper JS library around to handle image paste for us.

silverwind · 2020-10-29T18:43:36Z

Closing as this approach is wrong, may check it out later in a Ubuntu VM.

always use 'image' as name for pasted images

35ffbea

Some browsers seem to put file system paths into blob.name which look rather odd and should not be part of the posted content. Always set name to static "image" like GH does.

silverwind changed the title ~~always use 'image' as name for pasted images~~ Always use 'image' as name for pasted images Oct 28, 2020

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Oct 28, 2020

techknowlogick added this to the 1.14.0 milestone Oct 28, 2020

lunny added the topic/ui Change the appearance of the Gitea UI label Oct 29, 2020

a1012112796 reviewed Oct 29, 2020

View reviewed changes

silverwind closed this Oct 29, 2020

silverwind deleted the paste-name branch October 29, 2020 19:59

go-gitea locked and limited conversation to collaborators Dec 14, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Always use 'image' as name for pasted images #13339

Always use 'image' as name for pasted images #13339

silverwind commented Oct 28, 2020 •

edited

Loading

silverwind commented Oct 28, 2020 •

edited

Loading

silverwind commented Oct 28, 2020

zeripath commented Oct 28, 2020 •

edited

Loading

silverwind commented Oct 28, 2020 •

edited

Loading

a1012112796 commented Oct 29, 2020

silverwind commented Oct 29, 2020

a1012112796 commented Oct 29, 2020 •

edited

Loading

a1012112796 Oct 29, 2020

a1012112796 Oct 29, 2020

silverwind Oct 29, 2020

a1012112796 commented Oct 29, 2020 •

edited

Loading

silverwind commented Oct 29, 2020 •

edited

Loading

silverwind commented Oct 29, 2020

	replaceAndKeepCursor(field, `![image]()`, `![image](${AppSubUrl}/attachments/${data.uuid})`);
	replaceAndKeepCursor(field, `![Uploading image ...]()`, `![image](${AppSubUrl}/attachments/${data.uuid})`);

	insertAtCursor(field, `![image]()`);
	insertAtCursor(field, `![Uploading image ...]()`);

Always use 'image' as name for pasted images #13339

Always use 'image' as name for pasted images #13339

Conversation

silverwind commented Oct 28, 2020 • edited Loading

silverwind commented Oct 28, 2020 • edited Loading

silverwind commented Oct 28, 2020

zeripath commented Oct 28, 2020 • edited Loading

silverwind commented Oct 28, 2020 • edited Loading

a1012112796 commented Oct 29, 2020

silverwind commented Oct 29, 2020

a1012112796 commented Oct 29, 2020 • edited Loading

a1012112796 Oct 29, 2020

Choose a reason for hiding this comment

a1012112796 Oct 29, 2020

Choose a reason for hiding this comment

silverwind Oct 29, 2020

Choose a reason for hiding this comment

a1012112796 commented Oct 29, 2020 • edited Loading

silverwind commented Oct 29, 2020 • edited Loading

silverwind commented Oct 29, 2020

silverwind commented Oct 28, 2020 •

edited

Loading

silverwind commented Oct 28, 2020 •

edited

Loading

zeripath commented Oct 28, 2020 •

edited

Loading

silverwind commented Oct 28, 2020 •

edited

Loading

a1012112796 commented Oct 29, 2020 •

edited

Loading

a1012112796 commented Oct 29, 2020 •

edited

Loading

silverwind commented Oct 29, 2020 •

edited

Loading