/org.hxzon.tapestry5/org/hxzon/tapestry5/components/ajaxupload.js

Large files files are truncated, but you can click here to view the full file

/**

 * http://github.com/valums/file-uploader

 * 

 * Multiple file upload component with progress-bar, drag-and-drop. Š 2010

 * Andrew Valums ( andrew(at)valums.com )

 * 

 * Licensed under GNU GPL 2 or later and GNU LGPL 2 or later, see license.txt.

 */



//

// Helper functions

//

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.

 * 

 * @param {Number}

 *           [from] The index at which to begin the search

 */

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;



   for (; from < len; from++)

   {

      if (from in arr && arr[from] === elt)

      {

         return from;

      }

   }

   return -1;

};



qq.getUniqueId = (function()

{

   var id = 0;

   return function()

   {

      return id++;

   };

})();



//

// Events



qq.attach = function(element, type, fn)

{

   if (element.addEventListener)

   {

      element.addEventListener(type, fn, false);

   }

   else if (element.attachEvent)

   {

      element.attachEvent('on' + type, fn);

   }

};

qq.detach = function(element, type, fn)

{

   if (element.removeEventListener)

   {

      element.removeEventListener(type, fn, false);

   }

   else if (element.attachEvent)

   {

      element.detachEvent('on' + type, fn);

   }

};



qq.preventDefault = function(e)

{

   if (e.preventDefault)

   {

      e.preventDefault();

   }

   else

   {

      e.returnValue = false;

   }

};



//

// Node manipulations



/**

 * Insert node a before node b.

 */

qq.insertBefore = function(a, b)

{

   b.parentNode.insertBefore(a, b);

};

qq.remove = function(element)

{

   element.parentNode.removeChild(element);

};



qq.contains = function(parent, descendant)

{

   // compareposition returns false in this case

   if (parent == descendant)

      return true;



   if (parent.contains)

   {

      return parent.contains(descendant);

   }

   else

   {

      return !!(descendant.compareDocumentPosition(parent) & 8);

   }

};



/**

 * Creates and returns element from html string Uses innerHTML to create an

 * element

 */

qq.toElement = (function()

{

   var div = document.createElement('div');

   return function(html)

   {

      div.innerHTML = html;

      var element = div.firstChild;

      div.removeChild(element);

      return element;

   };

})();



//

// Node properties and attributes



/**

 * Sets styles for an element. Fixes opacity in IE6-8.

 */

qq.css =

      function(element, styles)

      {

         if (styles.opacity != null)

         {

            if (typeof element.style.opacity != 'string'

                  && typeof (element.filters) != 'undefined')

            {

               styles.filter =

                     'alpha(opacity=' + Math.round(100 * styles.opacity) + ')';

            }

         }

         qq.extend(element.style, styles);

      };

qq.hasClass = function(element, name)

{

   var re = new RegExp('(^| )' + name + '( |$)');

   return re.test(element.className);

};

qq.addClass = function(element, name)

{

   if (!qq.hasClass(element, name))

   {

      element.className += ' ' + name;

   }

};

qq.removeClass =

      function(element, name)

      {

         var re = new RegExp('(^| )' + name + '( |$)');

         element.className =

               element.className.replace(re, ' ').replace(/^\s+|\s+$/g, "");

      };

qq.setText = function(element, text)

{

   element.innerText = text;

   element.textContent = text;

};



//

// Selecting elements



qq.children = function(element)

{

   var children = [], child = element.firstChild;



   while (child)

   {

      if (child.nodeType == 1)

      {

         children.push(child);

      }

      child = child.nextSibling;

   }



   return children;

};



qq.getByClass = function(element, className)

{

   if (element.querySelectorAll)

   {

      return element.querySelectorAll('.' + className);

   }



   var result = [];

   var candidates = element.getElementsByTagName("*");

   var len = candidates.length;



   for ( var i = 0; i < len; i++)

   {

      if (qq.hasClass(candidates[i], className))

      {

         result.push(candidates[i]);

      }

   }

   return result;

};



/**

 * 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');`

 * 

 * will result in:

 * 

 * `http://any.url/upload?otherParam=value&a=b&c=d`

 * 

 * @param Object

 *           JSON-Object

 * @param String

 *           current querystring-part

 * @return String encoded querystring

 */

