Limit file format when using <input type=

Limit file format when using ?

I'd like to restrict the type of file that can be chosen from the native OS file chooser when the user clicks the Browse button in the element in HTML. I have a feeling it's impossible, but I'd like to know if there is a solution. I'd like to keep solely to HTML and JavaScript; no Flash please.

Answer by Pablo Santa Cruz for Limit file format when using ?

Yes, you are right. It's impossible with HTML. User will be able to pick whatever file he/she wants.

You could write a piece of JavaScript code to avoid submitting a file based on its extension. But keep in mind that this by no means will prevent a malicious user to submit any file he/she really wants to.

Something like:

function beforeSubmit()  {      var fname = document.getElementById("ifile").value;      // check if fname has the desired extension      if (fname hasDesiredExtension) {          return true;      } else {          return false;      }  }  

HTML code:

Answer by The Surrican for Limit file format when using ?

There is the accept attribute for the input tag. However, it is not reliable in any way. Browsers most likely treat it as a "suggestion", meaning the user will, depending on the file manager as well, have a pre-selection that only displays the desired types. They can still choose "all files" and upload any file they want.

example:

read more in the html5 spec

Keep in mind that it is only to be used as a "help" for the user to find the right fiels. every user can send any request he/she wants to your server. you always have to validated everything serverside.

So the answer is: no you cannot restrict, but you can set a pre-selection but you cannot rely on it.

Alternatively or additionally you can do something similar by checking the filename (value of the input field) with JavaScript, but this is nonsense because it provides no protection and also does not ease the selection for the user. It only potentially tricks a webmaster into thinking he/she is protected and opens a security hole. It can be a pain in the ass for users that have alternative file extensions (for example jpeg instead of jpg), uppercase, or no file extensions whatsoever (as is common on linux systems).

Answer by Trufa for Limit file format when using ?

You could actually do it with javascript but remember js is client side, so you would actually be "warning users" what type of files they can upload, if you want to AVOID (restrict or limit as you said) certain type of files you MUST do it server side.

Look at this basic tut if you would like to get started with server side validation. For the whole tutorial visit this page.

Good luck!

Answer by zzzzBov for Limit file format when using ?

Technically you can specify the accept attribute (alternative in html5) on the input element, but it's not properly supported.

Answer by Gaby aka G. Petrioli for Limit file format when using ?

You can use the change event to monitor what the user selects and notify them at that point that the file is not acceptable. It does not limit the actual list of files displayed, but it is the closest you can do client-side, besides the poorly supported accept attribute.

var file = document.getElementById('someId');    file.onchange = function(e){      var ext = this.value.match(/\.([^\.]+)$/)[1];      switch(ext)      {          case 'jpg':          case 'bmp':          case 'png':          case 'tif':              alert('allowed');              break;          default:              alert('not allowed');              this.value='';      }  };  

example at http://www.jsfiddle.net/gaby/7br93/1/

Answer by svg for Limit file format when using ?

As mentioned in previous answeres we cannot restrict user to select files for only given file formats. But its really handy to use the accept tag on file attribute in html.

As for validation, we have to do it at the server side. We can also do it at client side in js but its nit a full proof solution. We eventually end up writing validation at server side itself

For these requirement I really prefer struts2 java web application development framework. With its in built file upload feature, uploading files to struts2 based web apps is a peice of cake. Just mention the file formats that we would like to accept in our application and all the rest is taken care of by the core of framework itself. You can check it out at struts offical site

All the best..!!!

Answer by Sachin Joseph for Limit file format when using ?

Strictly speaking, the answer is no. The developer cannot prevent the user from choosing files of any type or extension in the native OS file select dialog box.

But still, the accept attribute of can help to provide a filter in the file select dialog box of the OS. For example,

should provide a way to filter out files other than .xls or .xlsx. Although the MDN page for input attribute always said that it supports this, to my surprise, this didn't work for me in Firefox until version 42. This works in IE 10+ and Chrome.

So, for supporting Firefox older than 42 along with IE 10+ and Chrome, I guess it's best to use comma-separated list of MIME-types:

JSFiddle of the same: here.

Reference: List of MIME-types

IMPORTANT: Using accept attribute only provides a way of filtering out files of types that are not of interest. Browsers still allow users to choose files of any type. Additional (client-side) checks should be done (using JavaScript, one way would be this), and definitely file types MUST be verified on the server, using a combination of MIME-type using both the file extension and its binary signature (ASP.NET, PHP, Ruby, Java). You might also want to refer these tables for file types and their magic numbers, to perform a more robust server-side verification.

Here are three good reads on file-uploads and security.

EDIT: May be file type verification using its binary signature can also be done on client side using JavaScript (rather than just by looking at the extension) using HTML5 File API, but still, the file must be verified on the server, because a malicious user will still be able to upload files by making a custom HTTP request.

W3C recommends authors to specify both MIME-types and corresponding extensions in the accept attribute, but I have not tested how browsers behave when both are specified.

Answer by bpross for Limit file format when using ?

I know this is a bit late.

function Validatebodypanelbumper(theForm)  {     var regexp;     var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));     if ((extension.toLowerCase() != ".gif") &&         (extension.toLowerCase() != ".jpg") &&         (extension != ""))     {        alert("The \"FileUpload\" field contains an unapproved filename.");        theForm.FileUpload1.focus();        return false;     }     return true;  }  

Answer by kiranvj for Limit file format when using ?

Use input tag with accept attribute

Click here for the latest browser compatibility table

Live demo here

To select only image files, you can use this accept="image/*"

Live demo here

Only gif, jpg and png will be shown, screen grab from Chrome version 44

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72