h5_uploader 0.2.2 → 0.3.0

data/README.md

@@ -1,14 +1,23 @@
-Set up
-====
+##Install
+	
+	gem install h5_uploader
+	
 
-config/application.rb
-----
+##Set up
+Run the install task that copy the necessary js and css resources.
 
-Add requre after the rails require statement
+	rake h5_uploader:install
 
-__require "rack-raw-upload"__
+In config/application.rb add the following settings:
 
-Add the middleware config
+	require "rack-raw-upload"
+	
+and
 
-__config.middleware.use 'Rack::RawUpload'__
+	config.middleware.use 'Rack::RawUpload'
+	
+Run bundle install.	
 
+
+##js library options and docs
+See [file-upload](https://github.com/jgoguen/file-uploader) 

data/lib/assets/fileuploader.js

@@ -1,11 +1,21 @@
 /**
  * http://github.com/valums/file-uploader
- * 
- * Multiple file upload component with progress-bar, drag-and-drop. 
- * © 2010 Andrew Valums ( andrew(at)valums.com ) 
- * 
+ *
+ * Multiple file upload component with progress-bar, drag-and-drop.
+ * © 2010 Andrew Valums ( andrew(at)valums.com )
+ *
+ * Licensed under GNU GPL 2 or later, see license.txt.
+ */
+/**
+ * http://github.com/jgoguen/file-uploader
+ * Forked from http://github.com/valums/file-uploader
+ * © 2010 Andrew Valums ( andrew(at)valums.com )
+ * © 2011 Joel Goguen ( jgoguen(at)jgoguen.ca )
+ *
+ * Script now depends on jQuery for functioning.
+ *
  * Licensed under GNU GPL 2 or later and GNU LGPL 2 or later, see license.txt.
- */    
+ */
 
 //
 // Helper functions
@@ -15,12 +25,12 @@ var qq = qq || {};
 
 /**
  * Adds all missing properties from second obj to first obj
- */ 
+ */
 qq.extend = function(first, second){
     for (var prop in second){
         first[prop] = second[prop];
     }
-};  
+};
 
 /**
  * Searches for a given element in the array, returns -1 if it is not present.
@@ -28,20 +38,20 @@ qq.extend = function(first, second){
  */
 qq.indexOf = function(arr, elt, from){
     if (arr.indexOf) return arr.indexOf(elt, from);
-    
+
     from = from || 0;
-    var len = arr.length;    
-    
-    if (from < 0) from += len;  
+    var len = arr.length;
+
+    if (from < 0) from += len;
 
-    for (; from < len; from++){  
-        if (from in arr && arr[from] === elt){  
+    for (; from < len; from++){
+        if (from in arr && arr[from] === elt){
             return from;
         }
-    }  
-    return -1;  
-}; 
-    
+    }
+    return -1;
+};
+
 qq.getUniqueId = (function(){
     var id = 0;
     return function(){ return id++; };
@@ -86,10 +96,10 @@ qq.remove = function(element){
     element.parentNode.removeChild(element);
 };
 
-qq.contains = function(parent, descendant){       
+qq.contains = function(parent, descendant){
     // compareposition returns false in this case
     if (parent == descendant) return true;
-    
+
     if (parent.contains){
         return parent.contains(descendant);
     } else {
@@ -181,7 +191,7 @@ qq.getByClass = function(element, className){
 /**
  * obj2url() takes a json-object as argument and generates
  * a querystring. pretty much like jQuery.param()
- * 
+ *
  * how to use:
  *
  *    `qq.obj2url({a:'b',c:'d'},'http://any.url/upload?otherParam=value');`
@@ -198,21 +208,21 @@ qq.obj2url = function(obj, temp, prefixDone){
     var uristrings = [],
         prefix = '&',
         add = function(nextObj, i){
-            var nextTemp = temp 
+            var nextTemp = temp
                 ? (/\[\]$/.test(temp)) // prevent double-encoding
                    ? temp
                    : temp+'['+i+']'
                 : i;
-            if ((nextTemp != 'undefined') && (i != 'undefined')) {  
+            if ((nextTemp != 'undefined') && (i != 'undefined')) {
                 uristrings.push(
-                    (typeof nextObj === 'object') 
+                    (typeof nextObj === 'object')
                         ? qq.obj2url(nextObj, nextTemp, true)
                         : (Object.prototype.toString.call(nextObj) === '[object Function]')
                             ? encodeURIComponent(nextTemp) + '=' + encodeURIComponent(nextObj())
-                            : encodeURIComponent(nextTemp) + '=' + encodeURIComponent(nextObj)                                                          
+                            : encodeURIComponent(nextTemp) + '=' + encodeURIComponent(nextObj)
                 );
             }
-        }; 
+        };
 
     if (!prefixDone && temp) {
       prefix = (/\?/.test(temp)) ? (/\?$/.test(temp)) ? '' : '&' : '?';
@@ -234,7 +244,7 @@ qq.obj2url = function(obj, temp, prefixDone){
 
     return uristrings.join(prefix)
                      .replace(/^&/, '')
-                     .replace(/%20/g, '+'); 
+                     .replace(/%20/g, '+');
 };
 
 //
@@ -244,9 +254,9 @@ qq.obj2url = function(obj, temp, prefixDone){
 //
 
 var qq = qq || {};
-    
+
 /**
- * Creates upload button, validates upload, but doesn't create file list or dd. 
+ * Creates upload button, validates upload, but doesn't create file list or dd.
  */
 qq.FileUploaderBasic = function(o){
     this._options = {
@@ -255,221 +265,243 @@ qq.FileUploaderBasic = function(o){
         action: '/server/upload',
         params: {},
         button: null,
+        uploadButtonText: 'Upload a file',
         multiple: true,
         maxConnections: 3,
-        // validation        
-        allowedExtensions: [],               
-        sizeLimit: 0,   
-        minSizeLimit: 0,                             
+        useBase2Prefixes: false,
+        // validation
+        allowedExtensions: [],
+        sizeLimit: 0,
+        minSizeLimit: 0,
         // events
         // return false to cancel submit
         onSubmit: function(id, fileName){},
         onProgress: function(id, fileName, loaded, total){},
         onComplete: function(id, fileName, responseJSON){},
         onCancel: function(id, fileName){},
-        // messages                
+        // messages
         messages: {
             typeError: "{file} has invalid extension. Only {extensions} are allowed.",
             sizeError: "{file} is too large, maximum file size is {sizeLimit}.",
             minSizeError: "{file} is too small, minimum file size is {minSizeLimit}.",
             emptyError: "{file} is empty, please select files again without it.",
-            onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."            
+            onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."
         },
         showMessage: function(message){
             alert(message);
-        }               
+        }
     };
     qq.extend(this._options, o);
-        
+
     // number of files being uploaded
     this._filesInProgress = 0;
-    this._handler = this._createUploadHandler(); 
-    
-    if (this._options.button){ 
+    this._handler = this._createUploadHandler();
+
+    if (this._options.button){
         this._button = this._createUploadButton(this._options.button);
     }
-                        
-    this._preventLeaveInProgress();         
+
+    this._preventLeaveInProgress();
 };
-   
+
 qq.FileUploaderBasic.prototype = {
     setParams: function(params){
         this._options.params = params;
     },
     getInProgress: function(){
-        return this._filesInProgress;         
+        return this._filesInProgress;
     },
     _createUploadButton: function(element){
         var self = this;
-        
-        return new qq.UploadButton({
+
+        var btn = new qq.UploadButton({
             element: element,
             multiple: this._options.multiple && qq.UploadHandlerXhr.isSupported(),
             onChange: function(input){
                 self._onInputChange(input);
-            }        
-        });           
-    },    
+            }
+        });
+        $(btn._element).contents().first().replaceWith(this._options.uploadButtonText);
+        return btn;
+    },
     _createUploadHandler: function(){
         var self = this,
-            handlerClass;        
-        
-        if(qq.UploadHandlerXhr.isSupported()){           
-            handlerClass = 'UploadHandlerXhr';                        
+            handlerClass;
+
+        if(qq.UploadHandlerXhr.isSupported()){
+            handlerClass = 'UploadHandlerXhr';
         } else {
             handlerClass = 'UploadHandlerForm';
         }
 
         var handler = new qq[handlerClass]({
             debug: this._options.debug,
-            action: this._options.action,         
-            maxConnections: this._options.maxConnections,   
-            onProgress: function(id, fileName, loaded, total){                
+            action: this._options.action,
+            maxConnections: this._options.maxConnections,
+            onProgress: function(id, fileName, loaded, total){
                 self._onProgress(id, fileName, loaded, total);
-                self._options.onProgress(id, fileName, loaded, total);                    
-            },            
+                self._options.onProgress.call(self, id, fileName, loaded, total);
+            },
             onComplete: function(id, fileName, result){
                 self._onComplete(id, fileName, result);
-                self._options.onComplete(id, fileName, result);
+                self._options.onComplete.call(self, id, fileName, result);
             },
             onCancel: function(id, fileName){
                 self._onCancel(id, fileName);
-                self._options.onCancel(id, fileName);
+                self._options.onCancel.call(self, id, fileName);
             }
         });
 
         return handler;
-    },    
+    },
     _preventLeaveInProgress: function(){
         var self = this;
-        
+
         qq.attach(window, 'beforeunload', function(e){
             if (!self._filesInProgress){return;}
-            
+
             var e = e || window.event;
             // for ie, ff
             e.returnValue = self._options.messages.onLeave;
             // for webkit
-            return self._options.messages.onLeave;             
-        });        
-    },    
+            return self._options.messages.onLeave;
+        });
+    },
     _onSubmit: function(id, fileName){
-        this._filesInProgress++;  
+        this._filesInProgress++;
     },
-    _onProgress: function(id, fileName, loaded, total){        
+    _onProgress: function(id, fileName, loaded, total){
     },
     _onComplete: function(id, fileName, result){
-        this._filesInProgress--;                 
+        this._filesInProgress--;
         if (result.error){
             this._options.showMessage(result.error);
-        }             
+        }
     },
     _onCancel: function(id, fileName){
-        this._filesInProgress--;        
+        this._filesInProgress--;
     },
     _onInputChange: function(input){
-        if (this._handler instanceof qq.UploadHandlerXhr){                
-            this._uploadFileList(input.files);                   
-        } else {             
-            if (this._validateFile(input)){                
-                this._uploadFile(input);                                    
-            }                      
-        }               
-        this._button.reset();   
-    },  
+        if (this._handler instanceof qq.UploadHandlerXhr){
+            this._uploadFileList(input.files);
+        } else {
+            if (this._validateFile(input)){
+                this._uploadFile(input);
+            }
+        }
+        this._button.reset();
+    },
     _uploadFileList: function(files){
         for (var i=0; i<files.length; i++){
             if ( !this._validateFile(files[i])){
                 return;
-            }            
+            }
         }
-        
+
         for (var i=0; i<files.length; i++){
-            this._uploadFile(files[i]);        
-        }        
-    },       
-    _uploadFile: function(fileContainer){      
+            this._uploadFile(files[i]);
+        }
+    },
+    _uploadFile: function(fileContainer){
         var id = this._handler.add(fileContainer);
         var fileName = this._handler.getName(id);
-        
+
         if (this._options.onSubmit(id, fileName) !== false){
             this._onSubmit(id, fileName);
             this._handler.upload(id, this._options.params);
         }
-    },      
+    },
     _validateFile: function(file){
         var name, size;
-        
+
         if (file.value){
-            // it is a file input            
+            // it is a file input
             // get input value and remove path to normalize
             name = file.value.replace(/.*(\/|\\)/, "");
+            if(file.files)
+            {
+                size = file.files[0].fileSize;
+            }
         } else {
             // fix missing properties in Safari
             name = file.fileName != null ? file.fileName : file.name;
             size = file.fileSize != null ? file.fileSize : file.size;
         }
-                    
-        if (! this._isAllowedExtension(name)){            
+
+        if (! this._isAllowedExtension(name)){
             this._error('typeError', name);
             return false;
-            
-        } else if (size === 0){            
+
+        } else if (size === 0){
             this._error('emptyError', name);
             return false;
-                                                     
-        } else if (size && this._options.sizeLimit && size > this._options.sizeLimit){            
+
+        } else if (size && this._options.sizeLimit && size > this._options.sizeLimit){
             this._error('sizeError', name);
             return false;
-                        
+
         } else if (size && size < this._options.minSizeLimit){
             this._error('minSizeError', name);
-            return false;            
+            return false;
         }
-        
-        return true;                
+
+        return true;
     },
     _error: function(code, fileName){
-        var message = this._options.messages[code];        
+        var message = this._options.messages[code];
         function r(name, replacement){ message = message.replace(name, replacement); }
-        
-        r('{file}', this._formatFileName(fileName));        
+
+        r('{file}', this._formatFileName(fileName));
         r('{extensions}', this._options.allowedExtensions.join(', '));
         r('{sizeLimit}', this._formatSize(this._options.sizeLimit));
         r('{minSizeLimit}', this._formatSize(this._options.minSizeLimit));
-        
-        this._options.showMessage(message);                
+
+        this._options.showMessage(message);
     },
     _formatFileName: function(name){
         if (name.length > 33){
-            name = name.slice(0, 19) + '...' + name.slice(-13);    
+            name = name.slice(0, 19) + '...' + name.slice(-13);
         }
         return name;
     },
     _isAllowedExtension: function(fileName){
         var ext = (-1 !== fileName.indexOf('.')) ? fileName.replace(/.*[.]/, '').toLowerCase() : '';
         var allowed = this._options.allowedExtensions;
-        
-        if (!allowed.length){return true;}        
-        
+
+        if (!allowed.length){return true;}
+
         for (var i=0; i<allowed.length; i++){
-            if (allowed[i].toLowerCase() == ext){ return true;}    
+            if (allowed[i].toLowerCase() == ext){ return true;}
         }
-        
+
         return false;
-    },    
+    },
     _formatSize: function(bytes){
-        var i = -1;                                    
-        do {
-            bytes = bytes / 1024;
-            i++;  
-        } while (bytes > 99);
-        
-        return Math.max(bytes, 0.1).toFixed(1) + ['kB', 'MB', 'GB', 'TB', 'PB', 'EB'][i];          
+        var i = 0;
+        var suffixes;
+
+        if(this._options.useBase2Prefixes)
+        {
+            while (bytes > 1024) {
+                bytes = bytes / 1024;
+                i++;
+            }
+            suffixes = ['B', 'kiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'YiB'];
+        }
+        else
+        {
+            while (bytes > 1000) {
+                bytes = bytes / 1000;
+                i++;
+            }
+            suffixes = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'YB'];
+        }
+
+        return Math.max(bytes, 0.1).toFixed(1) + suffixes[i];
     }
 };
