Validation of file extension before uploading file

Question

I am uploading images to a servlet  The validation whether the uploaded file is an image is done in server side only  by checking the magic numbers in the file header  Is there any way to validate the extensions in client side before submitting the form to servlet  As soon as I hit enter it starts uploading    I am using Javascript and jQuery in client side   Update  I was finally ended up with server side validation which reads bytes  amp  rejects the upload if it is not an image

User · Answer

I think better to try with mimetype than checking extension. Because, sometimes files can be exist without it and those are working very well in linux and unix systems.

So, you can try something like this:

["image/jpeg", "image/png", "image/gif"].indexOf(file.type) > -1

User · Answer

TypeScript   uploadFileAcceptFormats  string       image jpeg    image gif    image png    image svg xml        if you find the element type in the allowed types array  then read the file isAccepted   this uploadFileAcceptFormats find val   gt        return val     uploadedFileType

User · Answer

I like this example       lt asp FileUpload ID  fpImages  runat  server  title  maximum file size 1 MB or less  onChange  return validateFileExtension this     gt    lt script language  javascript  type  text javascript  gt      function ValidateFileUpload Source  args            var fuData   document getElementById   lt    fpImages ClientID   gt             var FileUploadPath   fuData value           if  FileUploadPath                         There is no file selected              args IsValid   false                    else               var Extension   FileUploadPath substring FileUploadPath lastIndexOf        1  toLowerCase                if  Extension     gif     Extension     png     Extension     bmp     Extension     jpeg                     args IsValid   true     Valid file type                 FileUploadPath                                  else                   args IsValid   false     Not valid file type                                lt  script gt

User · Answer

This is the best solution in my opinion  which is by far much shorter than the other ones   function OnSelect e        var acceptedFiles      jpg     jpeg     png     gif        var isAcceptedImageFormat      inArray e files 0  extension  acceptedFiles      -1       if   isAcceptedImageFormat                warningMessage   show              else               warningMessage   hide              In this case  the function is called from a Kendo Upload control with this setting    Events e   gt  e Select  OnSelect

User · Answer

When you want to validate browse button and file extension  use this code   function fileValidate     var docVal document forms 0  fileUploaded value  var extension   docVal substring docVal lastIndexOf      1 docVal length   if extension toLowerCase       pdf   alert  Please enter file  in  pdf extension      return false

User · Answer

You can use the  accept attribute available for input file types  Checkout MDN documentation

User · Answer

we can check it on submit or we can make change event of that control    var fileInput   document getElementById  file        var filePath   fileInput value      var allowedExtensions       jpeg   JPEG   gif   GIF   png   PNG         if  filePath        amp  amp   allowedExtensions exec filePath         alert  Invalid file extention pleasse select another file        fileInput value           return false

User · Answer

This is how it is done in jquery       artifact form   submit function        return   jpg    jpeg    bmp    gif    png   includes          exec     artifact file name   val    0

User · Answer

Here is a more reusable way  assuming you use jQuery  Library function  does not require jQuery    function stringEndsWithValidExtension stringToCheck  acceptableExtensionsArray  required        if  required    false  amp  amp  stringToCheck length    0    return true        for  var i   0  i  lt  acceptableExtensionsArray length  i              if  stringToCheck toLowerCase   endsWith acceptableExtensionsArray i  toLowerCase       return true              return false      String prototype startsWith   function  str    return  this match       str     str     String prototype endsWith   function  str    return  this match str           str      Page function  requires jQuery  barely         id   btnSaveForm     click function          if   stringEndsWithValidExtension     id   fileUploader     val       png     jpeg     jpg     bmp    false             alert  Photo only allows file types of PNG  JPG and BMP             return false            return true

User · Answer

function             input type file    change function              var val     this  val   toLowerCase                regex   new RegExp          docx doc pdf xml bmp ppt xls               if    regex test val                    this  val                  alert  Please select correct file format

User · Answer

None of the existing answers seemed quite compact enough for the simplicity of the request   Checking if a given file input field has an extension from a set can be accomplished as follows  function hasExtension inputID  exts        var fileName   document getElementById inputID  value      return  new RegExp       exts join      replace     g                  test fileName      So example usage might be  where upload is the id of a file input   if   hasExtension  upload      jpg     gif     png                  block upload    Or as a jQuery plugin    fn hasExtension   function exts        return  new RegExp       exts join      replace     g                  test   this  val        Example usage  if       upload   hasExtension    jpg     png     gif                  block upload    The  replace     g         is there to escape the dot for the regexp so that basic extensions can be passed in without the dots matching any character  There s no error checking on these to keep them short  presumably if you use them you ll make sure the input exists first and the extensions array is valid

