HTML file input control with capture and accept attributes works wrong?
android, html, ios, mobile
Solution
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.
Problem
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.