Jquery validate file ext on upload

Question

I have a page for allowing users to upload their images using drag and drop and I would like to restrict them to uploading jpg files only.

I have to admit I am a complete newbie when it comes to jquery so I really don't have a clue how to make this work.

So far I have

var files = e.dataTransfer.files;
var ext = $('#drop-files').val().split('.').pop().toLowerCase();


// Show the upload holder
$('#uploaded-holder').show();

// For each file
$.each(files, function(index, file) {
    if($.inArray(ext, ['JPG','jpg','jpeg']) == -1) {
           alert('invalid extension!');
           return false;
       }

As this is it does nothing, if I remove the 'return false' it tells me every file is invalid and uploads them anyway.

Thanks

btw, I am aware that there are unclosed brackets, I'm just hoping the someone will see something obvious I have missed out in the section of code I've supplied

If you really want to check the file type, read the payload using DataTransfer.getData() and check the leading bytes (PNG, GIF89, JFIF or something). source — Stphane
– Stphane, Commented Mar 5, 2013 at 10:55
@f00bar - thanks for that but I have absolutely no idea what that means! lol — tatty27
– tatty27, Commented Mar 5, 2013 at 11:09

Rory McCrossan · Accepted Answer · 2013-03-05 10:54:13Z

2

The problem is because you are returning false from the function within the each loop, not the submit handler function. Try this:

// For each file
var validExtension = false;
$.each(files, function(index, file) {
    if ($.inArray(ext, ['JPG','jpg','jpeg']) != -1 && !validExtension) {
        validExtension = true;
    }
}
return validExtension;

answered Mar 5, 2013 at 10:54

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

tatty27 Over a year ago

HI thanks for that, not sure why though, but it flags a syntax error after the return in Dreamweaver?

Collectives™ on Stack Overflow

Jquery validate file ext on upload

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related