react-dropzone/react-dropzone

[BUG] Only gallery file selection appearing with a styled dropzone on latest Chrome mobile versions on android 14+

Open

#1 417 ouverte le 14 févr. 2025

Voir sur GitHub
 (4 commentaires) (5 réactions) (0 assignés)JavaScript (10 254 stars) (779 forks)batch import
bughelp wantedneeds investigation

Description

Describe the bug Clickable content inside a Dropzone component does not bring up an option to use the camera (take a photo) on Android 14 devices and using the latest Chrome browser version - only the gallery file selection opens up (the bug only appears behind https, works in localhost)

Possible fix When removing all of the style from the input[type="file"], the correct options appear on tap with Android devices, just without any custom styling for the dropzone while hiding the native file input

To Reproduce An example to test with an android device with the latest chrome version:

Using mantine's dropzone that uses the latest react-dropzone: https://codesandbox.io/p/github/madhenry/next-app-min-template/draft/awesome-aryabhata?embed=1&file=%2Fapp%2Fpage.tsx

Also reproducible via react-dropzone web:

https://react-dropzone.js.org/#!/Basic%20example (camera option appears correctly) https://react-dropzone.js.org/#!/Styling%20Dropzone (camera option does not appear)

Expected behavior Camera + gallery option would appear on click/tap with the latest android chrome versions

Screenshots Working as expected: Image

Bug with a styled dropzone just opens the gallery: Image

Smartphone (please complete the following information):

  • Device: Android phones / tablets
  • OS: Android 14+
  • Browser: Chrome (latest)
  • Version: 133.0.6943.49+

Additional context Mantine Dropzone component src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/dropzone/src/Dropzone.tsx

Have not yet find a solution other than removing all styling from the native input for android devices so far - but interestingly enough the basic example on react-dropzone seems to be working still

Guide contributeur

Stack technique
reactjavascript
Domaine
frontend
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
half day
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
ReactCSSAndroid device testing
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
70
Direction de recherche
Look at the Dropzone component in react dropzone to see how it hides the native file input (likely via CSS). The issue suggests that removing all styling from the input[type="file"] resolves the camera option on Android Chrome. Consider using a user agent check or CSS media query to conditionally apply styling only on non Android devices. Test on Android 14+ Chrome. There are no linked PRs, but the bug is well described with reproduction examples.