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 & rejects the upload if it is not an image.

You're using Uploadify as suggested in one of your previous questions, right? — BalusC, Nov 20 '10 at 22:55
No, it stops in between 50-96. Tried many times with various inputs. And, i was also in a hurry for a solution at the time. So, i gave a try to simple `jquery.ProgressBar.js`. It works, fine. ### So, can i validate with uploadify!!! — , Nov 21 '10 at 00:22
http://www.angulartutorial.net/2016/05/file-upload-validation.html — Prashobh, May 21 '16 at 07:06
Can't we just simply use accept attribute in the input tag in order to make sure that the user selects the file of the specified format ? — AnonSar, May 02 '20 at 15:07

Shadow The Vaccinated Wizard · Accepted Answer · 2015-02-26T15:03:09.563

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)

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                
                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}

<form onsubmit="return Validate(this);">
  File: <input type="file" name="my file" /><br />
  <input type="submit" value="Submit" />
</form>

Note, the code will allow user to send without choosing file... if it's required, remove the line if (sFileName.length > 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:

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}

File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

This will show alert and reset the input in case of invalid file extension.

I'd just like to add that using "onSubmit" instead of "onChange" is cumbersome - especially if the "multiple" option is used. Each file should be checked as it selected, not when the entire form is posted. — DevlshOne, Feb 26 '15 at 14:43
@DevlshOne interesting idea, will mention this as well in the post. Thanks! — Shadow The Vaccinated Wizard, Feb 26 '15 at 14:46
Thank you very much for this code @Shadow Wizard.It really helped me much! — Anahit Ghazaryan, Apr 23 '15 at 14:17
@garryman fails how? The question here doesn't mention the file is required. If in your case the file is a required field, you can move the line `var blnValid = false;` to be above the loop over arrInputs, then after the loop check the variable blnValid: if true, let the form submit, otherwise show alert that the file is required. — Shadow The Vaccinated Wizard, Jan 12 '20 at 08:15

score 75 · Answer 2 · edited Sep 11 '20 at 06:42

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!

Nice. Note that these scripts are case sensitive. To solve this you need to give `RexExp the "i" modifier, for example: return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$', "i")).test(fileName);` — Tedd Hansen, Jan 26 '16 at 14:36
A bit difficult to read, but that means adding `, "i"` after end of regex string (`)$'`). This will add support for any casing in file name extension (.jpg, .JPG, .Jpg, etc...) — Tedd Hansen, Jan 26 '16 at 14:42
Thank you, Tedd, would be better to have case-insensitive matching. — Orbling, Feb 28 '16 at 17:41

score 41 · Answer 3 · edited Nov 27 '17 at 19:10

41

$(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');
        }
    });
});

edited Nov 27 '17 at 19:10

Emile Bergeron

14,368
4
66
111

answered Mar 18 '15 at 06:43

Ashish pathak

701
7
15

1

Thanks, very simple and clean. – F.Lopez Oct 30 '19 at 14:19
if you press cancel, it will trigger an alert. – PinoyStackOverflower Jun 28 '20 at 02:21
If you have a "file" object, use `file.name` instead val(): `var val = $(file.name).toLowerCase(), ...` – Avatar Feb 11 '21 at 09:51

score 20 · Answer 4 · answered Nov 22 '16 at 23:07

20

I came here because I was sure none of the answers here were quite...poetic:

function checkextension() {
  var file = document.querySelector("#fUpload");
  if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}

<input type="file" id="fUpload" onchange="checkextension()"/>

answered Nov 22 '16 at 23:07

Cedric Ipkiss

3,682
2
30
50

Thanks this works in Angular with little modification, thanks – skydev Nov 08 '19 at 06:35
worked well for me, though one should trim any trailing spaces from the name before testing. +1 – Roberto Jan 03 '20 at 16:49

score 9 · Answer 5 · answered May 21 '13 at 11:11

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 > 0)
     {
          if (allowedExtensions.indexOf(extension) === -1) 
             {
               alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
               return false;
             }
    }

score 8 · Answer 6 · edited Sep 30 '12 at 08:14

I like this example:

<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />

<script language="javascript" type="text/javascript">
    function ValidateFileUpload(Source, args) {
        var fuData = document.getElementById('<%= fpImages.ClientID %>');
        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
            }
        }
    }
