Open Bug 1759400 Opened 3 years ago Updated 1 year ago

Dragging photo onto web page navigates the current tab

Categories

(Core :: DOM: Copy & Paste and Drag & Drop, defect, P3)

Firefox 98
defect

Tracking

()

UNCONFIRMED

People

(Reporter: jake, Unassigned)

References

()

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0

Steps to reproduce:

  1. Visit web page with form and area to upload photos.
  2. Tried to drag and drop photo onto photo upload area.

Actual results:

I lost all data entered and was presented with a 'page' showing my photo with a file: URL.

On clicking back, the form data was lost.

This is terrible UX.

Expected results:

If the web page accepted a photo drag-and-drop, that should have happened.

If it didn't, there should have been some conveyance of an error.

Why on earth would anyone want to drag and drop a photo from File Manager into a browser in order to view it in the browser, replacing the page they were just viewing?!

This is terrible UX.

Component: Untriaged → DOM: Copy & Paste and Drag & Drop
Product: Firefox → Core

Hey, thanks for the report.

I'm not able to reproduce this so it would be excellent if you could provide some more information.

In particular, if I drag an image on top of of this page, and then press back, this text is still present.

Which site was it where this happened? What type of form data did you loose?

Flags: needinfo?(jake)

This is a page on a site for which this is a problem:

https://www.superdrug.com/Health/Smoking-Control/Quit-Smoking-Patch/Nicorette-Invisible-Patch-10mg-7S/p/594652

On this page, click 'Write a review', enter some text in the form, click 'Add Photo' then try to drag a photo in from File Explorer. On clicking back, the review form has disappeared entirely - it is implemented as an in-page modal but the page URL is not modified with the state API.

Flags: needinfo?(jake)

The severity field is not set for this bug.
:hsinyi, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(htsai)

Dear reporter, thank you for the url.

I tested this behavior on other browsers that the webpage handles the situation differently on Chrome and Firefox.
In Firefox, as you mentioned, it's navigated to a 'page' showing the photo with a file: URL. When user navigates back, the UI of review form disappeared. However, if you click "write a review" again, all the content entered was still there.

In Chrome, a new tab of the 'file: URL' was opened.

It looks to me more like a website implementation issue than a Firefox issue.
Perhaps Dennis can help us take a look at the website source code to know if they are doing something tricky.

Flags: needinfo?(htsai) → needinfo?(dschubert)

It looks to me more like a website implementation issue than a Firefox issue.

I think you are missing the point.

There are many web pages with forms out there where inadvertently nagivating away from the page results in content entered into the form being lost (i.e. the form is blank upon returning to it with the Back button). You must surely have experienced this from time to time. (OK, the data is not actually lost with the specific example I gave, though it appears it is, but other examples where it is can be found or constructed.)

Whilst there may not be that much Firefox can do in the case where the user inadvertently clicks a link to navigate away from the page with the form (at best it could perhaps detect that data has been entered and pop up a warning "Are you sure you want to leave the page - data you have entered may be lost?"), the behaviour when a user drags-and-drops an image onto a page which does not have a specific event handler is down to Firefox.

When a user drags-and-drops an image onto a page, I would suggest it is more than 99.9% likey that they intended to upload a photo, and extremely unlikely they actually wanted to navigate away from the page to view the image in that same browser tab.

A simple solution would be to open the drag-and-dropped image in a new tab, as Chrome does. That way, any data entered into the form will not be lost, because the user can simply return to the tab with the form (perhaps by closing the new tab that was unexpectedly opened with the drag-and-dropped image).

What do you think about the suggestion from comment 5?

Flags: needinfo?(echen)

Yeah, I think it probably makes sense to load dropped file into a new tab, though Safari behaves like us, i.e. navigate current tab.

Flags: needinfo?(echen)
Flags: needinfo?(dschubert)
Summary: Dragging photo onto web page loses entered form content → Dragging photo onto web page navigates the current tab
Severity: -- → S3
Priority: -- → P3

See Also: → 668912

This has a link to a blog post about the background behind the change to resolve the bug in Chrome which is equivalent to this one in Firefox.

No longer duplicate of this bug: 668912
You need to log in before you can comment on or make changes to this bug.