Hi guys, I have an application which allows users to upload a file. I managed to limit the types of files they can upload (the accept property helped) but I also want to do something else: when you upload a file and you click the browse button, as we know, an OS window with your local file system opens up and you can select your file from there. On this window, on the bottom right there is usually a drop down list of files, which shows which files you can upload as default selection. But you can open that menu and upload any file. Now, is there any way to change the list in that drop down list and have only the allowed files rather than all the possible file types? I know it's possible with jquery plugins, but can it be done without plugins and just with jquery or pure javascript?
In case you're not sure what I'm talking about, here is an image which has that list displayed, I want to be able to change the options in there
Recommended Answers
Jump to PostShort answer : input file accept
http://www.w3schools.com/tags/att_input_accept.aspIt has a meaning also to check extensions before uploading in case there is a browser that doesn't support file accept
All 4 Replies
Short answer : input file accept
http://www.w3schools.com/tags/att_input_accept.asp
It has a meaning also to check extensions before uploading in case there is a browser that doesn't support file accept
http://caniuse.com/#feat=input-file-accept
Of course you should ALWAYS check server side at least the mime type before processing the file
jkon, I'm already doing both these things but the value of the accept attribute is not reflected inside the dropdown box. The image attached above was just a demonstration, but the gist of it is that, my accept attribute has something like ".jpeg,.png" but inside the dropdown when I try to upload a file in my own application I don't get
.jpeg
.png
I only get all files and custom (or something along those lines, I don't have the application here with me right now)
Hello Violet,
Take a moment to read the links provided before answering , the input file accept doesn't take value as “.jpeg,.png” that you described , it takes value like e.g. “image/png,image/jpeg” or “image/*”. Also take a look the “can I use” link that I provided to you to find out what each browser support or not. Don't forget to validate the file type also client side but most important server side.
OK, sorry, I replied too quickly, let me update my app and see where I get to
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.