-    
-       
+
+
 /**
  * Class that creates upload widget with drag-and-drop and file list
  * @inherits qq.FileUploaderBasic
@@ -477,17 +509,17 @@ qq.FileUploaderBasic.prototype = {
 qq.FileUploader = function(o){
     // call parent constructor
     qq.FileUploaderBasic.apply(this, arguments);
-    
-    // additional options    
+
+    // additional options
     qq.extend(this._options, {
         element: null,
         // if set, will be used instead of qq-upload-list in template
         listElement: null,
-                
-        template: '<div class="qq-uploader">' + 
+
+        template: '<div class="qq-uploader">' +
                 '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                 '<div class="qq-upload-button">Upload a file</div>' +
-                '<ul class="qq-upload-list"></ul>' + 
+                '<ul class="qq-upload-list"></ul>' +
              '</div>',
 
         // template for one item in file list
@@ -497,15 +529,15 @@ qq.FileUploader = function(o){
                 '<span class="qq-upload-size"></span>' +
                 '<a class="qq-upload-cancel" href="#">Cancel</a>' +
                 '<span class="qq-upload-failed-text">Failed</span>' +
-            '</li>',        
-        
+            '</li>',
+
         classes: {
             // used to get elements from templates
             button: 'qq-upload-button',
             drop: 'qq-upload-drop-area',
             dropActive: 'qq-upload-drop-area-active',
             list: 'qq-upload-list',
-                        
+
             file: 'qq-upload-file',
             spinner: 'qq-upload-spinner',
             size: 'qq-upload-size',
@@ -517,17 +549,17 @@ qq.FileUploader = function(o){
             fail: 'qq-upload-fail'
         }
     });
-    // overwrite options with user supplied    
-    qq.extend(this._options, o);       
+    // overwrite options with user supplied
+    qq.extend(this._options, o);
 
     this._element = this._options.element;
-    this._element.innerHTML = this._options.template;        
+    this._element.innerHTML = this._options.template;
     this._listElement = this._options.listElement || this._find(this._element, 'list');
-    
+
     this._classes = this._options.classes;
-        
-    this._button = this._createUploadButton(this._find(this._element, 'button'));        
-    
+
+    this._button = this._createUploadButton(this._find(this._element, 'button'));
+
     this._bindCancelEvent();
     this._setupDragDrop();
 };
@@ -539,17 +571,17 @@ qq.extend(qq.FileUploader.prototype, {
     /**
      * Gets one of the elements listed in this._options.classes
      **/
