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:
Table of results:
upload image dialog with camera
upload dialog(not image only) with camera
only camera
enabledChrome
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.
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.
Note: The accept attribute can only be used with <input type="file"> . Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.
The capture attribute is supported on the file input type. The capture attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types. The user-facing camera and/or microphone should be used.
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 theaccept
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With