Added listElement option to qq.FileUploader to specify separate file list

Author: Andrew Valums

client/fileuploader.js

@@ -478,7 +478,9 @@ qq.FileUploader = function(o){
     // 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>Drop files here to upload</span></div>' +
                 '<div class="qq-upload-button">Upload a file</div>' +
@@ -492,8 +494,8 @@ 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',
@@ -516,10 +518,12 @@ qq.FileUploader = function(o){
     qq.extend(this._options, o);       
 
     this._element = this._options.element;
-    this._element.innerHTML = this._options.template;    
-    this._classes = this._options.classes;
+    this._element.innerHTML = this._options.template;        
+    this._listElement = this._options._listElement || this._find(this._element, 'list');
 
-    this._button = this._createUploadButton(this._getElement('button'));        
+    this._classes = this._options.classes;
+        
+    this._button = this._createUploadButton(this._find(this._element, 'button'));        
 
     this._bindCancelEvent();
     this._setupDragDrop();
@@ -531,19 +535,9 @@ qq.extend(qq.FileUploader.prototype, qq.FileUploaderBasic.prototype);
 qq.extend(qq.FileUploader.prototype, {
     /**
      * Gets one of the elements listed in this._options.classes
-     * First optional element is root for search (this._element default)
-     *  1. this._getElement('button');
-     *  2. this._getElement(item, 'file'); 
      **/
-    _getElement: function(parent, type){                        
-        if (typeof parent == 'string'){
-            // parent was not passed
-            type = parent;
-            parent = this._element;                   
-        }
-        
-        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);
         }
@@ -552,7 +546,7 @@ qq.extend(qq.FileUploader.prototype, {
     },
     _setupDragDrop: function(){
         var self = this,
-            dropArea = this._getElement('drop');                        
+            dropArea = this._find(this._element, 'drop');                        
 
         var dz = new qq.UploadDropZone({
             element: dropArea,
@@ -598,7 +592,7 @@ qq.extend(qq.FileUploader.prototype, {
         qq.FileUploaderBasic.prototype._onProgress.apply(this, arguments);
 
         var item = this._getItemByFileId(id);
-        var size = this._getElement(item, 'size');
+        var size = this._find(item, 'size');
         size.style.display = 'inline';
 
         var text; 
@@ -615,8 +609,8 @@ qq.extend(qq.FileUploader.prototype, {
 
         // mark completed
         var item = this._getItemByFileId(id);                
-        qq.remove(this._getElement(item, 'cancel'));
-        qq.remove(this._getElement(item, 'spinner'));
+        qq.remove(this._find(item, 'cancel'));
+        qq.remove(this._find(item, 'spinner'));
 
         if (result.success){
             qq.addClass(item, this._classes.success);    
@@ -628,14 +622,14 @@ qq.extend(qq.FileUploader.prototype, {
         var item = qq.toElement(this._options.fileTemplate);                
         item.qqFileId = id;
 
-        var fileElement = this._getElement(item, 'file');        
+        var fileElement = this._find(item, 'file');        
         qq.setText(fileElement, this._formatFileName(fileName));
-        this._getElement(item, 'size').style.display = 'none';        
+        this._find(item, 'size').style.display = 'none';        
 
-        this._getElement('list').appendChild(item);
+        this._listElement.appendChild(item);
     },
     _getItemByFileId: function(id){
-        var item = this._getElement('list').firstChild;        
+        var item = this._listElement.firstChild;        
 
         // there can't be txt nodes in dynamically created list
         // and we can  use nextSibling
@@ -649,7 +643,7 @@ qq.extend(qq.FileUploader.prototype, {
      **/
     _bindCancelEvent: function(){
         var self = this,
-            list = this._getElement('list');            
+            list = this._listElement;            
 
         qq.attach(list, 'click', function(e){            
             e = e || window.event;

tests/separate-file-list.htm

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<link href="../client/fileuploader.css" rel="stylesheet" type="text/css">	
+</head>
+<body>		
+	
+	<div id="demo"></div>
+	<ul id="separate-list"></ul>
+    
+    <script src="../client/fileuploader.js" type="text/javascript"></script>
+    <script>        
+        function createUploader(){            
+            var uploader = new qq.FileUploader({
+                element: document.getElementById('demo'),
+                listElement: document.getElementById('separate-list'),
+                action: '../client/do-nothing.htm'
+            });           
+        }        
+        window.onload = createUploader;     
+    </script>    
+</body>
+</html>