Metacat

    var uploadBit = 1;

  // include source for Multiple file uploader:

  // http://the-stickman.com/web-development/javascript/

  function MultiSelector( list_target, max ){

    this.list_target = list_target;

    this.count = 0;

    this.id = 0;

    var fcount =  document.getElementById("fileCount");

    if (fcount.value > 0) {

        this.id = fcount.value;

    }

    if( max ){

      this.max = max;

    } else {

      this.max = -1;

    };

    /**

     * Add a new file input element

     */

    this.addElement = function( element ){

      // Make sure it's a file input element

      if( element.tagName == 'INPUT' && element.type == 'file' ){

        // Element name -- what number am I?

        element.name = 'file_' + this.id++;

        // Add reference to this object

        element.multi_selector = this;

        // What to do when a file is selected

        element.onchange = function(){

          // Increment file counter

          var fileCount = incrementCount("fileCount");

          // Clean up file text

          var comment_element = document.getElementById( 'file_comment' );

          if (comment_element){

            comment_element.parentNode.removeChild(comment_element);

          }

          // New file input

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

          new_element.type = 'file';

          // Add new element

          this.parentNode.insertBefore( new_element, this );

          // Apply 'update' to element

          this.multi_selector.addElement( new_element );

          // Update list

          this.multi_selector.addListRow( this );

          // Hide this: we can't use display:none because Safari doesn't like it

          this.style.position = 'absolute';

          this.style.left = '-1000px';

        };

        // If we've reached maximum number, disable input element

        if( this.max != -1 && this.count >= this.max ){

          element.disabled = true;

        };

        // File element counter

        this.count++;

        // Most recent element

        this.current_element = element;

      } else {

        // This can only be applied to file input elements!

        alert( 'Error: not a file input element' );

      };

    };

    /**

     * Add a new row to the list of files

     */

    this.addListRow = function( element ){

      // Row div

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

      // Delete button

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

      new_row_button.type = 'button';

      new_row_button.value = 'Delete';

      // References

      new_row.element = element;

      // Delete function

      new_row_button.onclick= function(){

        // Remove element from form

        this.parentNode.element.parentNode.removeChild( this.parentNode.element );

        // Remove this row from the list

        this.parentNode.parentNode.removeChild( this.parentNode );

        // Decrement counter

        this.parentNode.element.multi_selector.count--;

        // Re-enable input element (if it's disabled)

        this.parentNode.element.multi_selector.current_element.disabled = false;

        // Appease Safari

        //    without it Safari wants to reload the browser window

        //    which nixes your already queued uploads

        return false;

      };

      // Set row value

      new_row.innerHTML = element.value + " ";

      // Add button

      new_row.appendChild( new_row_button );

      // Add it to the list

      this.list_target.appendChild( new_row );

    };

  };

  function deleteFile(evt, file) {

         evt = (evt) ? evt : ((window.event) ? window.event : null);

         if (evt) {

           // equalize W3C/IE models to get event target reference

           var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

           var element = document.getElementById("file_element");

           if (elem) {

               try {

                 // Add a new hidden form element to delete exisiting files

                 // FIXME: this needs to find the matching file element, so if our node

                 // has 'test.txt' as the filename, find the input hidden value="test.txt"

                 //element.parentNode.removeChild( element );

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

                 delete_input.type = 'hidden';

                 delete_input.value = file;

                 elem.appendChild( delete_input );

                 // Remove this row from the list

                 elem.parentNode.parentNode.removeChild( elem.parentNode );

                 // Decrement counter

                 elem.parentNode.element.multi_selector.count--;

                 // Re-enable input element (if it's disabled)

                 elem.parentNode.element.multi_selector.current_element.disabled = false;

                 }

               catch(e) {

                   var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");

                   alert("Error:\n" + msg);

                   return;

               }

           }

         }

    }

<form action="@cgi-prefix@/register-dataset.cgi" enctype="multipart/form-data" method="post">

  <input type="hidden" name="hasUpload" value="[% hasUpload %]">

    [% IF aoCount %]

 [% IF keyCount %]

        [% IF taxaCount %]

        [% IF !methodPara %]

  [% IF hasUpload == 'true' %]

  <!-- Associated Data -->

  <table class="tables" cellpadding="5" cellspacing="0">

  <tr class="sectheader"><td colspan="5" align="left">

  <span class="label">UPLOAD DATA&nbsp;</span><a href="@cgi-prefix@/register-dataset.cgi?cfg=[%cfg%]&amp;stage=guide#XXX" 

  target="guide"><span class="smalltext">(What's this?)</span></a></td>

  <td class="rightCol"><span><a onClick="distBit=swap(event, 'uploadTable', uploadBit)" style="cursor:pointer">Hide</a></span></td>

  </tr>

   </table>

  <table class="tables" cellpadding="5" cellspacing="0" id="uploadTable">

  <tr class="sectbody">

    <td class="rightCol"><span class="label">Upload Data File:</span></td>

    <td colspan="5">

        <input type="file" id="file_element" name="file_1" class="longwidth">

        [% IF form == 're_entry' && upCount %]

           [% cnt = 0 %]

           [% WHILE cnt < upCount %]

                [% SET fileSum = "upload_${cnt}" %]

                [% SET fileName = "uploadname_${cnt}" %]

                [% SET fileType = "uploadtype_${cnt}" %] 

                [% IF fileSum %]

                    <input type="hidden" name="[%fileSum%]" value="[% $fileSum %]"> 

                    <input type="hidden" name="[%fileName%]" value="[% $fileName %]"> 

                    <input type="hidden" name="[%fileType%]" value="[% $fileType %]"> 

                [% END %]

                [% cnt = cnt + 1 %]

            [% END %]

        <input type="hidden" name="upCount" value="[%upCount%]">

        [% END %]

        <input type="hidden" name="fileCount" value="[%fileCount%]" id="fileCount"></td>

  </tr>

  <tr class="sectbody">

    <td class="rightCol" valign="top"><span class="label">Attached Files:</span></td>

    <td colspan="5">

    [% IF !upCount %]

        <div id="file_comment">

            (<i>None currently attached</i>)

        </div>

    [% END %]

    <div id="files_list">[% IF form == 're_entry' && upCount %]

    [% cnt = 0 %]

    [% WHILE cnt < upCount %]

        [% SET fileName = "uploadname_${cnt}" %]

        [% IF fileName %]<div>[% $fileName %] <input type="button" value="Delete" onclick="deleteFile(event, [%fileName%]);"</div>[% END %]

        [% cnt = cnt + 1 %]

    [% END %]

    [% END %]</div></td>

  </tr>

  </table>

  <script language="JavaScript" type="text/JavaScript">

    var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 10);

    multi_selector.addElement( document.getElementById( 'file_element' ) );

  </script>

  [% END %]