Defect #36013: Paste image mixed with other DataTransferItem - Redmine

Defect #36013

Paste image mixed with other DataTransferItem

Added by Adrien Crivelli 7 months ago. Updated 2 months ago.

Status:

Closed

Start date:

Priority:

Normal

Due date:

Assignee:

Marius BALTEANU

% Done:

Category:

Attachments

Target version:

4.1.7

Resolution:

Fixed

Affected version:

Description

It's been a few months that my Chrome (now Version 94.0.4606.81) cannot paste image when creating issue (with or without any Chrome extensions). I cannot reproduce with Firefox or not even Chromium. And I cannot pinpoint the reason why this problem started, but it has been consistently reproduced for months now, across multiple Chrome updates.

This is the JS error that occurs:

attachments.js?1591235575:275 Uncaught TypeError: Cannot read properties of null (reading 'name')
    at HTMLDivElement.copyImageFromClipboard (attachments.js?1591235575:275)
    at HTMLDivElement.dispatch (jquery-2.2.4-ui-1.11.0-ujs-5.2.3.js?1581467927:3)
    at HTMLDivElement.r.handle (jquery-2.2.4-ui-1.11.0-ujs-5.2.3.js?1581467927:3)

This is if I console.log(item) before the error occurs, for a single paste event:

DataTransferItem {kind: 'string', type: 'application/x-qt-image'}
DataTransferItem {kind: 'string', type: 'image/bmp'}
DataTransferItem {kind: 'string', type: 'image/cur'}
DataTransferItem {kind: 'string', type: 'image/ico'}
DataTransferItem {kind: 'string', type: 'image/jpeg'}
DataTransferItem {kind: 'string', type: 'image/jpg'}
DataTransferItem {kind: 'string', type: 'image/pbm'}
DataTransferItem {kind: 'string', type: 'image/pgm'}
DataTransferItem {kind: 'file', type: 'image/png'}     <== Only item that makes sense
DataTransferItem {kind: 'string', type: 'image/ppm'}
DataTransferItem {kind: 'string', type: 'image/xbm'}
DataTransferItem {kind: 'string', type: 'image/xpm'}

Attached is the patch to safely fix this. It applies on current git master (8075884bc48deb3b7af94799d6eba943e999dcb2), or svn r21243.

paste-image-mixed-with-other-data-transfer-items.diff (570 Bytes) Adrien Crivelli, 2021-10-19 02:51

0001-Fix-for-36013.patch (1.61 KB) Marius BALTEANU, 2022-02-27 15:01

copy_image.png (51.9 KB) Yazan Al aeddin, 2022-03-02 11:26

Related issues

Associated revisions

Revision 21463
Added by Marius BALTEANU 2 months ago

Use clipboardData.files instead of clipboardData.items to get the images from the clipboard (#36013).

Revision 21493
Added by Marius BALTEANU 2 months ago

Merged r21463 to 4.2-stable (#36013).

Revision 21494
Added by Marius BALTEANU 2 months ago

Merged r21463 to 4.1-stable (#36013).

History

#1 Updated by Go MAEDA 7 months ago

Could you show the detailed steps to reproduce the issue? I tried with Chome 94.0.4606.81 (macOS) but still cannot reproduce the issue. Does it depend on which application the image data is copied from?

#2 Updated by Adrien Crivelli 7 months ago

I use XUbuntu 20.04.3, and often take screenshot with https://github.com/flameshot-org/flameshot. The screenshot will go directly to clipboard which is super convenient to paste into Redmine. Unfortunately some colleagues run Ubuntu 20.04 (not XFCE) with Chrome(ium?) and cannot reproduced either. I am afraid that there is something specific in my setup that trigger the issue, but I cannot figure out what it is.

More importantly my screenshot can be pasted fine on github.com, or in Gimp. So it is somehow related to Redmine. And clipboard from Gimp will also not work on Redmine. So we can exclude flameshot as culprit.

Also see the reference there: https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/kind

I am quite confident that my patch will have no side-effect and might help others in the same (unusual?) situation as me.

I could show you a screencast of the whole thing, but I don't think there is anything relevant to see except the JS error I mentioned earlier.

#3 Updated by Adrien Crivelli 7 months ago

See here: https://i.imgur.com/jV4IiPT.mp4 (I could not upload here because it is slightly too big)

#4 Updated by Go MAEDA 6 months ago

Adrien Crivelli, thank you for your detailed report.

Could you try https://github.com/redmine/redmine/pull/129/files if the patch also fixes the issue in your environment?

#5 Updated by Adrien Crivelli 6 months ago

Yes, https://github.com/redmine/redmine/pull/129/files fixes the issue for me. Thank you for your time.

By the way is GitHub PR a new way to accept contributions ?

#6 Updated by Go MAEDA 6 months ago

Adrien Crivelli wrote:

Yes, https://github.com/redmine/redmine/pull/129/files fixes the issue for me. Thank you for your time.

Thank you for testing the fix. I will commit one of the patches.

By the way is GitHub PR a new way to accept contributions ?

No, the Redmine team does not accept pull requests (see https://github.com/redmine/redmine/blob/master/.github/PULL_REQUEST_TEMPLATE.md) but I just happened to find that pull request.

#7 Updated by Marius BALTEANU 3 months ago

File 0001-Fix-for-36013.patch added
Tracker changed from Patch to Defect
Target version set to 4.1.7

Adrien, sorry for not including this ticket in the latest releases.

I'm not able to reproduce the issue on my local environment, but I made a patch that switches from clipboardData.items to clipboardData.files and that should fix your issue as well. Can you test it, please?

#8 Updated by Yazan Al aeddin 3 months ago

File copy_image.png added

Hello
I tested it, it works well, because I had this problem on chromium 95.0.4638.69,
but there is a problem, where there are two forms in the same page,
this problem will not exist if we replace the line (copyImageFromClipboard)
var inputEl = $('input:file.filedrop').first();
by var inputEl = $(this).closest("form").find('input:file.filedrop');

#9 Updated by Adrien Crivelli 2 months ago

On r21452, without patch, I am no longer able to reproduce the issue. It is likely that my brand new Chrome 99.0.4844.51 somehow fixed it.

So I cannot confirm for sure that the patch would fix the original issue, but I can confirm that with the patch it also works.

#10 Updated by Marius BALTEANU 2 months ago

Yazan Al aeddin wrote:

Hello
I tested it, it works well, because I had this problem on chromium 95.0.4638.69,
but there is a problem, where there are two forms in the same page,
this problem will not exist if we replace the line (copyImageFromClipboard)
var inputEl = $('input:file.filedrop').first();
by var inputEl = $(this).closest("form").find('input:file.filedrop');

Can you open a new issue with the steps to reproduce the problem?

#11 Updated by Marius BALTEANU 2 months ago

Adrien Crivelli wrote:

On r21452, without patch, I am no longer able to reproduce the issue. It is likely that my brand new Chrome 99.0.4844.51 somehow fixed it.

So I cannot confirm for sure that the patch would fix the original issue, but I can confirm that with the patch it also works.

Thanks Adrien! I've committed the change as a refactorization.

#12 Updated by Marius BALTEANU 2 months ago

Status changed from New to Resolved
Assignee set to Marius BALTEANU
Resolution set to Fixed

#13 Updated by Marius BALTEANU 2 months ago

Status changed from Resolved to Closed

#14 Updated by Go MAEDA about 1 month ago

Related to Defect #36887: copyImageFromClipboard function failed to generate a unique file name added

Also available in: Atom PDF

Redmine

Issues

Custom queries