qq.obj2url =

      function(obj, temp, prefixDone)

      {

         var uristrings = [], prefix = '&', add =

               function(nextObj, i)

               {

                  var nextTemp = temp ? (/\[\]$/.test(temp)) // prevent

                  // double-encoding

                  ? temp : temp + '[' + i + ']' : i;

                  if ((nextTemp != 'undefined') && (i != 'undefined'))

                  {

                     uristrings

                           .push((typeof nextObj === 'object')

                                 ? qq.obj2url(nextObj, nextTemp, true)

                                    : (Object.prototype.toString.call(nextObj) === '[object Function]')

                                          ? encodeURIComponent(nextTemp)

                                                + '='

                                                   + encodeURIComponent(nextObj())

                                             : encodeURIComponent(nextTemp)

                                                   + '='

                                                      + encodeURIComponent(nextObj));

                  }

               };



         if (!prefixDone && temp)

         {

            prefix = (/\?/.test(temp)) ? (/\?$/.test(temp)) ? '' : '&' : '?';

            uristrings.push(temp);

            uristrings.push(qq.obj2url(obj));

         }

         else if ((Object.prototype.toString.call(obj) === '[object Array]')

               && (typeof obj != 'undefined'))

         {

            // we wont use a for-in-loop on an array (performance)

            for ( var i = 0, len = obj.length; i < len; ++i)

            {

               add(obj[i], i);

            }

         }

         else if ((typeof obj != 'undefined')

               && (obj !== null)

                  && (typeof obj === "object"))

         {

            // for anything else but a scalar, we will use for-in-loop

            for ( var i in obj)

            {

               add(obj[i], i);

            }

         }

         else

         {

            uristrings.push(encodeURIComponent(temp)

                  + '='

                     + encodeURIComponent(obj));

         }



         return uristrings.join(prefix).replace(/^&/, '').replace(/%20/g, '+');

      };



//

//

// Uploader Classes

//

//



var qq = qq || {};



/**

 * Creates upload button, validates upload, but doesn't create file list or dd.

 */

qq.FileUploaderBasic =

      function(o)

      {

         this._options =

               {

                  // set to true to see the server response

                  debug : false,

                     action : '/server/upload',

                     params : {},

                     button : null,

                     multiple : true,

                     uploadText:"Upload",

                     maxConnections : 3,

                     // validation

                     allowedExtensions : [],

                     sizeLimit : 0,

                     maxFiles: 999,

                     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)

                     {

                        Tapestry.ajaxRequest(this.cancelLink + '/' + fileName, {method:'get'});

                     },

                     onRemove : function(serverIndex)

                     {

                        var url;

                        if(this.removeLink.indexOf("?") == -1)

                        {

                           url = this.removeLink + "?serverIndex=" + serverIndex;

                        }

                        else 

                        {

                           url = this.removeLink + "&serverIndex=" + serverIndex;   

                        }

                        

                        Tapestry.ajaxRequest(url, {method:'get'});

                     },



                     // 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.",

                           maxFilesError:"Cannot upload file. Only {maxFiles} files can be uploaded"

                     },

                     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._button = this._createUploadButton(this._options.button);

         }



         this._preventLeaveInProgress();

      };



