Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML <input type='file'> apply a filter

<input type='file' name='userFile'> 

now when i will click the browse button, the browse dialog will show all files... what if i want to filter file types lets say

  • only images or .png & .jpg & .gifs
  • only office file like .doc & .docx & .pps

how to do it...

like image 917
Moon Avatar asked Aug 19 '10 11:08

Moon


People also ask

How do you add a filter tag in HTML?

The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!

How do I restrict image type in HTML?

By using multiple attribute you can upload multiple images in an instance. You can also limit multiple mime types. and another way of checking mime type using file object. file object gives you name,size and type.

How do you make an input only accept an image?

Using type="file" and accept="image/*" (or the format you want), allow the user to chose a file with specific format. But you have to re check it again in client side, because the user can select other type of files.


2 Answers

I think u are looking for the accept parameter. Try this works

<input type="file" accept="image/*" /> 
like image 139
ravi404 Avatar answered Oct 02 '22 13:10

ravi404


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.

like image 36
cHao Avatar answered Oct 02 '22 13:10

cHao