User · Answer

x000D   x000D  var  validFileExtensions      jpg     jpeg     bmp     gif     png        x000D  function ValidateSingleInput oInput    x000D      if  oInput type     file     x000D          var sFileName   oInput value  x000D           if  sFileName length  gt  0    x000D              var blnValid   false  x000D              for  var j   0  j  lt   validFileExtensions length  j      x000D                  var sCurExtension    validFileExtensions j   x000D                  if  sFileName substr sFileName length - sCurExtension length  sCurExtension length  toLowerCase      sCurExtension toLowerCase      x000D                      blnValid   true  x000D                      break  x000D                    x000D                x000D                x000D              if   blnValid    x000D                  alert  Sorry      sFileName     is invalid  allowed extensions are       validFileExtensions join         x000D                  oInput value       x000D                  return false  x000D                x000D            x000D        x000D      return true  x000D    x000D  File 1   lt input type  file  name  file1  onchange  ValidateSingleInput this      gt  lt br   gt  x000D  File 2   lt input type  file  name  file2  onchange  ValidateSingleInput this      gt  lt br   gt  x000D  File 3   lt input type  file  name  file3  onchange  ValidateSingleInput this      gt  lt br   gt  x000D   x000D   x000D

User · Answer

You can create an array that includes the filetype that is needed and use   inArray   in jQuery to check if filetype exist in array   var imageType     jpeg    jpg    png    gif    bmp          Given that file is a file object and file type is string     like  image jpeg    image png   or  image gif  and so on     if  -1      inArray file type split      1   imageType       console log  Not an image type

User · Answer

try this  Works for me    x000D   x000D     x000D    function validate    x000D    var file  form file value  x000D         var reg            jpg bmp jpeg png     x000D         if  file match reg   x000D           x000D          alert  Invalid File    x000D          return false  x000D           x000D           x000D   lt form name  form  gt  x000D   lt input type  file  name  file   gt  x000D   lt input type  submit  onClick  return validate      gt  x000D   lt  form gt  x000D   x000D        x000D   x000D   x000D

User · Answer

It s possible to check only the file extension  but user can easily rename virus exe to virus jpg and  pass  the validation   For what it s worth  here is the code to check file extension and abort if does not meet one of the valid extensions   choose invalid file and try to submit to see the alert in action    x000D   x000D  var  validFileExtensions      jpg     jpeg     bmp     gif     png        x000D  function Validate oForm    x000D      var arrInputs   oForm getElementsByTagName  input    x000D      for  var i   0  i  lt  arrInputs length  i      x000D          var oInput   arrInputs i   x000D          if  oInput type     file     x000D              var sFileName   oInput value  x000D              if  sFileName length  gt  0    x000D                  var blnValid   false  x000D                  for  var j   0  j  lt   validFileExtensions length  j      x000D                      var sCurExtension    validFileExtensions j   x000D                      if  sFileName substr sFileName length - sCurExtension length  sCurExtension length  toLowerCase      sCurExtension toLowerCase      x000D                          blnValid   true  x000D                          break  x000D                        x000D                    x000D                   x000D                  if   blnValid    x000D                      alert  Sorry      sFileName     is invalid  allowed extensions are       validFileExtensions join         x000D                      return false  x000D                    x000D                x000D            x000D        x000D     x000D      return true  x000D    x000D   lt form onsubmit  return Validate this    gt  x000D    File   lt input type  file  name  my file    gt  lt br   gt  x000D     lt input type  submit  value  Submit    gt  x000D   lt  form gt  x000D   x000D   x000D    Note  the code will allow user to send without choosing file    if it s required  remove the line if  sFileName length  gt  0    and it s associate closing bracket  The code will validate any file input in the form  regardless of its name   This can be done with jQuery in less lines  but I m comfortable enough with  raw  JavaScript and the final result is the same   In case you have more files  or want to trigger the check upon changing the file and not only in form submission  use such code instead    x000D   x000D  var  validFileExtensions      jpg     jpeg     bmp     gif     png        x000D  function ValidateSingleInput oInput    x000D      if  oInput type     file     x000D          var sFileName   oInput value  x000D           if  sFileName length  gt  0    x000D              var blnValid   false  x000D              for  var j   0  j  lt   validFileExtensions length  j      x000D                  var sCurExtension    validFileExtensions j   x000D                  if  sFileName substr sFileName length - sCurExtension length  sCurExtension length  toLowerCase      sCurExtension toLowerCase      x000D                      blnValid   true  x000D                      break  x000D                    x000D                x000D                x000D              if   blnValid    x000D                  alert  Sorry      sFileName     is invalid  allowed extensions are       validFileExtensions join         x000D                  oInput value       x000D                  return false  x000D                x000D            x000D        x000D      return true  x000D    x000D  File 1   lt input type  file  name  file1  onchange  ValidateSingleInput this      gt  lt br   gt  x000D  File 2   lt input type  file  name  file2  onchange  ValidateSingleInput this      gt  lt br   gt  x000D  File 3   lt input type  file  name  file3  onchange  ValidateSingleInput this      gt  lt br   gt  x000D   x000D   x000D    This will show alert and reset the input in case of invalid file extension

