Creating File Inputs On the Fly -- Mozilla Issues

[bob_jamison]

I'm having some problems with the following code. The intended purpose: the page starts out with 5 file inputs for uploading images. You can click a link that says "Add 5 More" and it will add 5 more field inputs using javascript (without reloading the page).

The adding of the file inputs works just fine -- they appear on the page, and work as expected, until you hit submit. Here's the problem: once the person hits submit, and I need to get the values from the $_FILES variable (I'm writing in PHP), there is nothing available for those fields that were added on the fly...except in IE. It works in IE. Just not in Mozilla based browsers. Any guesses on why?

<script>
function addUploadForm(n)
{
var uDiv = document.getElementById('tableUp');

var j = 0;
var i = 1;
while (document.getElementById('file' + i++))
j++;

for(i=(j+1);i<=(n+j);i++) {
var tbody = document.createElement('TBODY');
var row1 = document.createElement('TR');
var td1 = document.createElement('TD');
td1.align = 'center';
td1.className = 'text_11_666666';
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');

var in1 = document.createElement('img');
in1.name = 'thumb';
in1.src = '../images/upload/thumb.gif';
td1.appendChild(in1);

var in12 = document.createElement('br');
td1.appendChild(in12);

var in13 = document.createTextNode('Photo ' + i);
td1.appendChild(in13);

var in3 = document.createElement('input');
in3.type = 'file';
in3.name = 'file[]';
in3.id = 'file' + i;
td3.appendChild(in3);

tbody.appendChild(row1);
row1.appendChild(td1);
row1.appendChild(td2);
row1.appendChild(td3);

var row2 = document.createElement('TR');
var r2td1 = document.createElement('TD');
r2td1.height = 10;

tbody.appendChild(row2);
row2.appendChild(r2td1);

uDiv.appendChild(tbody);
}

}
</script>

[bob_jamison]

Let me add that I used a bookmarklet to view the generated source, and then saved that file, and ran it -- and it works. So it's something to do with the generated input files that mozilla doesn't like. Help?

[RonPK]

Hello Bob, welcome to WebmasterWorld.

Maybe the order of things matters: start with adding the row, after that the cells, after that the cell contents.

I'm working on a similar script, and found that cloning an existing row works fine in FF1.5, Opera 8.5 and IE6/7:

function addcontrol() { 
 var theTable = document.getElementById('uploadcontrols'); 
 var theRows = theTable.getElementsByTagName("tr"); 
 var lastRow = theRows.item(theRows.length-1); 
 var rowClone = lastRow.cloneNode(true); // 'true' clones the childnodes as well 
 theTable.tBodies[0].appendChild(rowClone); 
} 

This fills $_FILES as desired. I just had to do some extra stuff in the javascript to get the IDs right.