3

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.

0

1 Answer 1

6

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 :)

2
  • This might have worked at some point on some device but for me putting it like this just opens the file browser (Chrome on Android 14). Unfortunately I couldn't find a real answer to your actual question :( Commented Jan 18 at 15:21
  • On my phone (iOS), I get that popup menu with just accept="image/*", so long as I don't add the capture attribute. I don't think adding the capture=camera into the accept attribute makes any difference. Commented Feb 15 at 10:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.