Problem/Motivation

On mobile browsers that use touch, or browsers emulating touch, the "Click to upload image" button does not correctly open the file upload prompt.

Steps to reproduce

The following can be done on a completely clean install of Drupal with the only Contrib module being DUMI. Simplytest.me was used in my case.

  1. Enable DUMI
  2. Add media field to an entity and set the media type to Image.
  3. Set the form display to use DUMI
  4. On a mobile browser, or emulating one via dev tools, attempt to create/edit an entity with that field and touch the "click to upload image" field

Expected Behavior

File/Camera dialogue opens on the device.

Observed Behavior

The button has no reaction or flickers quickly, but nothing else happens.

Notes

If there is a default item, or a file is already referenced, this button appears to work normally. It only seems to happen when there isn't already something referenced by the field. I'm not sure if that's relevant to WHY this occurs, but I noticed it and though it might help someone track down the actual cause.

I've tested this on Chrome for Android and iOS, Chrome (via dev tools emulating touch), Firefox Mobile for Android, Firefox (via dev tools emulating touch), and Safari for iOS.

In all of these this behavior was observed with a few strange edge cases:

  • Chrome for Android through remote device debugging actually behaves correctly when the remote controlling device sends a mouse click on the button.
  • Firefox via devtools actually will work if you double touch quickly (like in a tenth of a second or so). This was actually tried on most of the devices/setups I tested on and Firefox devtools was the ONLY one that I got it to work on. Very strange.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#4 mobile-devices-not-opening-prompt-3607787-4.patch1.23 KBredeight

Comments

redeight created an issue. See original summary.

redeight’s picture

redeight commented
Issue summary: View changes
boroughbee’s picture

boroughbee commented

@redeight Thank you so much for highlighting this issue and for the detailed bug report, I will look into and get back to you as soon as possible. Thanks again.

redeight’s picture

redeight commented
StatusFileSize
new mobile-devices-not-opening-prompt-3607787-4.patch1.23 KB

I hunted through this a bit more with some help from Claude and it looks like it might just need a proper for on the label element and the critical issue being that the label was hidden when focused. Hidden elements receiving touch events appears to make mobile browsers very uncomfortable, for obvious reasons. Attached patch fixes it on the site I've been having the issue on. If you'd like I can also make a pull request with the same changes.

boroughbee’s picture

boroughbee commented

redeight Thank you so much for your efforts, I have updated the code based on your findings and your suggested code changes. Sorry for the delay in getting back to you.
New version of DUMI (v1.1.1) thanks to you and thanks again. Nice work.

boroughbee’s picture

boroughbee commented
Status: Active » Needs review
redeight’s picture

redeight commented
Status: Needs review » Reviewed & tested by the community

Just checked the latest version and this issue is no longer occurring =] Thanks for the update on a fantastic module.

boroughbee’s picture

boroughbee commented

redeight many thanks to you. let me know if any further frustrations occur when using the module (hopefully not). All the very best to you.

boroughbee’s picture

boroughbee commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.