qq.FileUploaderBasic.prototype =

      {

         setParams : function(params)

         {

            this._options.params = params;

         },

            getInProgress : function()

            {

               return this._filesInProgress;

            },



            _createUploadButton : function(element)

            {

               var self = this;



               return new qq.UploadButton({

                  element : element,

                     multiple : this._options.multiple

                           && qq.UploadHandlerXhr.isSupported(),

                     name:this._options.name,

                     id:this._options.id,

                     onChange : function(input)

                     {

                        self._onInputChange(input);

                     }

               });

            },

            _createUploadHandler : function()

            {

               var self = this, 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)

                  {

                     self._onProgress(id, fileName, loaded, total);

                     self._options.onProgress(id, fileName, loaded, total);

                  },

                  onComplete : function(id, fileName, result)

                  {

                     self._onComplete(id, fileName, result);

                     self._options.onComplete(id, fileName, result);

                  },

                  onCancel : function(id, fileName)

                  {

                     self._onCancel(id, fileName);

                     self._options.onCancel(id, fileName);

                  },

                  onRemove : function(serverIndex)

                  {

                     self._options.onRemove(serverIndex);

                  }

               });



               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;

               });

            },

            _onSubmit : function(id, fileName)

            {

               this._filesInProgress++;

            },

            _onProgress : function(id, fileName, loaded, total)

            {

            },

            _onComplete : function(id, fileName, result)

            {

               this._filesInProgress--;

               if (result.error)

               {

                  this._options.showMessage(result.error);

               }

            },

            _onCancel : function(id, fileName)

            {

               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();

            },

            _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)

            {

               var id = this._handler.add(fileContainer);

               var fileName = this._handler.getName(id);

               if(this._listElement.children.length == this._options.maxFiles)

               {

                  this._error('maxFilesError', fileName);

                  return;

               }

               

               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

                  // get input value and remove path to normalize

                  name = file.value.replace(/.*(\/|\\)/, "");

               }

               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))

               {

                  this._error('typeError', name);

                  return false;



               }

               else if (size === 0)

               {

                  this._error('emptyError', name);

                  return false;



               }

               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 true;

            },

            _error : function(code, fileName)

            {

               var message = this._options.messages[code];

               function r(name, replacement)

               {

                  message = message.replace(name, replacement);

               }



               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));

               r('{maxFiles}', this._options.maxFiles);



               this._options.showMessage(message);

            },

            _formatFileName : function(name)

            {

               if (name.length > 33)

               {

                  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;

               }



               for ( var i = 0; i < allowed.length; i++)

               {

                  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];

            }

      };



/**

 * Class that creates upload widget with drag-and-drop and file list

 * 

 * @inherits qq.FileUploaderBasic

 */

qq.FileUploader =

      function(o)

      {

         // call parent constructor

         qq.FileUploaderBasic.apply(this, arguments);



         // 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">'

                                 + '<div class="qq-upload-drop-area"><span>'+ this._options.dropText + '</span></div>'

                                    + '<div class="qq-upload-button">' + this._options.uploadText + '</div>'

                                    + '<ul class="qq-upload-list"></ul>'

                                    + '</div>',



                           // template for one item in file list

                           fileTemplate : '<li>'

                                 + '<span class="qq-upload-file"></span>'

                                    + '<span class="qq-upload-spinner"></span>'

                                    + '<span class="qq-upload-size"></span>'

                                    + '<a class="qq-upload-cancel" href="#">'+ this._options.cancelText + '</a>'

                                    + '<a class="qq-upload-remove" href="#">'+ this._options.removeText + '</a>'

                                    + '<span class="qq-upload-failed-text">'+ this._options.failedText + '</span>'

                                    + '</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',

                              cancel : 'qq-upload-cancel',

                              remove : 'qq-upload-remove',



                              // added to list item when upload completes

                              // used in css to hide progress spinner

                              success : 'qq-upload-success',

                              fail : 'qq-upload-fail'

                           }

                     });

         // overwrite options with user supplied

         qq.extend(this._options, o);



         this._element = this._options.element;

         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._bindCancelEvent();

         this._setupDragDrop();



         this._addInitFiles(this._listElement.id);

      };



// inherit from Basic Uploader

