fileuploader-rails 2.1.2 → 3.0.0

data/README.md

@@ -1,18 +1,25 @@
-# Fine Uploader 2.1.2 for Rails
+# Fine Uploader 3.0.0 for Rails
 
 [Fineuploader](http://fineuploader.com/) is a Javascript plugin written by [Andrew Valums](http://github.com/valums/), and actively developed by [Ray Nicholus](http://lnkd.in/Nkhx2C). This plugin uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere. It does not use Flash, jQuery, or any external libraries.
 
-This gem integrates this fantastic plugin with Rails 3.1 Asset Pipeline.
+This gem integrates this fantastic plugin with Rails 3.1+ Asset Pipeline.
 
 ## Installing Gem
 
-    gem 'fileuploader-rails', '~> 2.1.2'
+    gem 'fileuploader-rails', '~> 3.0.0'
 
 ## Using the javascripts
 
 Require fineuploader in your app/assets/application.js file.
 
-    //= require fineuploader
+    # Basic version
+    //= require fineuploader/uploader.basic
+
+    # Full version
+    //= require fineuploader/uploader
+
+    # Jquery wrapper
+    //= require fineuploader/jquery-plugin 
 
 ## Using the stylesheet
 

data/lib/fileuploader-rails/version.rb

@@ -1,5 +1,5 @@
 module Fileuploader
   module Rails
-    VERSION = "2.1.2"
+    VERSION = "3.0.0"
   end
 end

data/vendor/assets/javascripts/fineuploader/button.js

@@ -0,0 +1,102 @@
+qq.UploadButton = function(o){
+    this._options = {
+        element: null,
+        // if set to true adds multiple attribute to file input
+        multiple: false,
+        acceptFiles: null,
+        // name attribute of file input
+        name: 'file',
+        onChange: function(input){},
+        hoverClass: 'qq-upload-button-hover',
+        focusClass: 'qq-upload-button-focus'
+    };
+
+    qq.extend(this._options, o);
+    qq.extend(this, qq.DisposeSupport);
+
+    this._element = this._options.element;
+
+    // make button suitable container for input
+    qq(this._element).css({
+        position: 'relative',
+        overflow: 'hidden',
+        // Make sure browse button is in the right side
+        // in Internet Explorer
+        direction: 'ltr'
+    });
+
+    this._input = this._createInput();
+};
+
+qq.UploadButton.prototype = {
+    /* returns file input element */
+    getInput: function(){
+        return this._input;
+    },
+    /* cleans/recreates the file input */
+    reset: function(){
+        if (this._input.parentNode){
+            qq(this._input).remove();
+        }
+
+        qq(this._element).removeClass(this._options.focusClass);
+        this._input = this._createInput();
+    },
+    _createInput: function(){
+        var input = document.createElement("input");
+
+        if (this._options.multiple){
+            input.setAttribute("multiple", "multiple");
+        }
+
+        if (this._options.acceptFiles) input.setAttribute("accept", this._options.acceptFiles);
+
+        input.setAttribute("type", "file");
+        input.setAttribute("name", this._options.name);
+
+        qq(input).css({
+            position: 'absolute',
+            // in Opera only 'browse' button
+            // is clickable and it is located at
+            // the right side of the input
+            right: 0,
+            top: 0,
+            fontFamily: 'Arial',
+            // 4 persons reported this, the max values that worked for them were 243, 236, 236, 118
+            fontSize: '118px',
+            margin: 0,
+            padding: 0,
+            cursor: 'pointer',
+            opacity: 0
+        });
+
+        this._element.appendChild(input);
+
+        var self = this;
+        this._attach(input, 'change', function(){
+            self._options.onChange(input);
+        });
+
+        this._attach(input, 'mouseover', function(){
+            qq(self._element).addClass(self._options.hoverClass);
+        });
+        this._attach(input, 'mouseout', function(){
+            qq(self._element).removeClass(self._options.hoverClass);
+        });
+        this._attach(input, 'focus', function(){
+            qq(self._element).addClass(self._options.focusClass);
+        });
+        this._attach(input, 'blur', function(){
+            qq(self._element).removeClass(self._options.focusClass);
+        });
+
+        // IE and Opera, unfortunately have 2 tab stops on file input
+        // which is unacceptable in our case, disable keyboard access
+        if (window.attachEvent){
+            // it is IE or Opera
+            input.setAttribute('tabIndex', "-1");
+        }
+
+        return input;
+    }
+};

data/vendor/assets/javascripts/fineuploader/handler.base.js

@@ -0,0 +1,120 @@
+/**
+ * Class for uploading files, uploading itself is handled by child classes
+ */
+qq.UploadHandlerAbstract = function(o){
+    // Default options, can be overridden by the user
+    this._options = {
+        debug: false,
+        endpoint: '/upload.php',
+        // maximum number of concurrent uploads
+        maxConnections: 999,
+        log: function(str, level) {},
+        onProgress: function(id, fileName, loaded, total){},
+        onComplete: function(id, fileName, response, xhr){},
+        onCancel: function(id, fileName){},
+        onUpload: function(id, fileName, xhr){},
+        onAutoRetry: function(id, fileName, response, xhr){}
+
+    };
+    qq.extend(this._options, o);
+
+    this._queue = [];
+    // params for files in queue
+    this._params = [];
+
+    this.log = this._options.log;
+};
+qq.UploadHandlerAbstract.prototype = {
+    /**
+     * Adds file or file input to the queue
+     * @returns id
+     **/
+    add: function(file){},
+    /**
+     * Sends the file identified by id and additional query params to the server
+     */
+    upload: function(id, params){
+        var len = this._queue.push(id);
+
+        var copy = {};
+        qq.extend(copy, params);
+        this._params[id] = copy;
+
+        // if too many active uploads, wait...
+        if (len <= this._options.maxConnections){
+            this._upload(id, this._params[id]);
+        }
+    },
+    retry: function(id) {
+        var i = qq.indexOf(this._queue, id);
+        if (i >= 0) {
+            this._upload(id, this._params[id]);
+        }
+        else {
+            this.upload(id, this._params[id]);
+        }
+    },
+    /**
+     * Cancels file upload by id
+     */
+    cancel: function(id){
+        this.log('Cancelling ' + id);
+        this._cancel(id);
+        this._dequeue(id);
+    },
+    /**
+     * Cancells all uploads
+     */
+    cancelAll: function(){
+        for (var i=0; i<this._queue.length; i++){
+            this._cancel(this._queue[i]);
+        }
+        this._queue = [];
+    },
+    /**
+     * Returns name of the file identified by id
+     */
+    getName: function(id){},
+    /**
+     * Returns size of the file identified by id
+     */
+    getSize: function(id){},
+    /**
+     * Returns id of files being uploaded or
+     * waiting for their turn
+     */
+    getQueue: function(){
+        return this._queue;
+    },
+    reset: function() {
+        this.log('Resetting upload handler');
+        this._queue = [];
+        this._params = [];
+    },
+    /**
+     * Actual upload method
+     */
+    _upload: function(id){},
+    /**
+     * Actual cancel method
+     */
+    _cancel: function(id){},
+    /**
+     * Removes element from queue, starts upload of next
+     */
+    _dequeue: function(id){
+        var i = qq.indexOf(this._queue, id);
+        this._queue.splice(i, 1);
+
+        var max = this._options.maxConnections;
+
+        if (this._queue.length >= max && i < max){
+            var nextId = this._queue[max-1];
+            this._upload(nextId, this._params[nextId]);
+        }
+    },
+    /**
+     * Determine if the file exists.
+     */
+    isValid: function(id) {}
+};

data/vendor/assets/javascripts/fineuploader/handler.form.js

@@ -0,0 +1,197 @@
+/**
+ * Class for uploading files using form and iframe
+ * @inherits qq.UploadHandlerAbstract
+ */
+qq.UploadHandlerForm = function(o){
+    qq.UploadHandlerAbstract.apply(this, arguments);
+
+    this._inputs = {};
+    this._detach_load_events = {};
+};
+// @inherits qq.UploadHandlerAbstract
+qq.extend(qq.UploadHandlerForm.prototype, qq.UploadHandlerAbstract.prototype);
+
+qq.extend(qq.UploadHandlerForm.prototype, {
+    add: function(fileInput){
+        fileInput.setAttribute('name', this._options.inputName);
+        var id = 'qq-upload-handler-iframe' + qq.getUniqueId();
+
+        this._inputs[id] = fileInput;
+
+        // remove file input from DOM
+        if (fileInput.parentNode){
+            qq(fileInput).remove();
+        }
+
+        return id;
+    },
+    getName: function(id){
+        // get input value and remove path to normalize
+        return this._inputs[id].value.replace(/.*(\/|\\)/, "");
+    },
+    isValid: function(id) {
+        return this._inputs[id] !== undefined;
+    },
+    reset: function() {
+        qq.UploadHandlerAbstract.prototype.reset.apply(this, arguments);
+        this._inputs = {};
+        this._detach_load_events = {};
+    },
+    _cancel: function(id){
+        this._options.onCancel(id, this.getName(id));
+
+        delete this._inputs[id];
+        delete this._detach_load_events[id];
+
+        var iframe = document.getElementById(id);
+        if (iframe){
+            // to cancel request set src to something else
+            // we use src="javascript:false;" because it doesn't
+            // trigger ie6 prompt on https
+            iframe.setAttribute('src', 'javascript:false;');
+
+            qq(iframe).remove();
+        }
+    },
+    _upload: function(id, params){
+        this._options.onUpload(id, this.getName(id), false);
+        var input = this._inputs[id];
+
+        if (!input){
+            throw new Error('file with passed id was not added, or already uploaded or cancelled');
+        }
+
+        var fileName = this.getName(id);
+        params[this._options.inputName] = fileName;
+
+        var iframe = this._createIframe(id);
+        var form = this._createForm(iframe, params);
+        form.appendChild(input);
+
+        var self = this;
+        this._attachLoadEvent(iframe, function(){
+            self.log('iframe loaded');
+
+            var response = self._getIframeContentJSON(iframe);
+
+            // timeout added to fix busy state in FF3.6
+            setTimeout(function(){
+                self._detach_load_events[id]();
+                delete self._detach_load_events[id];
+                qq(iframe).remove();
+            }, 1);
+
+            if (!response.success) {
+                if (self._options.onAutoRetry(id, fileName, response)) {
+                    return;
+                }
+            }
+            self._options.onComplete(id, fileName, response);
+            self._dequeue(id);
+        });
+
+        this.log('Sending upload request for ' + id);
+        form.submit();
+        qq(form).remove();
+
+        return id;
+    },
+    _attachLoadEvent: function(iframe, callback){
+        var self = this;
+        this._detach_load_events[iframe.id] = qq(iframe).attach('load', function(){
+            self.log('Received response for ' + iframe.id);
+
+            // when we remove iframe from dom
+            // the request stops, but in IE load
+            // event fires
+            if (!iframe.parentNode){
+                return;
+            }
+
+            try {
+                // fixing Opera 10.53
+                if (iframe.contentDocument &&
+                    iframe.contentDocument.body &&
+                    iframe.contentDocument.body.innerHTML == "false"){
+                    // In Opera event is fired second time
+                    // when body.innerHTML changed from false
+                    // to server response approx. after 1 sec
+                    // when we upload file with iframe
+                    return;
+                }
+            }
+            catch (error) {
+                //IE may throw an "access is denied" error when attempting to access contentDocument on the iframe in some cases
+                self.log('Error when attempting to access iframe during handling of upload response (' + error + ")", 'error');
+            }
+
+            callback();
+        });
+    },
+    /**
+     * Returns json object received by iframe from server.
+     */
+    _getIframeContentJSON: function(iframe){
+        //IE may throw an "access is denied" error when attempting to access contentDocument on the iframe in some cases
+        try {
+            // iframe.contentWindow.document - for IE<7
+            var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document,
+                response;
+
+            var innerHTML = doc.body.innerHTML;
+            this.log("converting iframe's innerHTML to JSON");
+            this.log("innerHTML = " + innerHTML);
+            //plain text response may be wrapped in <pre> tag
+            if (innerHTML && innerHTML.match(/^<pre/i)) {
+                innerHTML = doc.body.firstChild.firstChild.nodeValue;
+            }
+            response = eval("(" + innerHTML + ")");
+        } catch(error){
+            this.log('Error when attempting to parse form upload response (' + error + ")", 'error');
+            response = {success: false};
+        }
+
+        return response;
+    },
+    /**
+     * Creates iframe with unique name
+     */
+    _createIframe: function(id){
+        // We can't use following code as the name attribute
+        // won't be properly registered in IE6, and new window
+        // on form submit will open
+        // var iframe = document.createElement('iframe');
+        // iframe.setAttribute('name', id);
+
+        var iframe = qq.toElement('<iframe src="javascript:false;" name="' + id + '" />');
+        // src="javascript:false;" removes ie6 prompt on https
+
+        iframe.setAttribute('id', id);
+
+        iframe.style.display = 'none';
+        document.body.appendChild(iframe);
+
+        return iframe;
+    },
+    /**
+     * Creates form, that will be submitted to iframe
+     */
+    _createForm: function(iframe, params){
+        // We can't use the following code in IE6
+        // var form = document.createElement('form');
+        // form.setAttribute('method', 'post');
+        // form.setAttribute('enctype', 'multipart/form-data');
+        // Because in this case file won't be attached to request
+        var protocol = this._options.demoMode ? "GET" : "POST"
+        var form = qq.toElement('<form method="' + protocol + '" enctype="multipart/form-data"></form>');
+
+        var queryString = qq.obj2url(params, this._options.endpoint);
+
+        form.setAttribute('action', queryString);
+        form.setAttribute('target', iframe.name);
+        form.style.display = 'none';
+        document.body.appendChild(form);
+
+        return form;
+    }
+});