Adding file upload fields dynamically to an HTML page using Javascript

hyounis Feb 7, 2009 Computers
This tutorial explains how to dynamically add and remove input fields in an HTML page using Javascript.

In the following article, I'm going to show you how to dynamically create new HTML input fields using Javascript Document Object Model.

What I'll be demonstarting below is how to use this technique to dynamically add a new file upload field to a form each time the existing file upload field is used. Also, we will be allowing users to remove the files they have previously added.

 

Step 1 - The HTML page:

 

 <form method="POST" enctype="multipart/form-data">
    <input type="hidden" name="file_count" id="file_count" value="0" />
    <table id="files_table" border="0" cellpadding="0" cellspacing="0">
        <tr id="new_file_row">
            <td>
                <input type="file" name="new_file[0]" id="new_file[0]" readonly="readonly" onchange="add_new_file(this)" />
            </td>
        </tr>
    </table>
</form>

The HTML form would initially contain only one file upload input field. The next step would be implementing the Javascript function that dynamically append a new file upload field to the form when this one is used.

 

Step 2 - Javascript function to a add a new file upload field:

 

 function add_new_file(field)
{
    // Get the number of files previously uploaded.
    var count = parseInt(document.getElementById('file_count').value);
    
    // Get the name of the file that has just been uploaded.
    var file_name = document.getElementById("new_file["+count+"]").value;
   
    // Hide the file upload control containing the information about the picture that was just uploaded.
    document.getElementById('new_file_row').style.display = "none";
    document.getElementById('new_file_row').id = "new_file_row["+count+"]";
   
    // Get a reference to the table containing the uploaded pictures.       
    var table = document.getElementById('files_table');
   
    // Insert a new row with the file name and a delete button.
    var row = table.insertRow(table.rows.length);
    row.id = "inserted_file["+count+"]";
    var cell0 = row.insertCell(0);
    cell0.innerHTML = '<input type="text" disabled="disabled" name="inserted_file['+count+']" value="'+file_name+'" /><input type="button" name="delete['+count+']" value="Delete" onclick="delete_inserted(this)"';
   
    // Increment count of the number of files uploaded.
    ++count;
   
    // Insert a new file upload control in the table.
    var row = table.insertRow(table.rows.length);
    row.id = "new_file_row";
    var cell0 = row.insertCell(0);
    cell0.innerHTML = '<input type="file" name="new_file['+count+']" id="new_file['+count+']" readonly="readonly" onchange="add_new_file(this)" />';   
   
    // Update the value of the file hidden input tag holding the count of files uploaded.
    document.getElementById('file_count').value = count;

Each time the file upload input field in the HTML form is used, this function will hide the row containing the file upload field and create a new empty file upload field to allow the user to upload another file.

However, the existing file upload field has to be preserved; it cannot be removed because it contains the uploaded file path and data. Instead of removing the field, we just hide it and add a new readonly text field with a Delete button next to it to allow the user to remove the uploaded file in a user friendly way.

 

Step 3 - Javascript function to delete previously uploaded files:

 

 function delete_inserted(field)
{
    // Get the field name.
    var name = field.name;
    
    // Extract the file id from the field name.
    var id = name.substr(name.indexOf('[') + 1, name.indexOf(']') - name.indexOf('[') - 1);
   
    // Hide the row displaying the uploaded file name.
    document.getElementById("inserted_file["+id+"]").style.display = "none";
       
    // Get a reference to the uploaded file control.
    var control = document.getElementById("new_file["+id+"]");
   
    // Remove the new file control.
    control.parentNode.removeChild(control);
}

Finally, the last step would be implementing a function to delete the uploaded file when the Delete button is clicked.

What did you think of this tutorial?
+ 4
7 CommentsAdd a Comment
Abolfazl on Jul 29, 2015
 
u forgot add a '&gt;' at last of delete button and '}' last of function thanks a lot .
shiva on Dec 20, 2012
 
Thanks for providing this code..
francis on Mar 5, 2011
 
works..but too long..
Praveen on Nov 10, 2010
 
Good script
Bacu on Feb 22, 2010
 
Very nice script! What would be the code to upload all the dynamic generated file fields? Thanks
linh on Jul 30, 2009
 
I am implementing the code above and when I print out the array $_FILES it only gives the first instance of and ignore the rest. Does this happen to anyone? I am also appending with javascript calls. What am I be missing?
pradeep on Jul 1, 2009
 
plz provide the code explanation
Name
Comment
  • Views : 4392
  • Comments : 7
  • Rating : + 4
  • Last Updated : Feb 7, 2009