Fix iOS Safari input type=”file” Not Opening Camera – Real Solution

You add an <input type="file">, test on desktop, everything works.
Then you open the page on an iPhone, tap the field in Safari, and nothing useful happens:

• No camera option
• Only Files app appears
• Or the picker does not open at all

This is a classic iOS Safari headache. The good news is that it is usually caused by a few specific things in your HTML, JavaScript, or Safari permissions. In this guide, we will fix it step by step with real, tested solutions.

1. How iOS Safari decides whether to show the camera

On iOS, Safari looks at three things:

1. The input type: type="file"
2. The accept attribute
3. The capture attribute (optional hint for using the camera)

If you do not tell Safari that you want an image or video, it is free to open only the Files picker. If you hide the element or trigger it incorrectly with JavaScript, Safari may even refuse to open the picker at all.

So the first step is to fix the markup.

2. Correct HTML for opening the camera

Use this as your base:

<input
  type="file"
  accept="image/*"
  capture="environment"
>

What each attribute does:

• type="file" – tells Safari this is a file picker.
• accept="image/*" – tells Safari you want images, so it can show the camera and photo library.
• capture="environment" – hints that you want the back camera (you can also use "user" for the front camera).

On most modern iPhones, this combination shows a sheet with options like:

• Take Photo or Video
• Photo Library
• Browse

If your input did not have accept or used something generic like */*, Safari might not show the camera option at all.

For video capture

<input
  type="file"
  accept="video/*"
  capture="environment"
>

3. Do not hide the input in a tricky way

A lot of UI libraries hide the <input> and use a styled button that calls input.click() in JavaScript. Desktop browsers usually accept this, but iOS Safari is stricter.

Rules that iOS expects:

• The file picker must be triggered by a real user gesture (tap, click).
• That gesture must directly trigger input.click() in the same event stack.
• If the input is completely off screen or has display:none, Safari can refuse to open the picker.

Safe pattern using a <label>

The most reliable way is to keep the input on the page and link it to a label:

<input
  type="file"
  id="photo-input"
  accept="image/*"
  capture="environment"
  style="position: absolute; left: -9999px;"
>

<label for="photo-input" class="upload-button">
  Upload or Take Photo
</label>

Here:

• The input is visually hidden but still in the document.
• The label is clickable and natively focuses the file input.
• No JavaScript is required to open the picker, which iOS likes.

If you really want to use JavaScript, make sure it is triggered directly from a tap handler:

const input = document.getElementById('photo-input');
const button = document.getElementById('open-camera');

button.addEventListener('click', () => {
  // Must be directly in this click handler
  input.click();
});

Avoid wrapping this input.click() inside setTimeout, Promise.then, or other async functions, because iOS may treat it as non user-initiated and block it.

4. Check iOS Safari camera permissions

Even with perfect HTML, Safari will not open the camera if the site does not have permission.

Reset camera access for your site

On the iPhone:

1. Open Settings.
2. Scroll to Safari.
3. Tap Camera.
4. Make sure it is set to Ask or Allow (not Deny).

If you already denied access once, Safari remembers it and silently blocks camera use, which looks like the file input is broken.

You can also reset website permissions:

1. In Safari, open your site.
2. Tap the aA icon in the address bar.
3. Choose Website Settings.
4. Ensure Camera is set to Ask or Allow.

Then reload the page and tap the input again.

5. Serve your page over HTTPS when possible

From a security angle, iOS is much happier to allow camera access on secure origins.

• For local development, use https://localhost if you can.
• For production, always use HTTPS.

It often still works on plain HTTP, but some setups and third party browsers on iOS enforce stricter rules.

If you are building a PWA or adding the site to the home screen, HTTPS is basically required anyway, and that will make camera access more reliable.

6. Fix broken combinations of multiple attributes

Sometimes the problem is not the camera itself, but a confusing input configuration. Examples:

• multiple combined with some older capture hacks
• accept="image/*,application/pdf" on iOS versions that hate mixed types
• Custom input validation that prevents the change event from firing

If you only need the camera or photos, start as simple as possible:

<input
  type="file"
  accept="image/*"
  capture="environment"
>

Test that on a real iPhone.
If it works, add extra options one by one:

<input
  type="file"
  accept="image/*,video/*"
  capture="environment"
  multiple
>

If the camera stops appearing after adding something, you have found the culprit.

7. Debugging checklist

Here is a quick list you can go through when the input still does not open the camera on iOS:

1. HTML attributes
   • Do you have accept="image/*" or accept="video/*"?
   • Are you using capture="environment" or capture="user" if you want camera first?
2. Element visibility
   • Is the <input> in the DOM and not display:none?
   • If it is visually hidden, are you using a label or a safe JS click() from a user event?
3. JavaScript
   • Is input.click() called directly in the tap handler, not inside async code?
   • Are you preventing default on the click in some global handler that blocks it?
4. Permissions
   • In iOS settings, is Safari allowed to use the camera?
   • In Safari website settings, is your domain allowed to use the camera?
5. Protocol
   • Is the site running over HTTPS, especially for PWAs or production?

Once you go through these points, 99 percent of “input file not opening camera on iOS Safari” cases are solved.

Conclusion

When <input type="file"> does not open the camera on iOS Safari, it is almost never a random bug. It is usually one of these:

• Missing or wrong accept / capture attributes
• Hidden or programmatically triggered input that iOS does not trust
• Camera permission blocked for Safari or that specific site

Use the simple, standards-based markup, trigger the input from a real user gesture, and confirm Safari has permission to use the camera. After that, your users will finally be able to tap the field, open the camera, and upload photos without weird workarounds.