CODEWITHSUNDEEP
javascriptjquery
Mevia
Mevia

Reputation: 1564

jQuery How to detect if file is being currently uploading (event is runing)

I written this code:

var fi = self.find('.file');

fi.on('change', function() {

    if(fi.prop('files').length === 1) {
        var file = fi.prop('files')[0],
            name = file.name,
            ext = name.split('.').pop().toLowerCase(),
            size = (file.size / 1048576).toFixed(2),
            type = file.type;

        if($.inArray(ext, ['jpg', 'png', 'gif']) == -1) {
            return false;
        }

        if($.inArray(type, ['image/jpeg', 'image/png', 'image/gif']) == -1) {
            return false;
        }

        if(size > 1.2) {
            return false;
        }

        ajax(createData(file));
        return false;
    }

    return false;
});

I am allowing to upload only 1 file at the time ( from html side, js side and php side of view ), but with this script if user selects bigger size file, lets say 2+ MB and he is really fast clicker he can select another file and it creates second event and both files are being uploaded to the server which causes chaos and problems. Also i will be implementing drag and drop upload option so as a beginner javascript coder im asking the community if there is a way to:

  1. Prevent from triggering script while file is being already uploaded ( i dont mean methods like hide input or diable it or take off event listener for a while, i mean method that detects if event is running and prevent executing script ). I tried things like default prevent or stop propagation but these dont work obviously.

  2. Adding a button that will cancel on going script ( meaning stop file uploading and "clean it up" so user can safetly try again )

Thank you in advance for all your hints and guidance ;)

Upvotes: 0

Views: 100

Answers (1)

dmcqu314
dmcqu314

Reputation: 875

I worked on this recently for one of my side projects. Here's a code sample:

            var fileReader = new FileReader();
            var fileFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

            var imageObject = { valid: false };


                fileReader.onload = function (fileReaderEvent) {
                    imageObject.data = fileReaderEvent.target.result;
                };

                var loadImage = function() {
                    if (element[0].files.length === 0) {
                        return;
                    }

                    var file = element[0].files[0];

                    imageObject.filename = file.name;

                    if (!fileFilter.test(file.type)) {
                        imageObject.error = 'You must select a valid image!';
                        imageObject.valid = false;
                        return;
                    }else{
                        imageObject.error = '';
                        imageObject.valid = true;
                    }

                    fileReader.readAsDataURL(file);
                };

                element.on('change', loadImage);
        }

This was from an AngularJS project so I've removed all the angular components but it should be pretty easy to add in the necessary JQuery code.

Upvotes: 1

Related Questions