HTML5
web app
mobile Safari
image upload
Photos app

A html5 web app for mobile safari to upload images from the Photos.app?

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

Yes, a web app running in Mobile Safari can let the user upload images from the iPhone Photos app, but it has to do so through the browser’s file-picker flow. A web page cannot silently browse the photo library on its own. The standard HTML solution is an input element with type="file" and an image filter, then uploading the selected file with FormData.

Use a File Input

The basic HTML is:

html
<input id="photo" type="file" accept="image/*">

On Mobile Safari, tapping this control opens the appropriate system UI so the user can choose or capture an image, depending on the device and browser behavior.

The important attributes are:

  • 'type="file" to open the file-selection flow'
  • 'accept="image/*" to limit choices to images'

That is the core browser-supported mechanism for accessing Photos content from a web app.

Upload the Selected Image with JavaScript

Once the user picks a file, you can send it to the server with fetch.

html
1<input id="photo" type="file" accept="image/*">
2<button id="upload">Upload</button>
3
4<script>
5  const input = document.getElementById("photo");
6  const button = document.getElementById("upload");
7
8  button.addEventListener("click", async () => {
9    if (!input.files || input.files.length === 0) {
10      alert("Please choose an image first.");
11      return;
12    }
13
14    const formData = new FormData();
15    formData.append("image", input.files[0]);
16
17    const response = await fetch("/upload", {
18      method: "POST",
19      body: formData
20    });
21
22    console.log(await response.text());
23  });
24</script>

This is the normal HTML5 upload pattern and works on Mobile Safari when the user selects the image interactively.

Preview Before Upload

You can also preview the chosen image in the browser before sending it.

html
1<input id="photo" type="file" accept="image/*">
2<img id="preview" style="max-width: 200px;">
3
4<script>
5  const input = document.getElementById("photo");
6  const preview = document.getElementById("preview");
7
8  input.addEventListener("change", () => {
9    const file = input.files?.[0];
10    if (!file) return;
11
12    preview.src = URL.createObjectURL(file);
13  });
14</script>

That gives a better user experience and helps catch wrong selections before upload.

What You Cannot Do

A Mobile Safari web app cannot:

  • access the Photos library silently
  • scan the user’s images without a picker
  • bypass the user gesture requirement

This is an intentional security and privacy boundary. The browser may expose a picker, but the web page does not get unrestricted filesystem or photo-library access.

So the correct answer is "yes, but through the file input and user selection flow."

Server-Side Handling Still Matters

The browser side only gets the file to your backend. The server must still:

  • accept multipart form uploads
  • validate file type and size
  • store or process the image safely

For example, an Express server might handle the upload with middleware such as multer, while another backend stack would use its own multipart parser.

Client support is only one piece of the upload pipeline.

Common Pitfalls

The most common mistake is expecting a plain web app to read the Photos library directly without any user interaction. Browser security models do not allow that.

Another issue is forgetting to use multipart/form-data via FormData. Sending a raw string or JSON payload is not the normal way to upload a selected image file.

Developers also sometimes assume identical behavior across all iOS versions and Safari variants. The broad model is stable, but UI details and available chooser options can vary.

Finally, make sure the upload starts from a user action such as a tap. Mobile browsers are stricter about file picker activation than desktop browsers.

Summary

  • A Mobile Safari web app can upload images from Photos using a normal HTML file input.
  • Use accept="image/*" to constrain the picker to image content.
  • Upload the chosen file with FormData and fetch.
  • You can preview the selected image before upload with URL.createObjectURL.
  • The browser allows user-driven selection, not unrestricted access to the Photos library.

Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions