How to Filter Input Type="File" Dialog by Specific File Type

How to filter input type=file dialog by specific file type?

See http://www.w3schools.com/tags/att_input_accept.asp:

The accept attribute is supported in all major browsers, except
Internet Explorer and Safari. Definition and Usage

The accept attribute specifies the types of files that the server
accepts (that can be submitted through a file upload).

Note: The accept attribute can only be used with <input type="file">.

Tip: Do not use this attribute as a validation tool. File uploads
should be validated on the server.

Syntax <input accept="audio/*|video/*|image/*|MIME_type" />

Tip: To specify more than one value, separate the values with a comma
(e.g. <input accept="audio/*,video/*,image/*" />.

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.

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" />

Show custom text for applied file type filters on file dialog to upload particular category of files

The short answer

As I expected it turns out this is not possible. The <input type="file" /> is one of the most protected browser elements and hence least adaptable browser elements around. The reason for that browsers handle file inputs with so much care is because they wouldn't want to risk attackers accessing your files (even seeing your folder structure would be bad).

The long answer

You might not be able to freely change the text visible in the filter box, but there is hope. In fact, in some situations it is possible to kind of choose the text that appears. One big drawback is that this is totally not browser-compatible and probably not OS-compatible.

There is also another reason why it might be a bad idea for browsers to allow editing that text, it could be used to mislead users (for example a text like We're watching you or FATAL WINDOWS ERROR could scare users).

Furthermore it should not, but could lead to possible exploits where users try to run some sort of C-code in the field (e.g. by trying to trigger some out of bounds writes), granting them machine access, possibly harming your computer in catastrophic ways. Most browsers implement the open file window through calling native operating system functions or ABI's, hence extra care is needed, because these instances of ABI calls could lead to sandbox escapes and/or kernel exploits. Usually it is a good idea to keep user input as far away as possible from kernel calls as possible and that is exactly what browser vendors do in this case (e.g. hardcoded in firefox source code and hardcoded in chrome source code).

Above I said that it is somewhat possible to change the visible filter-text. Below I handle some of the things I tried, but don't hesitate to try this for yourself on this codepen I created for testing purposes: https://codepen.io/JohannesB/pen/vKGoyE

Possible inspiration for other file-types I did not test (feel free to edit this post): https://stackoverflow.com/a/14839673/1493235

Selection of file accept-parameters that I believe could yield intresting results: application/msword, application/rtf, application/octet-stream, application/octet-stream exe, application/zip, text/css, text/html, text/plain

Notable conclusions

• All three browsers differ in the file types associated with image/*, video/* and audio/*
• Internet explorer is the only browser that understands Video/x-msvideo avi
• Firefox and chrome understand Aplication/pdf with a custom filter text, but IE does noet.
• Chrome is the only browser that understand Text/* and that has a custom text caption for .exe
• Custom filter captions never apply for combined accept inputs, in absolutely none of the browser.

A path not investigated

It might be possible that for flash uploaders this text is customizable, but I highly doubt it. Also, flash is deprecated, so in my opinion it's not worth trying.

---

The experiment results

Disclaimer: The examples used below were run on a Windows 7 machine, using Internet Explorer v11.0.9600, Chrome v51.0.2704.84m and Firefox v46.0.1. I cannot guarantee that they represent correct information on other operating systems, other browser versions or even the same browser versions. Use this information with care.

---

Internet explorer

Audio/*

Application/*

Application/pdf

Image/*

Text/*

Video/*

Video/x-msvideo avi

.exe

Image/*, Video/*

Image/*, .exe

---

Chrome

Audio/*

Application/*

Application/pdf

Image/*

Text/*

Video/*

Video/x-msvideo avi

.exe

Image/*, Video/*

Image/*, .exe

---

Mozilla Firefox

Audio/*

Application/*

Application/pdf

Image/*

Text/*

Video/*

Video/x-msvideo avi

.exe

Image/*, Video/*

Image/*, .exe

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 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 to open select file dialog via js?

Using jQuery

I would create a button and an invisible input like so:

<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

and add some jQuery to trigger it:

$('#button').on('click', function() {
    $('#file-input').trigger('click');
});

Using Vanilla JS

Same idea, without jQuery (credits to @Pascale):

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

Hold onClick of input type=file, do something I want, and then let browsers start a file-dialog?

When input is clicked, check if click event was triggered by the browser or via a script. Event.isTrusted will be true when click event is triggered by the browser, so in this case use Event.preventDefault() to prevent file dialog from opening.

Then write the code that does what you want to do and finally call event.target.click() to trigger the click event again but this time Event.isTrusted will be false, so file dialog will not be prevented from opening.

Keep in mind that code you want to execute, before the file dialog is opened, should be in the else block. Otherwise, it will execute two times.

const input = document.querySelector('input');
input.addEventListener('click', (e) => {  if (e.isTrusted) {    e.preventDefault();  } else {    console.log('doing something....');    console.log('done. Opening file dialog');  }    e.target.click();})

<input type="file"/>

---

Related Topics