When dragging an unselected image in a rich text editor, it is uploaded repeatedly

I am not sure whether this is a design issue, but for now I will place it in this category.

Upload an image in the rich text editor:

  • If you click on it (which selects it) and then drag it, the image will be moved. :smiley:
  • If you drag it without first clicking on it, it will be treated as a new image resource and the upload operation will be performed again… :sweat_smile:

I am confused by the latter scenario, because I think that regardless of whether you click on it or not, dragging should move the image’s position rather than re-uploading it. :slightly_smiling_face:
If this is not a bug but an intentional design, anyone is welcome to tell me in what scenario repeated uploading would be used. :grinning_face_with_smiling_eyes:

2 Likes

I can’t repro this :woman_shrugging: Maybe someone else will.

What browser are you using?

Edge browser, version 145.0.3800.82, I just updated to 148.0.3967.54 but it did not improve.

Yeah, I hope someone else can successfully reproduce it. :face_with_head_bandage:
I can only confirm that this issue does exist, but I don’t know the specific cause.
Initially, a user on my website complained to me that they encountered this issue when dragging an image they had uploaded. At that time, I also had difficulty reproducing it unless I directly copied the Markdown that the user used to upload that image. It seems to be related to both the website and the attachment itself (the images with issues all seem to be PNG files), and I couldn’t reproduce it on Meta either (even if I uploaded the same attachment to Meta), so this issue has been put aside.
On the day I created this topic, I had a sudden idea and tried the PNG image of the Discourse default logo from the video, and finally succeeded in reproducing the issue on Meta. Perhaps you can use ![image](/images/discourse-logo-sketch-small.png) to make some attempts?

In summary, this is indeed a borderline case that is very difficult to trigger, but once triggered, it will stably trigger for the same attachment of the same site.

Nope sorry, no matter what way I try to drag, even with the example logo, I can’t trigger the problem.

I don’t have Edge ready to test, so perhaps it’s browser related. Can you test in a Chromium browser?

Hello, attempting (in Edge, Version 148.0.3967.54 (Official build) (64-bit)) to help trying to repro this bug…

This is, in RTE, my uploaded cat then dragged up and above this text.

…uploading my cat pic below…


This is text after my cat image

2 Likes

Isn’t Edge a Chromium browser?

Hmm… I tried to recreate this bug, but thus far, I could not. If you can be any more specific I will try again and report my results.

2 Likes

I do not understand – how are you able to drag it without first clicking on it?

I see that in your post, there are two occurrences of ![image](/images/discourse-logo-sketch-small.png). Is it a product of successful reproduction? That is: can you reproduce using the small logo, but cannot reproduce using your cat’s picture?

First place the cursor on another piece of text, then press and hold the left mouse button on the image and drag directly. If you click (and release) first and then drag, it will actually have selected the image.

OK, in Edge, and using RTE, starting fresh to try…

uploading a new image below…

… and now dragging the image to down below the next paragraph..

Here is the next paragraph…

This is the next paragraph. I will now drag the image down below here…

In the above test (performed in latest Edge, and RTE in Discourse composer), dragging the previously uploaded image did just seem to work correctly – I did not see indication to re-upload?

Perhaps you are lucky enough to have never encountered this bug :smiley: but regardless, in the video below I demonstrate the key press flow that triggers the two operations, upload and move, using KeyCastOW, so that you and others can clearly understand the specific process.


Upload - Press the left mouse button and drag directly


Move - Press the left mouse button to click and then drag

By the way, I just tested using your cat (![image](https://d11a6trkgmumsb.cloudfront.net/original/4X/c/8/4/c84af711be6e56b1fa1500710edd6869364935da.png)) and your other image (![image](https://d11a6trkgmumsb.cloudfront.net/original/4X/8/9/8/89898942816045cca658884fa050bacd20f3cdfb.jpeg)), and found that neither of them could trigger this issue.

I suggest you use ![image](/images/discourse-logo-sketch-small.png) for testing; at least it is known to me as a test material that can reliably reproduce the issue. If you cannot reproduce the issue using it, perhaps you are just that lucky. :wink:

Could it be that this issue is limited to this particular image?


Below 2 are pasted in composer in RTE mode…

![image](/images/discourse-logo-sketch-small.png)

![image](/images/discourse-logo-sketch-small.png)


Below 2 more are pasted into composer in Markdown mode

!\[image\](/images/discourse-logo-sketch-small.png)

In this latter scenario, are you saying think that 2 different instances/copies of the image/file are being uploaded and that 2 files are then being stored on the server?

Or, that the pasted image is not actually uploaded to the server until (after uploading) you then click on it (and then only that one instance of the image/file is uploaded and stored on the server)?

No, there are multiple images on my own website that can reproduce the issue, but I haven’t done much investigation on Meta and have only found this one case so far.

No, in fact Discourse is smarter than we thought. For example:
A user on my website uploaded an image, and under the Markdown editor it appears like this:

...
![pic|370x494, 40%](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg)
...

I obtained its full link through the browser’s developer tools: https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg . So I referenced the image in the editor using the full link format:

![image](https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg)

After dragging without clicking (triggering an upload) in the rich-text editor, the content in the Markdown editor becomes:

![image](https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg)

![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg)

It can be seen that although Discourse shows that dragging triggers an upload, the image actually appears as ![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg) , which corresponds to the same attachment originally uploaded by that user as https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg .

  • Dragging an image referenced in the ![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg) format also results in the same handling.

From this perspective, triggering an upload again does not actually take up additional storage space — only the first uploaded file truly occupies server storage. So it’s just a user experience issue: users get confused about “why does dragging an image (when I click and then drag without releasing the mouse) fail to move as expected, but instead shows an ongoing upload and duplicates the image?”

1 Like

Then I would conclude, for now, that (good news!) it seems that the image is not actually uploaded repeatedly, but that only one instance it is uploaded(?)

1 Like