-    _find: function(parent, type){                                
-        var element = qq.getByClass(parent, this._options.classes[type])[0];        
+    _find: function(parent, type){
+        var element = qq.getByClass(parent, this._options.classes[type])[0];
         if (!element){
             throw new Error('element not found ' + type);
         }
-        
+
         return element;
     },
     _setupDragDrop: function(){
         var self = this,
-            dropArea = this._find(this._element, 'drop');                        
+            dropArea = this._find(this._element, 'drop');
 
         var dz = new qq.UploadDropZone({
             element: dropArea,
@@ -561,35 +593,35 @@ qq.extend(qq.FileUploader.prototype, {
                 e.stopPropagation();
             },
             onLeaveNotDescendants: function(e){
-                qq.removeClass(dropArea, self._classes.dropActive);  
+                qq.removeClass(dropArea, self._classes.dropActive);
             },
             onDrop: function(e){
                 dropArea.style.display = 'none';
                 qq.removeClass(dropArea, self._classes.dropActive);
-                self._uploadFileList(e.dataTransfer.files);    
+                self._uploadFileList(e.dataTransfer.files);
             }
         });
-                
+
         dropArea.style.display = 'none';
 
-        qq.attach(document, 'dragenter', function(e){     
-            if (!dz._isValidFileDrag(e)) return; 
-            
-            dropArea.style.display = 'block';            
-        });                 
+        qq.attach(document, 'dragenter', function(e){
+            if (!dz._isValidFileDrag(e)) return;
+
+            dropArea.style.display = 'block';
+        });
         qq.attach(document, 'dragleave', function(e){
-            if (!dz._isValidFileDrag(e)) return;            
-            
+            if (!dz._isValidFileDrag(e)) return;
+
             var relatedTarget = document.elementFromPoint(e.clientX, e.clientY);
             // only fire when leaving document out
-            if ( ! relatedTarget || relatedTarget.nodeName == "HTML"){               
-                dropArea.style.display = 'none';                                            
+            if ( ! relatedTarget || relatedTarget.nodeName == "HTML"){
+                dropArea.style.display = 'none';
             }
-        });                
+        });
     },
     _onSubmit: function(id, fileName){
         qq.FileUploaderBasic.prototype._onSubmit.apply(this, arguments);
-        this._addToList(id, fileName);  
+        this._addToList(id, fileName);
     },
     _onProgress: function(id, fileName, loaded, total){
         qq.FileUploaderBasic.prototype._onProgress.apply(this, arguments);
@@ -597,87 +629,106 @@ qq.extend(qq.FileUploader.prototype, {
         var item = this._getItemByFileId(id);
         var size = this._find(item, 'size');
         size.style.display = 'inline';
-        
-        var text; 
+
+        var text;
         if (loaded != total){
-            text = Math.round(loaded / total * 100) + '% from ' + this._formatSize(total);
-        } else {                                   
+            text = Math.round(loaded / total * 100) + '% of ' + this._formatSize(total);
+        } else {
             text = this._formatSize(total);
-        }          
-        
-        qq.setText(size, text);         
+            this._totalSizeText = text;
+        }
+
+        if(this._totalSizeText)
+        {
+            qq.setText(size, this._totalSizeText);
+        }
+        else if(text)
+        {
+            qq.setText(size, text);
+        }
+		else
+        {
+            qq.setText(size, "calculating...");
+        }
     },
     _onComplete: function(id, fileName, result){
         qq.FileUploaderBasic.prototype._onComplete.apply(this, arguments);
 
         // mark completed
-        var item = this._getItemByFileId(id);                
+        var item = this._getItemByFileId(id);
         qq.remove(this._find(item, 'cancel'));
         qq.remove(this._find(item, 'spinner'));
-        
+
         if (result.success){
-            qq.addClass(item, this._classes.success);    
+            qq.addClass(item, this._classes.success);
+            if(this._totalSizeText)
+            {
+                var item = this._getItemByFileId(id);
+                var size = this._find(item, 'size');
+                qq.setText(size, this._totalSizeText);
+                this._totalSizeText = '';
+            }
         } else {
             qq.addClass(item, this._classes.fail);
-        }         
+        }
     },
     _addToList: function(id, fileName){
-        var item = qq.toElement(this._options.fileTemplate);                
+        var item = qq.toElement(this._options.fileTemplate);
         item.qqFileId = id;
 
-        var fileElement = this._find(item, 'file');        
+        var fileElement = this._find(item, 'file');
         qq.setText(fileElement, this._formatFileName(fileName));
-        this._find(item, 'size').style.display = 'none';        
+        this._find(item, 'size').style.display = 'none';
 
         this._listElement.appendChild(item);
     },
     _getItemByFileId: function(id){
-        var item = this._listElement.firstChild;        
-        
+        var item = this._listElement.firstChild;
+
         // there can't be txt nodes in dynamically created list
         // and we can  use nextSibling
-        while (item){            
-            if (item.qqFileId == id) return item;            
+        while (item){
+            if (item.qqFileId == id) return item;
             item = item.nextSibling;
-        }          
+        }
     },
     /**
-     * delegate click event for cancel link 
+     * delegate click event for cancel link
      **/
     _bindCancelEvent: function(){
         var self = this,
-            list = this._listElement;            
-        
-        qq.attach(list, 'click', function(e){            
+            list = this._listElement;
+
+        qq.attach(list, 'click', function(e){
             e = e || window.event;
             var target = e.target || e.srcElement;
-            
-            if (qq.hasClass(target, self._classes.cancel)){                
+
+            if (qq.hasClass(target, self._classes.cancel)){
                 qq.preventDefault(e);
-               
+
                 var item = target.parentNode;
                 self._handler.cancel(item.qqFileId);
                 qq.remove(item);
             }
         });
-    }    
+    }
 });
-    
+
 qq.UploadDropZone = function(o){
     this._options = {
-        element: null,  
+        element: null,
         onEnter: function(e){},
-        onLeave: function(e){},  
-        // is not fired when leaving element by hovering descendants   
-        onLeaveNotDescendants: function(e){},   
-        onDrop: function(e){}                       
+        onLeave: function(e){},
+        // is not fired when leaving element by hovering descendants
+        onLeaveNotDescendants: function(e){},
+        onDrop: function(e){}
     };
-    qq.extend(this._options, o); 
-    
+    qq.extend(this._options, o);
+
     this._element = this._options.element;
-    
+
     this._disableDropOutside();
-    this._attachEvents();   
+    this._attachEvents();
 };
 
 qq.UploadDropZone.prototype = {
@@ -688,84 +739,84 @@ qq.UploadDropZone.prototype = {
             qq.attach(document, 'dragover', function(e){
                 if (e.dataTransfer){
                     e.dataTransfer.dropEffect = 'none';
-                    e.preventDefault(); 
-                }           
+                    e.preventDefault();
+                }
             });
-            
-            qq.UploadDropZone.dropOutsideDisabled = true; 
-        }        
+
+            qq.UploadDropZone.dropOutsideDisabled = true;
+        }
     },
     _attachEvents: function(){
-        var self = this;              
-                  
+        var self = this;
+
         qq.attach(self._element, 'dragover', function(e){
             if (!self._isValidFileDrag(e)) return;
-            
+
             var effect = e.dataTransfer.effectAllowed;
             if (effect == 'move' || effect == 'linkMove'){
-                e.dataTransfer.dropEffect = 'move'; // for FF (only move allowed)    
-            } else {                    
+                e.dataTransfer.dropEffect = 'move'; // for FF (only move allowed)
+            } else {
                 e.dataTransfer.dropEffect = 'copy'; // for Chrome
             }
-                                                     
+
             e.stopPropagation();
-            e.preventDefault();                                                                    
+            e.preventDefault();
         });
-        
+
         qq.attach(self._element, 'dragenter', function(e){
             if (!self._isValidFileDrag(e)) return;
-                        
+
             self._options.onEnter(e);
         });
-        
+
         qq.attach(self._element, 'dragleave', function(e){
             if (!self._isValidFileDrag(e)) return;
-            
+
             self._options.onLeave(e);
-            
-            var relatedTarget = document.elementFromPoint(e.clientX, e.clientY);                      
+
+            var relatedTarget = document.elementFromPoint(e.clientX, e.clientY);
             // do not fire when moving a mouse over a descendant
             if (qq.contains(this, relatedTarget)) return;
-                        
-            self._options.onLeaveNotDescendants(e); 
+
+            self._options.onLeaveNotDescendants(e);
         });
-                
+
         qq.attach(self._element, 'drop', function(e){
             if (!self._isValidFileDrag(e)) return;
-            
+
             e.preventDefault();
             self._options.onDrop(e);
-        });          
+        });
     },
     _isValidFileDrag: function(e){
         var dt = e.dataTransfer,
-            // do not check dt.types.contains in webkit, because it crashes safari 4            
-            isWebkit = navigator.userAgent.indexOf("AppleWebKit") > -1;                        
+            // do not check dt.types.contains in webkit, because it crashes safari 4
+            isWebkit = navigator.userAgent.indexOf("AppleWebKit") > -1;
 
         // dt.effectAllowed is none in Safari 5
-        // dt.types.contains check is for firefox            
-        return dt && dt.effectAllowed != 'none' && 
+        // dt.types.contains check is for firefox
+        return dt && dt.effectAllowed != 'none' &&
             (dt.files || (!isWebkit && dt.types.contains && dt.types.contains('Files')));
-        
-    }        
-}; 
+
+    }
+};
 
 qq.UploadButton = function(o){
     this._options = {
-        element: null,  
-        // if set to true adds multiple attribute to file input      
+        element: null,
+        // if set to true adds multiple attribute to file input
         multiple: false,
         // name attribute of file input
         name: 'file',
         onChange: function(input){},
         hoverClass: 'qq-upload-button-hover',
-        focusClass: 'qq-upload-button-focus'                       
+        focusClass: 'qq-upload-button-focus'
     };
-    
+
     qq.extend(this._options, o);
-        
+
     this._element = this._options.element;
-    
+
     // make button suitable container for input
     qq.css(this._element, {
         position: 'relative',
@@ -773,35 +824,35 @@ qq.UploadButton = function(o){
         // 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 */    
+    /* returns file input element */
     getInput: function(){
         return this._input;
     },
     /* cleans/recreates the file input */
     reset: function(){
         if (this._input.parentNode){
-            qq.remove(this._input);    
-        }                
-        
+            qq.remove(this._input);
+        }
+
         qq.removeClass(this._element, this._options.focusClass);
         this._input = this._createInput();
-    },    
-    _createInput: function(){                
+    },
+    _createInput: function(){
         var input = document.createElement("input");
-        
+
         if (this._options.multiple){
             input.setAttribute("multiple", "multiple");
         }
-                
+
         input.setAttribute("type", "file");
         input.setAttribute("name", this._options.name);
-        
+
         qq.css(input, {
             position: 'absolute',
             // in Opera only 'browse' button
@@ -817,14 +868,14 @@ qq.UploadButton.prototype = {
             cursor: 'pointer',
             opacity: 0
         });
-        
+
         this._element.appendChild(input);
 
         var self = this;
         qq.attach(input, 'change', function(){
             self._options.onChange(input);
         });
-                
+
         qq.attach(input, 'mouseover', function(){
             qq.addClass(self._element, self._options.hoverClass);
         });
@@ -845,8 +896,8 @@ qq.UploadButton.prototype = {
             input.setAttribute('tabIndex', "-1");
         }
 
-        return input;            
-    }        
+        return input;
+    }
 };
 
 /**
@@ -856,26 +907,26 @@ qq.UploadHandlerAbstract = function(o){
     this._options = {
         debug: false,
         action: '/upload.php',
-        // maximum number of concurrent uploads        
+        // maximum number of concurrent uploads
         maxConnections: 999,
         onProgress: function(id, fileName, loaded, total){},
         onComplete: function(id, fileName, response){},
         onCancel: function(id, fileName){}
     };
-    qq.extend(this._options, o);    
-    
+    qq.extend(this._options, o);
+
     this._queue = [];
     // params for files in queue
     this._params = [];
 };
 qq.UploadHandlerAbstract.prototype = {
     log: function(str){
-        if (this._options.debug && window.console) console.log('[uploader] ' + str);        
+        if (this._options.debug && window.console) console.log('[uploader] ' + str);
     },
     /**
      * 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
@@ -883,12 +934,12 @@ qq.UploadHandlerAbstract.prototype = {
     upload: function(id, params){
         var len = this._queue.push(id);
 
-        var copy = {};        
+        var copy = {};
         qq.extend(copy, params);
-        this._params[id] = copy;        
-                
+        this._params[id] = copy;
+
         // if too many active uploads, wait...
-        if (len <= this._options.maxConnections){               
+        if (len <= this._options.maxConnections){
             this._upload(id, this._params[id]);
         }
     },
@@ -914,7 +965,7 @@ qq.UploadHandlerAbstract.prototype = {
     getName: function(id){},
     /**
      * Returns size of the file identified by id
-     */          
+     */
     getSize: function(id){},
     /**
      * Returns id of files being uploaded or
@@ -930,21 +981,21 @@ qq.UploadHandlerAbstract.prototype = {
     /**
      * Actual cancel method
      */
-    _cancel: function(id){},     
+    _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]);
         }
