Javascript file upload

[Sebarry]

Hi,

I'm using the following code from

the-stickman.com

to create a file upload list in Javascript. I want to modify it so that the file element is only added if the user has provided a description for the file in a HTML form, but I'm not sure where I need to put the check in. Also it doesn't seem to work in Firefox, only IE, but I can't see what code is not compatible with IE.

function MultiSelector( list_target, max ){
  42  
  43      // Where to write the list
  44      this.list_target = list_target;
  45      // How many elements?
  46      this.count = 0;
  47      // How many elements?
  48      this.id = 0;
  49      // Is there a maximum?
  50      if( max ){
  51          this.max = max;
  52      } else {
  53          this.max = -1;
  54      };
  55  
  56      /**
  57       * Add a new file input element
  58       */
  59      this.addElement = function( element ){
  60  
  61          // Make sure it's a file input element
  62          if( element.tagName == 'INPUT' && element.type == 'file' ){
  63  
  64              // Element name -- what number am I?
  65  //            element.name = 'file_' + this.id++;
  66              element.name = 'userfile[]';
  67  
  68              // Add reference to this object
  69              element.multi_selector = this;
  70  
  71              // What to do when a file is selected
  72              element.onchange = function(){
  73  
  74                  // New file input
  75                  var new_element = document.createElement( 'input' );
  76                  new_element.type = 'file';
  77  
  78                  // Add new element
  79                  this.parentNode.insertBefore( new_element, this );
  80  
  81                  // Apply 'update' to element
  82                  this.multi_selector.addElement( new_element );
  83  
  84                  // Update list
  85                  this.multi_selector.addListRow( this );
  86  
  87                  // Hide this: we can't use display:none because Safari doesn't like it
  88                  this.style.position = 'absolute';
  89                  this.style.left = '-1000px';
  90  
  91              };
  92              // If we've reached maximum number, disable input element
  93              if( this.max != -1 && this.count >= this.max ){
  94                  element.disabled = true;
  95              };
  96  
  97              // File element counter
  98              this.count++;
  99              // Most recent element
 100              this.current_element = element;
 101  
 102          } else {
 103              // This can only be applied to file input elements!
 104              alert( 'Error: not a file input element' );
 105          };
 106  
 107      };
 108  
 109      /**
 110       * Add a new row to the list of files
 111       */
 112      this.addListRow = function( element ){
 113  
 114          // Row div
 115          var new_row = document.createElement( 'div' );
 116  
 117          // Delete button
 118          var new_row_button = document.createElement( 'input' );
 119          new_row_button.type = 'button';
 120          new_row_button.value = 'Remove';
 121  
 122          // References
 123          new_row.element = element;
 124  
 125          // Delete function
 126          new_row_button.onclick= function(){
 127  
 128              // Remove element from form
 129              this.parentNode.element.parentNode.removeChild( this.parentNode.element );
 130  
 131              // Remove this row from the list
 132              this.parentNode.parentNode.removeChild( this.parentNode );
 133  
 134              // Decrement counter
 135              this.parentNode.element.multi_selector.count--;
 136  
 137              // Re-enable input element (if it's disabled)
 138              this.parentNode.element.multi_selector.current_element.disabled = false;
 139  
 140              // Appease Safari
 141              //    without it Safari wants to reload the browser window
 142              //    which nixes your already queued uploads
 143              return false;
 144          };
 145  
 146          // Set row value
 147          new_row.innerHTML = element.value;
 148  
 149          // Add button
 150          new_row.appendChild( new_row_button );
 151  
 152          // Add it to the list
 153          this.list_target.appendChild( new_row );
 154  
 155      };
 156  
 157  };
 

I would appreciate any help with sorting this out, it's really frustrating me.

Thanks,

Sean

[acoder]

Does the original code work with Firefox and other browsers?

What errors do you see?