I noticed on a site (that I cannot share unfortunately), that the file upload triggers an interesting behavior.
Assume this simple markup:
<input value="" name="form-field-1" id="form-field-1" type="file" required="true">
<label for="form-field-1">choose picture</label>
When clicked in Chrome on an Android device, the browser doesn’t bring up the usual file picker, but a reduced interface, that emphasizes the camera:
This is also notably different from when the capture attribute is used (in which case the camera starts immediately).
And the input hasn’t got any accept="image/*" or similar hints to the browser. I found no click event handlers or other JS trickery as well.
What is it that triggers this behavior of mobile Chrome?
Answers
What you're describing sounds like Chrome's mobile browser behavior when a file input field is focused on a touch-enabled device. Chrome optimizes the user experience by providing a simplified interface that emphasizes capturing media (like photos or videos) using the device's camera.
This behavior is part of Chrome's efforts to enhance user experience on mobile devices. When a file input field of type "file" is focused, Chrome detects the device's capabilities and context. If it's a touch-enabled device with a camera, Chrome may choose to present a simplified interface that emphasizes capturing media because it assumes that the user might want to take a photo or video instead of selecting an existing file.
This behavior is not triggered by any specific HTML attributes like "required" or "accept", nor is it typically controlled by JavaScript. It's part of Chrome's default behavior for enhancing user experience on touch-enabled devices.
If you want to ensure that users can still select existing files from their device's storage, you might consider explicitly specifying the "accept" attribute with the desired file types (e.g., "image/*" for images) to give users the option to select files from their storage. However, keep in mind that Chrome's behavior may vary depending on the device and context, and it's ultimately up to the browser to decide how to present the file input interface.
