I want users browsing from an iPhone to have the option to upload only a video or an image, not both

Question

I have two forms on a website.

• One requires that a user upload a video
• The second requires that a user upload an image

When a user clicks the button to attach a file to the form, the user is always given the two options:

• "Take Photo or Video"
• "Choose Existing" - the user could select any file type they choose

---

Vimeo restricted this file attachment feature somehow to be restricted to just enable video uploads (in the past, they seem to have limited their mobile functionality recently). A user would see the following two options:

• "Take Video"
• "Choose Existing" - the user could only select video files

---

How can I make the user only able to select files of the appropriate file type when attaching a file to a form?

Answer 1

To restrict the media types that a file input will take, you can use the accept attribute.

For images only:

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

For video only:

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