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 UsageThe 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/*" />
.
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.
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" />
HTML input type='file' apply a filter
There is an "accept" attribute on file input controls, where you can specify the types of files you want. From what i'm seeing, though, many browsers like to ignore it -- the file types that can be specified are MIME types, so a strictly correct browser would have to look at every file regardless of extension and see if it's an image (and if so, what type it is).
Update: It seems at least some version of every major browser on Windows now provides at least some support for the accept
attribute. (Even IE supports it, as of version 10.) However, it's still a bit early yet to rely on it, as IE 8 and 9 still don't support it. And support in general is a bit spotty.
- Chrome seems to have full support. It uses its own built-in list of types as well as the system's...so if either one defines the type, Chrome knows which files to show.
- IE 10 supports file extensions beautifully, and MIME types decently. It seems to use only the system's mapping of MIME type to extensions, though...which basically means if something on the user's computer didn't register those extensions with the right MIME types, IE won't show files of those MIME types.
- Opera only seems to support MIME types -- to the point where extensions actually disable the filter -- and the UI for the file selector sucks. You have to select a type in order to see the files of that type.
- Firefox appears to support only a limited set of types, and ignore other types as well as extensions.
I don't have Safari, and don't plan on downloading it. If someone could document Safari's support...Partial support on safari. http://caniuse.com/#search=accept
You should consider adding the attribute, so browsers that support it can help the user find the right files more easily. But i would still suggest that you check the filename after the file's selected and show an error message if a file with the wrong extension is uploaded.
And of course, definitely have the server double-check that the file is the right type. File extensions are just a naming convention, and can be easily subverted. And even if we could trust the browser (which we can't), and even if it did attempt to filter stuff as you asked (which it might not), the chance of it actually verifying that that .doc
file is truly a Word document is next to nil.
Uploading a file with filtering its extension
You can use the FileExtensions to achieve this:
[Required, FileExtensions(Extensions=".iso,.rar,.zip", ErrorMessage="Incorrect file format")]
Add Dossier to your model to pass it back to the view and render it like this:
@Html.TextBoxFor(m => m.Dossier, new { type = "file" })
@Html.ValidationMessageFor(m => m.Dossier)
It should validate both client and server-side.
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>
Upload File with Related Extension Filter
Separate extensions by |
$config['allowed_types'] = 'gif|jpg|png';
PS: Extensions are not case sensitive, codeigniter will take care of Upper case formats.
Reference
To filter the browse window, just add accept="image/gif,image/jpeg,image/png"
as attribute to the input
tag.
Example:
<input type="file" accept="image/gif,image/jpeg,image/png">
Live demo
Related Topics
Change Color of One Character in a Text Box HTML/CSS
How to Handle Xml/HTML in Git Feature Branch Workflow
Svg Lineargradient Hidden If Svg Is Hidden in Seperate Class
Set CSS Border to End in a 90 Instead of a 45 Degree Angle
How to Hide My Source Code So to Not Be Copied
Inverted Scooped Corners Using CSS
Word Wrapping for Button with Specified Width in IE7
How to Disable Text Selection with CSS or JavaScript
Uiwebview with Contenteditable (HTML Editing), First Responder Handling
How to Have Two Items on Opposite Sides on The Same Line
How to Use an <H2> Tag </H2> Inside a <P></P> in The Middle of a Text
Changing The Highlight Color When Selecting Text in an HTML Text Input
Configuring Android Web Applications
CSS Overflow Hidden with Absolute Position
How to Get Index of Parent Element Using Watir Webdriver
Prevent a Child Element from Overflowing Its Parent in Flexbox