3
\$\begingroup\$

I tried to write my first jQuery plugin. It's a very simple Ajax file uploader.

I would appreciate a review of this code.

HTML

<input type="file" id="upload" multiple="multiple" />

Plugin

;(function ($, window, document, undefined) {

    // Function-level strict mode syntax
    'use strict';

    $.fn.ajaxUpload = function(options) {

        var defaults = {
            curr_files      : 0,
            max_files       : 18,
            max_concurrent  : 10,
            max_filesize    : 200000,
            allowed_types   : ['jpeg','jpg'],
            ajax_url        : 'action.php',
            extra_fields    : {}
        };

        var options = $.extend(defaults, options);

        return this.each(function() {

            var $this = $(this);

            $this.on('change', function() {

                var files = $this[0].files;
                var len = files.length;
                var items = 0;
                var diff_files = parseInt(defaults.max_files - defaults.curr_files - len);

                if(diff_files < 0) {
                    alert("Error!");
                    return false;
                }
                if(!maxUploadFiles(len, defaults.max_concurrent)) {
                    alert("Error!");
                    return false;
                }

                var formdata = new FormData();
                jQuery.each(files, function(i, file) {
                    if(!isOverSized(file, defaults.max_filesize)) {
                        alert("Error!");
                        return false;
                    }
                    if(!isAllowedTypes(file, defaults.allowed_types)) {
                        alert("Error!");
                        return false;
                    }
                    formdata.append('file['+i+']', file);
                    items++;
                });

                // Append extra data to formdata
                $.each(defaults.extra_fields, function(name, value) {
                    formdata.append(name, value);
                });

                // Check that files have passed all test
                if (len != items) { return false; }

                $.ajax({
                    url: defaults.ajax_url,
                    data: formdata,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function(data){
                        alert(data);
                        location.reload(true);
                    }
                });

            });
       });
    };

    function maxUploadFiles(len, max_concurrent) {
        if(len > max_concurrent) {
            return false;
        }
        return true;
    }
    function isAllowedTypes(file, allowed_types) {
        var ext = file.name.split('.').pop().toLowerCase();
        if(jQuery.inArray(ext, allowed_types) < 0) {
            return false;
        }
        return true;
    }
    function isOverSized(file, max_filesize) {
        if(file.size > max_filesize) {
            return false;
        }
        return true;
    }

})(jQuery, window, document);
\$\endgroup\$
  • \$\begingroup\$ I would advise against having a default value for ajax_url, and possiblye allowed_types as well. Having a default in place means that supplying them is optional, which is almost certainly not going to be the case; it would make more sense to me for the function to throw an error if ajax_url was not specified when calling it. \$\endgroup\$ – Hydrothermal Apr 10 '15 at 2:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.