How to make input type file Should accept only pdf and xls

Question

I used  lt input type   file  name  Upload   gt   Now I would like to restrict this by accepting only  pdf and  xls files   When I click the submit button it should validate this   And when I click the files  PDF XLS  on webpage it should automatically open   Could anyone please give some examples for this

User · Answer

If you want the file upload control to Limit the types of files user can upload on a button click then this is the way..

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

You can then call the function from an event like the onClick of the above button, which looks like:

onClick="TestFileType(this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"

You can change this to: PDF and XLS

You can see it implemented over here: Demo

User · Answer

I would filter the files server side  because there are tools  such as Live HTTP Headers on Firefox that would allow to upload any file  including a shell  People could hack your site  Do it server site  to be safe

User · Answer

you can use this   HTML   lt input name  userfile  type  file  accept  application pdf  application vnd ms-excel    gt    support only  PDF and  XLS files

User · Answer

You can try following way  lt input type   quot file quot  name  quot Upload quot  accept    quot application pdf  csv  application vnd openxmlformats-officedocument spreadsheetml sheet  application vnd ms-excel quot  gt   OR  in asp net mvc   Html TextBoxFor x   gt  x FileName  new    id    quot doc quot    type    quot file quot    accept    quot application pdf  csv  application vnd openxmlformats-officedocument spreadsheetml sheet  application vnd ms-excel quot

User · Answer

Unfortunately  there is no guaranteed way to do it at time of selection   Some browsers support the accept attribute for input tags  This is a good start  but cannot be relied upon completely     lt input type  file  name  pic  id  pic  accept  image gif  image jpeg    gt     You can use a cfinput and run a validation to check the file extension at submission  but not the mime-type  This is better  but still not fool-proof  Files on OSX often have no file extensions or users could maliciously mislabel the file types   ColdFusion s cffile can check the mime-type using the contentType property of the result  cffile contentType   but that can only be done after the upload  This is your best bet  but is still not 100  safe as mime-types could still be wrong

User · Answer

While this particular example is for a multiple file upload  it gives the general information one needs   https   developer mozilla org en-US docs DOM File type  As far as acting upon a file upon  download  this is not a Javascript question -- but rather a server configuration   If a user does not have something installed to open PDF or XLS files  their only choice will be to download them

User · Answer

You could do so by using the attribute accept and adding allowed mime-types to it  But not all browsers do respect that attribute and it could easily be removed via some code inspector  So in either case you need to check the file type on the server side  your second question    Example    lt input type  file  name  upload  accept  application pdf application vnd ms-excel    gt    To your third question  And when I click the files  PDF XLS  on webpage it automatically should open     You can t achieve that  How a PDF or XLS is opened on the client machine is set by the user

User · Answer

Try this one -                lt MyTextField                 id  quot originalFileName quot                  type  quot file quot                  inputProps    accept    xlsx   xls   pdf                     required                 label  quot Document quot                  name  quot originalFileName quot                  onChange  e   gt  this handleFileRead e                   size  quot small quot                  variant  quot standard quot                  gt

User · Answer

You could use JavaScript  Take in consideration that the big problem with doing this with JavaScript is to reset the input file  Well  this restricts to only JPG  for PDF you will have to change the mime type and the magic number     lt form id  form-id  gt     lt input type  file  id  input-id  accept  image jpeg   gt   lt  form gt    lt script type  text javascript  gt        function                input-id   on  change   function event                var file   event target files 0               if file size gt  2 1024 1024                    alert  JPG images of maximum 2MB                        form-id   get 0  reset      the tricky part is to  empty  the input file here I reset the form                  return                             if  file type match  image jp                        alert  only JPG images                        form-id   get 0  reset      the tricky part is to  empty  the input file here I reset the form                  return                             var fileReader   new FileReader                fileReader onload   function e                    var int32View   new Uint8Array e target result                     verify the magic number                    for JPG is 0xFF 0xD8 0xFF 0xE0  see https   en wikipedia org wiki List of file signatures                  if int32View length gt 4  amp  amp  int32View 0   0xFF  amp  amp  int32View 1   0xD8  amp  amp  int32View 2   0xFF  amp  amp  int32View 3   0xE0                        alert  ok                       else                       alert  only valid JPG images                            form-id   get 0  reset      the tricky part is to  empty  the input file here I reset the form                      return                                               fileReader readAsArrayBuffer file                        lt  script gt    Take in consideration that this was tested on latest versions of Firefox and Chrome  and on IExplore 10   For a complete list of mime types see Wikipedia   For a complete list of magic number see Wikipedia

[html] How to make input type= file Should accept only pdf and xls

Examples related to html

Examples related to forms