How to Make <Input Type="File"/> Accept Only These Types

How to allow input type=file to accept only image files?

Use the accept attribute of the input tag. To accept only PNG's, JPEG's and GIF's you can use the following code:

<label>Your Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>

How do I get a html5 file input to accept only certain file types consistently across browsers?

Transfer them both mime-type and extension

<input type="file" name="file2" accept="text/csv, .csv"/>

Safari input type=file accept=video/* ignores mp4 files

I found that the following accept string will add mp4 and m4v to the list of file types that safari will accept:

accept="video/mp4,video/x-m4v,video/*"

I'm not sure what the mime type is for webm videos but if you can look that up you should be able to tack it on to the accept string. The trick is to specify the mime type, just using a file extension won't work.

Limit file format when using input type=file?

Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension using front-end validation (HTML/JavaScript).

But still, the accept attribute of <input type = "file"> can help to provide a filter in the file select dialog box provided by the user's browser/OS. For example,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> 
<input type="file" accept=".xls,.xlsx" />

How to select multiple files with input type=file?

New answer:

In HTML5 you can add the multiple attribute to select more than 1 file.

<input type="file" name="filefield" multiple="multiple">

---

Old answer:

You can only select 1 file per <input type="file" />. If you want to
send multiple files you will have to use multiple input tags or use
Flash or Silverlight.

Accept attribute for input[type=file] allows other extensions

This is apparently a Mac Os only bug.

I wasn't able to reproduce it from my win10 VM, but it is still there in v.55.0.2861.0 canary.

---

The problem seems to come from the .txt.

It's like it will accept any text/* files, when this extension is set.

You can star this chromium issue which treats of the same underlying issue (with a different extension).

<input type="file" accept=".txt">

input type=file limit selectable files by extensions

Honestly, the best way to limit files is on the server side. People can spoof file type on the client so taking in the full file name at server transfer time, parsing out the file type, and then returning a message is usually the best bet.

How to get file name when user select a file via input type=file /?

You can get the file name, but you cannot get the full client file-system path.

Try to access to the value attribute of your file input on the change event.

Most browsers will give you only the file name, but there are exceptions like IE8 which will give you a fake path like: "C:\fakepath\myfile.ext" and older versions (IE <= 6) which actually will give you the full client file-system path (due its lack of security).

document.getElementById('fileInput').onchange = function () {
  alert('Selected file: ' + this.value);
};

Can't get value of input type=file?

You can read it, but you can't set it. value="123" will be ignored, so it won't have a value until you click on it and pick a file.

Even then, the value will likely be mangled with something like c:\fakepath\ to keep the details of the user's filesystem private.

---

Related Topics