File Upload

[jnbdz]

/**
 * Image Ajax Uploader.
 */
function fileAjaxUploader() {}

fileAjaxUploader.prototype = {

    /**
     * Initialise.
     * @retuns {void}
     */
    init: function(dropZone, action, callbackUploadSuccess, callbackUploadFail) {
        this.setDropZone(dropZone);
        this.action = action;

        this._uploadSuccess = (callbackUploadSuccess !== undefined)?callbackUploadSuccess:function(xhr){};
        this._uploadFail = (callbackUploadSuccess !== undefined)?callbackUploadFail:function(xhr){};

        this.setEvents();
    },

    setDropZone: function(dropZone) {
        this.dropZoneId = dropZone;
        this.dropZoneEl = document.getElementById(dropZone);
        console.log(this.dropZoneEl);
    },

    /**
     * Setter for most of the events.
     * @retuns {void}
     */
    setEvents: function() {
        this.dropZoneEl.addEventListener('dragover', function(e) {
            e.preventDefault();
            return false;
        }.bind(this), false);

        this.dropZoneEl.addEventListener('drop', function(e) {
            e.stopPropagation();
            e.preventDefault();

            this.upload(e.dataTransfer.files);
        }.bind(this), false);
    },

    /**
     * Method to upload files.
     * @param {File}
     * @retuns {void}
     */
    upload: function(files) {
        var formData = new FormData(),
            xhr = new XMLHttpRequest();

        for(var i=0;i<files.length;i++) {
            formData.append('images[]', files[i]);
        }

        xhr.open('POST', this.action, true);

        xhr.addEventListener('load', function () {
            if (xhr.status === 200 || xhr.status === 201) {
                this._uploadSuccess(xhr);
            } else {
                this._uploadFail(xhr);
            }
        }.bind(this), false);

        xhr.send(formData);

        return false;
    }
};

[jnbdz]

Interesting lib: http://www.dropzonejs.com/