-    }        
+    }
 };
 
 /**
@@ -953,7 +1004,7 @@ qq.UploadHandlerAbstract.prototype = {
  */
 qq.UploadHandlerForm = function(o){
     qq.UploadHandlerAbstract.apply(this, arguments);
-       
+
     this._inputs = {};
 };
 // @inherits qq.UploadHandlerAbstract
@@ -962,25 +1013,25 @@ qq.extend(qq.UploadHandlerForm.prototype, qq.UploadHandlerAbstract.prototype);
 qq.extend(qq.UploadHandlerForm.prototype, {
     add: function(fileInput){
         fileInput.setAttribute('name', 'qqfile');
-        var id = 'qq-upload-handler-iframe' + qq.getUniqueId();       
-        
+        var id = 'qq-upload-handler-iframe' + qq.getUniqueId();
+
         this._inputs[id] = fileInput;
-        
+
         // remove file input from DOM
         if (fileInput.parentNode){
             qq.remove(fileInput);
         }
-                
+
         return id;
     },
     getName: function(id){
         // get input value and remove path to normalize
         return this._inputs[id].value.replace(/.*(\/|\\)/, "");
-    },    
+    },
     _cancel: function(id){
         this._options.onCancel(id, this.getName(id));
-        
-        delete this._inputs[id];        
+
+        delete this._inputs[id];
 
         var iframe = document.getElementById(id);
         if (iframe){
@@ -991,29 +1042,29 @@ qq.extend(qq.UploadHandlerForm.prototype, {
 
             qq.remove(iframe);
         }
-    },     
-    _upload: function(id, params){                        
+    },
+    _upload: function(id, params){
         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);
-                
+
         var iframe = this._createIframe(id);
         var form = this._createForm(iframe, params);
         form.appendChild(input);
 
         var self = this;
-        this._attachLoadEvent(iframe, function(){                                 
+        this._attachLoadEvent(iframe, function(){
             self.log('iframe loaded');
-            
+
             var response = self._getIframeContentJSON(iframe);
 
             self._options.onComplete(id, fileName, response);
             self._dequeue(id);
-            
+
             delete self._inputs[id];
             // timeout added to fix busy state in FF3.6
             setTimeout(function(){
@@ -1021,11 +1072,11 @@ qq.extend(qq.UploadHandlerForm.prototype, {
             }, 1);
         });
 
-        form.submit();        
-        qq.remove(form);        
-        
+        form.submit();
+        qq.remove(form);
+
         return id;
-    }, 
+    },
     _attachLoadEvent: function(iframe, callback){
         qq.attach(iframe, 'load', function(){
             // when we remove iframe from dom
@@ -1056,15 +1107,15 @@ qq.extend(qq.UploadHandlerForm.prototype, {
         // iframe.contentWindow.document - for IE<7
         var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document,
             response;
-        
+
         this.log("converting iframe's innerHTML to JSON");
-        this.log("innerHTML = " + doc.body.innerHTML);
-                        
+        this.log("innerHTML = " + doc.body.firstChild.innerHTML);
+
         try {
-            response = eval("(" + doc.body.innerHTML + ")");
+            response = eval("(" + doc.body.firstChild.innerHTML + ")");
         } catch(err){
             response = {};
-        }        
+        }
 
         return response;
     },
@@ -1119,66 +1170,66 @@ qq.UploadHandlerXhr = function(o){
 
     this._files = [];
     this._xhrs = [];
-    
-    // current loaded size in bytes for each file 
+
+    // current loaded size in bytes for each file
     this._loaded = [];
 };
 
 // static method
 qq.UploadHandlerXhr.isSupported = function(){
     var input = document.createElement('input');
-    input.type = 'file';        
-    
+    input.type = 'file';
+
     return (
         'multiple' in input &&
         typeof File != "undefined" &&
-        typeof (new XMLHttpRequest()).upload != "undefined" );       
+        typeof (new XMLHttpRequest()).upload != "undefined" );
 };
 
 // @inherits qq.UploadHandlerAbstract
-qq.extend(qq.UploadHandlerXhr.prototype, qq.UploadHandlerAbstract.prototype)
+qq.extend(qq.UploadHandlerXhr.prototype, qq.UploadHandlerAbstract.prototype);
 
 qq.extend(qq.UploadHandlerXhr.prototype, {
     /**
      * Adds file to the queue
      * Returns id to use with upload, cancel
-     **/    
+     **/
     add: function(file){
         if (!(file instanceof File)){
             throw new Error('Passed obj in not a File (in qq.UploadHandlerXhr)');
         }
-                
-        return this._files.push(file) - 1;        
+
+        return this._files.push(file) - 1;
     },
-    getName: function(id){        
+    getName: function(id){
         var file = this._files[id];
         // fix missing name in Safari 4
-        return file.fileName != null ? file.fileName : file.name;       
+        return file.fileName != null ? file.fileName : file.name;
     },
     getSize: function(id){
         var file = this._files[id];
         return file.fileSize != null ? file.fileSize : file.size;
-    },    
+    },
     /**
-     * Returns uploaded bytes for file identified by id 
-     */    
+     * Returns uploaded bytes for file identified by id
+     */
     getLoaded: function(id){
-        return this._loaded[id] || 0; 
+        return this._loaded[id] || 0;
     },
     /**
      * Sends the file identified by id and additional query params to the server
      * @param {Object} params name-value string pairs
-     */    
+     */
     _upload: function(id, params){
         var file = this._files[id],
             name = this.getName(id),
             size = this.getSize(id);
-                
+
         this._loaded[id] = 0;
-                                
+
         var xhr = this._xhrs[id] = new XMLHttpRequest();
         var self = this;
-                                        
+
         xhr.upload.onprogress = function(e){
             if (e.lengthComputable){
                 self._loaded[id] = e.loaded;
@@ -1186,9 +1237,9 @@ qq.extend(qq.UploadHandlerXhr.prototype, {
             }
         };
 
-        xhr.onreadystatechange = function(){            
+        xhr.onreadystatechange = function(){
             if (xhr.readyState == 4){
-                self._onComplete(id, xhr);                    
+                self._onComplete(id, xhr);
             }
         };
 
@@ -1198,6 +1249,7 @@ qq.extend(qq.UploadHandlerXhr.prototype, {
         var queryString = qq.obj2url(params, this._options.action);
 
         xhr.open("POST", queryString, true);
+        xhr.setRequestHeader("Accept", "text/javascript");
         xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
         xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
         xhr.setRequestHeader("Content-Type", "application/octet-stream");
@@ -1206,42 +1258,42 @@ qq.extend(qq.UploadHandlerXhr.prototype, {
     _onComplete: function(id, xhr){
         // the request was aborted/cancelled
         if (!this._files[id]) return;
-        
+
         var name = this.getName(id);
         var size = this.getSize(id);
-        
+
         this._options.onProgress(id, name, size, size);
-                
+
         if (xhr.status == 200){
             this.log("xhr - server response received");
             this.log("responseText = " + xhr.responseText);
-                        
+
             var response;
-                    
+
             try {
                 response = eval("(" + xhr.responseText + ")");
             } catch(err){
                 response = {};
             }
-            
+
             this._options.onComplete(id, name, response);
-                        
-        } else {                   
+
+        } else {
             this._options.onComplete(id, name, {});
         }
-                
+
         this._files[id] = null;
-        this._xhrs[id] = null;    
-        this._dequeue(id);                    
+        this._xhrs[id] = null;
+        this._dequeue(id);
     },
     _cancel: function(id){
         this._options.onCancel(id, this.getName(id));
-        
+
         this._files[id] = null;
-        
+
         if (this._xhrs[id]){
             this._xhrs[id].abort();
-            this._xhrs[id] = null;                                   
+            this._xhrs[id] = null;
         }
     }
 });