HTML file input control with capture and accept attributes works wrong?
AndroidIosHtmlMobileAndroid Problem Overview
#My problem:#
Then user click the input type=file
user must get the upload file + camera
dialog. I'm using for this html attributes accept
and capture
. But on some modern devices this doesn't happen. Below there are the code examples and the table which of its works or not. Code examples are tested in Mobile Safari
and Chrome
.
TL;DR:
I have 5 code examples with just input type file
:
1.(jsfiddle
)
<input type="file" accept="image/*" capture>
2. (jsfiddle
)
<input type="file" accept="image/*" capture="camera">
3. (jsfiddle
)
<input type="file" capture="camera">
4. (jsfiddle
)
<input type="file" capture>
5. (jsfiddle
)
<input type="file" accept="image/*">
Test devices:
- Samsung S3 (Android 4.1.2)
- Samsung S3 (Android 4.3)
- Samsung Galaxy Tab 2 7.0 (Android 4.2.2)
- Samsung Note (Android 4.1.2)
- iPhone 5 (iOS 7.0.4)
- Nexus 4 (Android 4.4)
Table of results:
- W(ork) - means enabled
upload image dialog with camera
- P(artially works) - means enabled
upload dialog(not image only) with camera
- N(ot work) - means
only camera
enabled - Ch - means
Chrome
- MS - means
Mobile Safari
--------------------------------------------------------------------------------
|devices/example | Ch 1| Ch 2| Ch 3| Ch 4| Ch 5| MS 1| MS 2| MS 3| MS 4| MS 5|
--------------------------------------------------------------------------------
|Samsung S3/4.1 | N | N | P | P | W | W | N | P | P | W |
--------------------------------------------------------------------------------
|Samsung S3/4.3 | N | N | P | P | P | N | N | P | P | P |
--------------------------------------------------------------------------------
|Samsung Galaxy Tab| N | N | P | P | W | W | N | P | P | W |
--------------------------------------------------------------------------------
|Samsung Note | N | N | P | P | W | W | N | P | P | W |
--------------------------------------------------------------------------------
|iPhone 5 | W | W | P | P | W | W | Y | P | P | W |
--------------------------------------------------------------------------------
|Nexus 4 | N | N | P | P | W | - | - | - | - | - |
--------------------------------------------------------------------------------
As you can see I can get only upload file + camera
dialog for all browsers using
<input type="file" accept="image/*">
only. But there is no capture
attribute in this case, and this worrying me and there is a problem with Android 4.3.
##My questions are:##
- Are behaviors in table true? Android 4.3 behavior is a bug?
- Can I trust for browsers what its will always add camera to upload dialog without capture attribute? (Please add proof links for answer)
Thanks.
P.S. Question is special, but on my site I must provide for users access to its images and camera. Also I think my table can be helpful for anybody and also I will searching for answer to and will post my answer here if nobody answer.
Android Solutions
Solution 1 - Android
This is the actual answer. Just post it here for next users:
> Actually, it seems that current implementations don’t rely on the
> capture attribute at all, but only on the type and accept attributes:
> the browser displays a dialog box in which the user can choose where
> the file has to be taken, and the capture
attribute is not taken
> into consideration. For example, iOS Safari relies on the accept
> attribute (not capture) for images and videos (not audio). Even if you
> don't use the accept
attribute, the browser will let you choose
> between "Take Photo or Video" and "Choose Existing" (thanks to@firt
> for pointing this out).
From this
EDITED 17 Feb 2016: This behavior is still active on devices.
Solution 2 - Android
The "correct" code and the one you should be using is the 5th one:
<input type="file" accept="image/*">
Which is why it's working correctly on most of your devices. The above code is correct, complete and enough to tell both iOS and Android that:
- you want to capture an image (use
accept="video/*"
for video andaccept="audio/*"
for audio, skip altogether to allow anything). - the user should be able to select an existing one OR capture it on the spot
> 2. Can I trust for browsers what its will always add camera to upload dialog without capture attribute?
Yes.
The capture
attribute is NOT used to include the camera option in the dialog (<input type="file">
is enough for that) but to indicate that direct capture from the webcam is preferred. From the W3C Recommendation spec:
>The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device...is preferred.
capture
is supported by Android 3.0+ which will take you straight to the camera app if capture
is present in the code.
There's no support in iOS6-10 who will always give you at least 2 options: "Take Photo" + "Photo Library".
The capture
attribute has evolved in the spec (which is why you'll see several versions throughout StackOverflow):
- July 2010:
accept="image/*;capture=camera"
- Apr 2011 :
capture="camera"
(String) - Dec 2012:
capture
(Boolean, W3C Candidate Recommendation,)
PS: I've done a ton of research on HTML Media Capture, see Correct Syntax for HTML Media Capture and The New Prompt for Media Capture in iOS9. Here's my test bench with 20+ code combinations.
Solution 3 - Android
For others to reference this is the behavior of Chrome on Android 9 as of today (Feb 2020):
Must be selected from album
<input type="file" accept="image/*">
Must be captured from camera
<input type="file" accept="image/*" capture="">
Allowed user to choose either from album or camera
<input type="file" accept="image/*;capture=camera">
Solution 4 - Android
in Angular 13 with Bootstrap5 only put something like that; accept=".mpeg, .MPEG, ./*"