User · Answer

If you re needing to test remote urls in an input field  you can try testing a simple regex with the types that you re interested in    input field       js-input-field-class     if         gif jpg jpeg tiff png   i  test   input field val              error-message   text  This URL is not a valid image type  Please use a url with the known image types gif  jpg  jpeg  tiff or png       return false      This will capture anything ending in  gif   jpg   jpeg   tiff or  png  I should note that some popular sites like Twitter append a size attribute to the end of their images  For instance  the following would fail this test even though it s a valid image type   https   pbs twimg com media BrTuXT5CUAAtkZM jpg large   Because of that  this isn t a perfect solution  But it will get you to about 90  of the way

User · Answer

Do you use the input type  file  to choose the uploadfiles  if so  why not use the accept attribute    lt input type  file  name  myImage  accept  image x-png image gif image jpeg    gt

User · Answer

check that if file is selected or not         if  document myform elements  filefield   value                                 alert  You forgot to attach file                  document myform elements  filefield   focus                 return false                 check the file extension    var res field   document myform elements  filefield   value       var extension   res field substr res field lastIndexOf        1  toLowerCase      var allowedExtensions     doc    docx    txt    pdf    rtf      if  res field length  gt  0                   if  allowedExtensions indexOf extension      -1                                 alert  Invalid file Format  Only     allowedExtensions join           are allowed                    return false

User · Answer

I came here because I was sure none of the answers here were quite   poetic    x000D   x000D  function checkextension     x000D    var file   document querySelector   fUpload    x000D    if       jpe g png gif   i test file files 0  name      false     alert  not an image       x000D    x000D   lt input type  file  id  fUpload  onchange  checkextension     gt  x000D   x000D   x000D

User · Answer

lt script type  text javascript  gt           function file upload                 var imgpath   document getElementById   lt   FileUpload1 ClientID   gt    value              if  imgpath                          alert  Upload your Photo                       document file word focus                    return false                            else                      code to get File Extension                    var arr1   new Array                  arr1   imgpath split                        var len   arr1 length                  var img1   arr1 len - 1                   var filext   img1 substring img1 lastIndexOf        1                      Checking Extension                 if  filext     bmp     filext     gif     filext     png     filext     jpg     filext     jpeg                          alert  Successfully Uploaded                          return false                                    else                       alert  Upload Photo with Extension   bmp   gif  png   jpg   jpeg                          document form word focus                        return false                                                     function Doc upload                 var imgpath   document getElementById   lt   FileUpload2 ClientID   gt    value              if  imgpath                          alert  Upload Agreement                       document file word focus                    return false                            else                      code to get File Extension                    var arr1   new Array                  arr1   imgpath split                        var len   arr1 length                  var img1   arr1 len - 1                   var filext   img1 substring img1 lastIndexOf        1                      Checking Extension                 if  filext     txt     filext     pdf     filext     doc                         alert  Successfully Uploaded                          return false                                    else                       alert  Upload File with Extension   txt   pdf   doc                          document form word focus                        return false                                             lt  script gt

User · Answer

Another nowadays example via Array prototype some     x000D   x000D  function isImage icon      const ext      jpg     jpeg     bmp     gif     png     svg      return ext some el   gt  icon endsWith el       console log isImage  questions 4234589 png     console log isImage  questions 4234589 doc     x000D   x000D   x000D

[javascript] Validation of file extension before uploading file

Examples related to javascript

Examples related to jquery

Examples related to validation

Examples related to file-upload