qq.extend(qq.FileUploader.prototype, qq.FileUploaderBasic.prototype);



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];

      if (!element)

      {

         throw new Error('element not found ' + type);

      }



      return element;

   },

      _setupDragDrop : function()

      {

         var self = this, dropArea = this._find(this._element, 'drop');



         var dz = new qq.UploadDropZone({

            element : dropArea,

            onEnter : function(e)

            {

               qq.addClass(dropArea, self._classes.dropActive);

               e.stopPropagation();

            },

            onLeave : function(e)

            {

               e.stopPropagation();

            },

            onLeaveNotDescendants : function(e)

            {

               qq.removeClass(dropArea, self._classes.dropActive);

            },

            onDrop : function(e)

            {

               dropArea.style.display = 'none';

               qq.removeClass(dropArea, self._classes.dropActive);

               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, 'dragleave',

               function(e)

               {

                  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';

                  }

               });

      },

      _onSubmit : function(id, fileName)

      {

         qq.FileUploaderBasic.prototype._onSubmit.apply(this, arguments);

         this._addToList(id, fileName);

      },

      _onProgress : function(id, fileName, loaded, total)

      {

         qq.FileUploaderBasic.prototype._onProgress.apply(this, arguments);



         var item = this._getItemByFileId(id);

         var size = this._find(item, 'size');

         size.style.display = 'inline';



         var text;

         if (loaded != total)

         {

            text =

                  Math.round(loaded / total * 100)

                        + '% / '

                           + this._formatSize(total);

         }

         else

         {

            text = this._formatSize(total);

         }



         qq.setText(size, text);

      },

      _onComplete : function(id, fileName, result)

      {

         qq.FileUploaderBasic.prototype._onComplete.apply(this, arguments);



         // mark completed

         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);

            this._find(item, 'remove').style.display = "inline";

            item.serverIndex = result.serverIndex;

         }

         else

         {

            qq.addClass(item, this._classes.fail);

         }

      },

      _addToList : function(id, fileName, serverIndex)

      {         

         var item = qq.toElement(this._options.fileTemplate);

         item.qqFileId = id;



         var fileElement = this._find(item, 'file');

         qq.setText(fileElement, this._formatFileName(fileName));

         this._find(item, 'size').style.display = 'none';



         if (typeof (serverIndex) != "undefined")

         {

            item.serverIndex = serverIndex;

            this._find(item, 'cancel').style.display = 'none';

            this._find(item, 'spinner').style.display = 'none';

         }

         else

         {

            this._find(item, 'remove').style.display = 'none';

         }



         this._listElement.appendChild(item);

         this._setSizeField();   

      },

      

      _setSizeField : function()

      {

         if(this._options.sizeField && document.getElementById(this._options.sizeField))

         {

            document.getElementById(this._options.sizeField).value = 

               this._listElement.children.length == 0 ? null: this._listElement.children.length;

         }

      },

      

      _getItemByFileId : function(id)

      {

         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;

            item = item.nextSibling;

         }

      },

      _addInitFiles : function(id)

      {

         var self = this;

         Tapestry.ajaxRequest(this._options.initializeUploadsLink, function(response){

            if(response.responseJSON)

            {

               for ( var i = 0; i < response.responseJSON.uploads.size(); ++i)

               {

                  var file = response.responseJSON.uploads[i];

                  self._addToList(id, file.fileName, file.serverIndex);

               }

            }

         });         

      },

      /**

       * delegate click event for cancel link

       */

      _bindCancelEvent : function()

      {

         var self = this, 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))

            {

               qq.preventDefault(e);



               var item = target.parentNode;

               self._handler.cancel(item.qqFileId);

               qq.remove(item);

               self._setSizeField();

            }

            else if (qq.hasClass(target, self._classes.remove))

            {

               qq.preventDefault(e);

               var item = target.parentNode;

               self._handler._options.onRemove(item.serverIndex);

               qq.remove(item);

               self._setSizeField();

            }

         });

      }

});



qq.UploadDropZone = function(o)

{

   this._options = {

      element : null,

      onEnter : 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);



   this._element = this._options.element;



   this._disableDropOutside();

   this._attachEvents();

};



