CODEWITHSUNDEEP
htmliphone
Miro
Miro

Reputation: 8650

<input accept="image/*;capture=camera"... allows any file type on mobile

How do I restrict image browse button to images only white allowing drop-down menu to choose from camera, library, file on mobile?

Here's what's happening:

When using <input type="file" accept="image/*;capture=camera"> I get the drop-down I need but it doesn't restrict image file type - it can be anything (*.*)

enter image description here

When using <input type="file" accept="image/*" capture> it's image only but there's no drop-down. Camera opens directly.

How do I get the drop-down + image/*?

Demo for mobile. (Mostly needed for iPhone): 

<p>Drop-down for camera, library, files but all files allowed:</p>
<input type="file" accept="image/*;capture=camera">

<p>Only images allowed but doesn't have drop-down. Opens camera directly:</p>
<input type="file" accept="image/*" capture>

Currently, I'm using JS to restrict non-images but wanted to know if there's a html5 native way.

Upvotes: 3

Views: 8652

Answers (1)

Miro
Miro

Reputation: 8650

Figured it out minutes after asking 🙄

It's supposed to be a comma , not semi-colon ;

<p>Drop-down and Images only</p>
<input type="file" accept="capture=camera,image/*">

enter image description here

Why are most articles and tutorials using ; is beyond me :)

Upvotes: 6

Related Questions