JQuery Validate Image Upload File Type

Question

I have a JQuery script that validates the upload of avatar images but I need it to prevent the upload of anything other than PNG, JPG & GIF images. Any way of implementing this into the code I have? Here is the code:

$('#addButton').click(function () {
    var avatar = $("#avatarupload").val();
    if(avatar.length < 1) {
        avatarok = 0;
    }
    //ELSE IF FILE TYPE
    else {
        avatarok = 1;
    }
    if(avatarok == 1) {
        $('.formValidation').addClass("sending");
        $("#form").submit();
    }
    else {
        $('.formValidation').addClass("validationError");
    }
    return false;
});

Isn't there a way of checking the file name for the extension? Like, if(avatar.name includes jpg){} sort of thing? — user3129227
– user3129227, Commented Jan 6, 2014 at 12:52
stuff like this can be easily manipulated and create lot of unsolved edge case if done using makeshift methods like the one I see below - do it cleanly on the server end or use proper HTML5 if you are focussing on reliability. — Rohan
– Rohan, Commented Jan 6, 2014 at 12:56
Of course you can validate on client side without File API, Check my answer. — Hugeen
– Hugeen, Commented Jan 6, 2014 at 13:01
I plan on checking it server side too but I just wanted to try to prevent the upload script being executed if possible — user3129227
– user3129227, Commented Jan 6, 2014 at 13:02

rrk · Accepted Answer · 2016-02-17 11:11:08Z

7

This should check the file extension

var extension = avatar.split('.').pop().toUpperCase();
if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
    avatarok = 0;
}

So the full code should looks like

$('#addButton').click(function () {
    var avatar = $("#avatarupload").val();
    var extension = avatar.split('.').pop().toUpperCase();
    if(avatar.length < 1) {
        avatarok = 0;
    }
    else if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
        avatarok = 0;
        alert("invalid extension "+extension);
    }
    else {
        avatarok = 1;
    }
    if(avatarok == 1) {
        $('.formValidation').addClass("sending");
        $("#form").submit();
    }
    else {
        $('.formValidation').addClass("validationError");
    }
    return false;
});

edited Feb 17, 2016 at 11:11

rrk

15.9k4 gold badges32 silver badges49 bronze badges

answered Jan 6, 2014 at 12:51

Original10

5723 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kmoe Over a year ago

This is a good solution if the OP is prepared to assume that users will always save their files with extensions...

Original10 Over a year ago

Yeah, you'd still need to check the mime type and data server side

user3129227 Over a year ago

Thanks @Original10 - This will work to display an error but it shows an error for valid files too - Any ideas why?

Original10 Over a year ago

Just updated the answer with where the code should fit within your existing code

user3129227 Over a year ago

@Original10 - Yes that's exactly what I have but it runs the error even if I'm adding a JPEG

|

Nish · Accepted Answer · 2014-01-06 12:55:46Z

2

You can try for jquery validate for validation which is having accept :

vCategoryImage:{
   accept: "image/*"
}

answered Jan 6, 2014 at 12:55

Nish

3252 gold badges3 silver badges11 bronze badges

Comments

Shaheer Ali · Accepted Answer · 2020-03-31 05:06:26Z

0

As per your requirement the purpose is upload avatar ,so you can check with drop zone open source file upload extension Drop Zone.

Or else you can check with the various plugins available from Jquery.

For Example plugin please check the below links

Lite Uploader - File type and size validation and more functionality. Lite Uploader
Resumable JS - Resumable JS

Hope this will be helpful.

answered Mar 31, 2020 at 5:06

Shaheer Ali

265 bronze badges

Collectives™ on Stack Overflow

JQuery Validate Image Upload File Type

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related