qq.UploadDropZone.prototype =

      {

         _disableDropOutside : function(e)

         {

            // run only once for all instances

            if (!qq.UploadDropZone.dropOutsideDisabled)

            {



               qq.attach(document, 'dragover', function(e)

               {

                  if (e.dataTransfer)

                  {

                     e.dataTransfer.dropEffect = 'none';

                     e.preventDefault();

                  }

               });



               qq.UploadDropZone.dropOutsideDisabled = true;

            }

         },

            _attachEvents : function()

            {

               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 = 'copy'; // for Chrome

                  }



                  e.stopPropagation();

                  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);

                  // do not fire when moving a mouse over a descendant

                  if (qq.contains(this, relatedTarget))

                     return;



                  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;



               // dt.effectAllowed is none in Safari 5

               // 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

      multiple : false,

      // 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);



   this._element = this._options.element;



   // make button suitable container for input

   qq.css(this._element, {

      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.remove(this._input);

      }



      qq.removeClass(this._element, this._options.focusClass);

      this._input = this._createInput();

   },

   _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);

      if (this._options.id)

      {

         input.id = this._options.id;

      }



      qq.css(input, {

         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;

      qq.attach(input, 'change', function()

      {

         self._options.onChange(input);

      });



      qq.attach(input, 'mouseover', function()

      {

         qq.addClass(self._element, self._options.hoverClass);

      });

      qq.attach(input, 'mouseout', function()

      {

         qq.removeClass(self._element, self._options.hoverClass);

      });

      qq.attach(input, 'focus', function()

      {

         qq.addClass(self._element, self._options.focusClass);

      });

      qq.attach(input, 'blur', function()

      {

         qq.removeClass(self._element, 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;

   }

};



/**

 * Class for uploading files, uploading itself is handled by child classes

 */

qq.UploadHandlerAbstract = function(o)

{

   this._options = {

      debug : false,

      action : '/upload.php',

      

      // maximum number of concurrent uploads

      maxConnections : 999,

      onProgress : function(id, fileName, loaded, total)

      {

      },

      

      onComplete : function(id, fileName, response)

      {

      },

      

      onCancel : function(id, fileName)

      {

         

      },

      

      onRemove : function(serverIndex)

      {

      }

   };

   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);

   },

   /**

    * 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]);

      }

   },

   /**

    * Cancels file upload by id

    */

   cancel : function(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;

   },

   /**

    * 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]);

      }

   }

};



/**

 * Class for uploading files using form and iframe

 * 

 * @inherits qq.UploadHandlerAbstract

 */

qq.UploadHandlerForm = function(o)

{

   qq.UploadHandlerAbstract.apply(this, arguments);



   this._inputs = {};

};

// @inherits qq.UploadHandlerAbstract

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();



                  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];



                     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.remove(iframe);

                     }

                  },

                  _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()

                     {

                        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()

                        {

                           qq.remove(iframe);

                        }, 1);

                     });



                     form.submit();

                     qq.remove(form);



                     return id;

                  },

                  _attachLoadEvent : function(iframe, callback)

                  {

                     qq

                           .attach(

                                 iframe,

                                 'load',

                                 function()

                                 {

                                    // when we remove iframe from dom

                                    // the request stops, but in IE load

                                    // event fires

                                    if (!iframe.parentNode)

                                    {

                                       return;

                                    }



                                    // 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;

                                    }



                                    callback();

                                 });

                  },

                  /**

                   * Returns json object received by iframe from server.

                   */

                  _getIframeContentJSON : function(iframe)

                  {

                     // 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);



                     try

                     {

                        response = eval("(" + doc.body.innerHTML + ")");

                     }

                     catch (err)

                     {

                        response = {};

                     }



                     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 form =

                           qq

                                 .toElement('<form method="post" enctype="multipart/form-data"></form>');



                     var queryString = qq.obj2url(params, this._options.action);



                     form.setAttribute('action', queryString);

                     form.setAttribute('target', iframe.name);

                     form.style.display = 'none';

                     document.body.appendChild(form);



                     return form;

                  }

            });



/**

 * Class for uploading files using xhr

 * 

 * @inherits qq.UploadHandlerAbstract

 */

qq.UploadHandlerXhr = function(o)

{

   qq.UploadHandlerAbstract.apply(this, arguments);



   this._files = [];

   this._xhrs = [];



   // current loaded size in bytes for each file

   this._loaded = [];

};



// static method

qq.UploadHandlerXhr.isSupported =

      function()

      {

         var input = document.createElement('input');

         input.type = 'file';



         return ('multiple' in input && typeof File != "undefined" && typeof (new XMLHttpRequest()).upload != "undefined");

      };



// @inherits qq.UploadHandlerAbstract

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;

   },

      getName : function(id)

      {

         var file = this._files[id];

         // fix missing name in Safari 4

         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

       */

      getLoaded : function(id)

      {

         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;

               self._options.onProgress(id, name, e.loaded, e.total);

            }

         };



         xhr.onreadystatechange = function()

         {

            if (xhr.readyState == 4)

            {

               self._onComplete(id, xhr);

            }

         };



         // build query string

         params = params || {};

         params['qqfile'] = name;

         var queryString = qq.obj2url(params, this._options.action);



         xhr.open("POST", queryString, true);

         xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

         xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));

         xhr.setRequestHeader("Content-Type", "application/octet-stream");

         xhr.send(file);

      },

      _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 + ")");

…