</script>

Rouven · Answer 7 · 2018-12-14T16:20:06.053

8

Do you use the input type="file" to choose the uploadfiles? if so, why not use the accept attribute?

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

edited Dec 14 '18 at 16:20

answered Sep 07 '18 at 14:21

Rouven

244
3
11

1

This! `accept="image/*"` it's definitely the smartest choice in most cases. – Alberto T. Jun 16 '20 at 10:05
Great tip! Exactly what I needed. – oluwatyson Jan 09 '21 at 22:17
after clicking on browse button, in popup if we select all files than it will display all files, not only images – sangRam Feb 15 '21 at 12:30

user3789031 · Answer 8 · 2014-06-30T21:07:39.530

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.

score 4 · Answer 9 · answered Mar 25 '17 at 16:11

try this (Works for me)

  
  function validate(){
  var file= form.file.value;
       var reg = /(.*?)\.(jpg|bmp|jpeg|png)$/;
       if(!file.match(reg))
       {
        alert("Invalid File");
        return false;
       }
       }

<form name="form">
<input type="file" name="file"/>
<input type="submit" onClick="return validate();"/>
</form>

score 2 · Answer 10 · answered Aug 11 '20 at 08:41

Another nowadays example via Array.prototype.some().

function isImage(icon) {
  const ext = ['.jpg', '.jpeg', '.bmp', '.gif', '.png', '.svg'];
  return ext.some(el => icon.endsWith(el));
}

console.log(isImage('questions_4234589.png'));
console.log(isImage('questions_4234589.doc'));

score 1 · Answer 11 · answered Aug 07 '12 at 18:59

Here is a more reusable way, assuming you use jQuery

Library function (does not require jQuery):

function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
    if (required == false && stringToCheck.length == 0) { return true; }
    for (var i = 0; i < 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;
});

score 1 · Answer 12 · answered Mar 29 '17 at 10:51

[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 => {
    return val === uploadedFileType;
});

score 1 · Answer 13 · answered May 06 '17 at 07:26

1

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

answered May 06 '17 at 07:26

Aditibtp

49
6

2

With this you can still select other file types – César León Sep 29 '17 at 18:50
@CésarLeón Yes. User has option to select all files. If you want restrict that also, you need to do manual validation. Check other answers. – Madura Pradeep Jun 18 '19 at 03:12

Ajay Kumar Gupta · Answer 14 · 2019-10-04T13:16:00.443

1

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;
}

edited Oct 04 '19 at 13:16

answered Apr 24 '19 at 07:13

Ajay Kumar Gupta

11
3

1

when you want to validate browse button and file extension,use this code. – Ajay Kumar Gupta Apr 24 '19 at 07:14

score 1 · Answer 15 · edited Jul 13 '19 at 11:06

1

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])
  });

edited Jul 13 '19 at 11:06

RalfFriedl

1,046
3
8
12

answered Jul 13 '19 at 09:16

Jinja2Django

23
6

score 1 · Answer 16 · answered Jan 23 '20 at 06:19

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 != "" && !allowedExtensions.exec(filePath)) {
    alert('Invalid file extention pleasse select another file');
    fileInput.value = '';
    return false;
    }

score 1 · Answer 17 · answered Nov 05 '20 at 08:17

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

score 0 · Answer 18 · edited Dec 30 '13 at 15:22

<script type="text/javascript">

        function file_upload() {
            var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").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("<%=FileUpload2.ClientID %>").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;
                }
            }
        }
</script>

It would be better if you write short description of your answer. — Roopendra, Dec 03 '13 at 06:05

score 0 · Answer 19 · answered Jul 24 '15 at 07:19

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}

File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

score 0 · Answer 20 · edited Mar 22 '17 at 20:19

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');
}

score 0 · Answer 21 · answered Mar 02 '21 at 05:11

using Array

Add all of your file-extensions/mimeType in validExtensions Array

const validExtensions = ["image/jpg", "image/jpeg", "image/png", "image/gif"];
const isValidExtension = validExtensions.indexOf(file.mimetype) > -1;
console.log(isValidExtension);

score -1 · Answer 22 · answered Mar 22 '17 at 20:40

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 => e.Select("OnSelect")).

Validation of file extension before uploading file

22 Answers22

using Array

Linked

Related