I was playing around with using the <input type="file" /> element and I have it accept a variety of different file types I wish to support.
<input type="file" name="file" accept="image/png, image/jpeg, image/jpg, application/pdf, application/txt, text/plain, application/pdf, text/x-log, application/enex+xml, text/*, .log" />
Depending on the file that is served, I can see what file type is passed by looking at the FileList which looks like this.
Everything works fine but for .log, as you can see above, doesn't have a type... I was wondering if there was a way to discern .log files? I could look at the name passed and parse the file extension, but was wondering if there was a better way? I'm also uncertain of what other file types do not have a registered type and if there is documentation on that?
Unfortunately you can't rely on the type returned. The available types will change depending on the browser and operating system. Generally it returns values registered with the os.
You can use the file name but that's not 100% reliable either. There's nothing preventing a user from renaming a zip file to .log. In most cases that will change the mime as well. The only way to be 100% sure is to read the file and see what it contains.
I want my uploader only allows these types:
doc, docx.
xls, xlsx.
ppt, pptx.
txt.
pdf.
Image types.
How can I achieve this? What should I put in the accept attribute? Thanks for your help.
EDIT!!!
I have one more thing to ask. When the popup appears for use to choose file, at the down right corner, there is a drop down list contains all allow files. In my case, the list would be long. I see in the list, there is an option called All Supported Types. How can I make it chosen by default and eliminate all other options?
Any help will be appreciated. Thank you.
The value of the accept attribute is, as per HTML5 LC, a comma-separated list of items, each of which is a specific media type like image/gif, or a notation like image/* that refers to all image types, or a filename extension like .gif. IE 10+ and Chrome support all of these, whereas Firefox does not support the extensions. Thus, the safest way is to use media types and notations like image/*, in this case
<input type="file" name="foo" accept=
"application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
text/plain, application/pdf, image/*">
if I understand the intents correctly. Beware that browsers might not recognize the media type names exactly as specified in the authoritative registry, so some testing is needed.
Use Like below
<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />
IMPORTANT UPDATE:
Due to use of only application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint... allows only till 2003 MS products, and not newest. I've found this:
application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation
And that includes the new ones. For other files, you can retrieve the MIME TYPE in your file by this way (pardon the lang)(in MIME list types, there aren't this ones):
You can select & copy the type of content
Use accept attribute with the MIME_type as values
<input type="file" accept="image/gif, image/jpeg" />
for powerpoint and pdf files:
<html>
<input type="file" placeholder="Do you have a .ppt?" name="pptfile" id="pptfile" accept="application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
</html>
As stated on w3schools:
audio/* - All sound files are accepted
video/* - All video files are accepted
image/* - All image files are accepted
MIME_type - A valid MIME type, with no parameters. Look at IANA MIME
types for a complete list of standard MIME types
for image write this
<input type=file accept="image/*">
For other,
You can use the accept attribute on your form to suggest to the browser to restrict certain types. However, you'll want to re-validate in your server-side code to make sure. Never trust what the client sends you
I would like to limit the user to upload only specific files.I know it can be done through php script which the form action value is leading to but that's not what I'm looking for.
When the user is choosing a file after using that line:
<input type="file" ... />
He got an option to select all files
I want to change it only to a specific extensions.
You could use the accept attribute. For example if you wanted to limit to all image files:
<input type="file" accept="image/*" />
You could also specify a list of possible types:
<input type="file" accept="image/*,video/*" />
Needless to say that legacy browsers that do not support this new attribute will behave exactly as shown in your screenshot and completely ignore this attribute and there's nothing you could do about it.
In all cases you should provide a server side validation of the actual file type being uploaded and never rely on the client to ensure this.
Using HTML5 upload multiple is it possible to have a wildcard upload. Means if user gave *.jpg in browse option is there any possibility to upload all the images that having the .jpg extension.
<input id="upload" type="file" multiple />
I have researched about it and couldn't found any thing.
No, the multiple attribute will let users select multiple files to upload to you, but they still need to select them themselves.
The downvoting might be because you're asking a question that has no reason for an answer!
Now look why?
<input id="upload" type="file" multiple />
This attribute here is meant to be selecting multiple files, doesn't include which type of files. So you can just filter out either images, or you can select audio, how? Here is code
<input id="upload" type="file" multiple accept="image/*" />
This will let the File Selector, only let the user select the files that are images.
Now to go further deep in the coding and selecting out images that have only the perfect type of format that you want. You'll require a server-side coding. Then at the serverside you can check for the fileExtension for each file selected, and save each file that has .jpg file extension and leave others without saving them.
However, not going in the bottom and just check each file in JS, you can use jQuery to check their fileExtension, split their names at '.' and check the last value that you get.
This way, you will get the required result. But multiple doesn't do that.
I am able to write value to an input t form type= text
for ex
<input type="text" value="xyz">
But what i want is, to write a value to input type="file" . I have tried the code below but it's not working.
<input type="file" value="something">
You cannot, for fairly obvious security reasons.
If a webpage could specify a default value for a file input, then it could (for example) specify c:\place\where\finance\software\stores\accounts\by\default (and then use JavaScript to submit the form without the user having to do anything).
PHP aside, HTML doesn't let you assign values to input type="file" elements as a security measure. If HTML had this power, you could setup several of these fields and point each one to a windows file on the user's computer. The result would be a victim submitting a form with no idea they were also submitting sensitive information. No JavaScript is required. The victim might submit such a form to log in or post a comment on a blog somewhere. Why wouldn't the victim notice they are also submitting a file? CSS can style such elements offscreen using negative coordinates so its a lot like an input type="hidden", just in this case it would submitting a file instead.