Question

I am attempting to have a file upload page that allows for an arbitrary amount of file uploads. I found javascript code that successfully creates a new file input field in the form when one is clicked, however, any fields besides the one hardcoded in html are not being sent to my perl CGI script.

Javascript

    function fileFields() {
         var x = document.getElementById('fileUpload');
         x.onclick = function() {
                var i = parseFloat(this.lastChild.id)+1;
                input = document.createElement("input");
                input.setAttribute("type", "file");
                input.setAttribute("name", 'fileName_' + i);
                input.setAttribute("id", i);
                this.appendChild(input);
         }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  fileFields();
});

HTML Form

<form action="https://www.indiana.edu/~webdeviu/phil/submit.cgi" method="post" enctype="multipart/form-data">
<select name="property">
     <TMPL_LOOP NAME="PROPS">
          <option value="<TMPL_VAR NAME="user">"><TMPL_VAR NAME="user"></option>
     </TMPL_LOOP>
</select>
<br />
<a href="#" id="fileUpload"><input type="file" name="file_1" id="1" /></a>
<br />
<input type="submit" name="submit" value="Upload" />
</form>

Perl CGI, portion that looks for multiple files

my @files;

my $i = 1;
my $file = $query->param("file_" . $i);
while ($file) {
    push(@files, $file);
    $i = $i + 1;
    $file = $query->param("file_" . $i);
}
print $query->header( );
print scalar(@files); # prints 1 regardless of how many files I upload
exit;

I also put an escape in the while loop at one point to print out $file once it is changed to “file_2”, and it is null at that point.

What am I missing? any help is much appreciated.

Answer 1

You’ve named the dynamic file fields incorrectly:

input.setAttribute("name", 'fileName_' + i);

That should be this according to your CGI:

input.setAttribute("name", 'file_' + i);