Background - this code adds & deletes file inputs from the screen as well as adds & deletes them from an array that will be used in the uploading process.

I'm having trouble splicing the correct value from an array. In the remove function, I think it is always removing file1/element 0 from the array rather than the corresponding file that's being deleted from the screen. Can anybody tell what's wrong with the count parameter it's using and how to fix it?

var fileNames = [];                   
fileNames[0] = "file1"; 

function addFileTextbox()                                                               
{                                                                                       
   //main div that the other divs will be added to                                       
   var divLocation = document.getElementById('addToDiv');                              
                                                                                           
   //create new div for holding textboxes, & give it a unique name for uploading         
   var newDiv = document.createElement('div');                                         
   var count = document.getElementById('addToDiv').getElementsByTagName('input').length + 2;  //+2 because since it hasn't been appended yet, the length will be short one. We need this number to set the unique div name.  
   var divIDName = 'file' + count;                                                     
   newDiv.innerHTML = '<input type="file" name="' + divIDName + '" size="57"> <a href="#" onclick="removeAdditionalFile(this.parentNode, this.count)">Remove</a>';   
                                                                                           
   //add the divIDName to the array, & store it in the hidden input.                     
   fileNames[count-1] = divIDName;  //-1 because the array starts at 0 - so file1 goes in [0], file2 in [1], etc.  
   document.fileForm.fileArray.value = fileNames.join();  //string - default comma delimiter  
                                                                                           
   //Attach new div to main div location:                                                
   divLocation.appendChild(newDiv);                                                      
}                                                                                       
                                                                                           
function removeAdditionalFile(divIDNode, count)                                         
{                                                                                       
   //get main div that the other divs are attached to                                    
   var divLocation = document.getElementById('addToDiv');                              
                                                                                          
   //delete the file textbox                                                             
   divLocation.removeChild(divIDNode);                                                   
                                                                                           
   //delete the file from the array, & store back into hidden input                      
   fileNames.splice(count-1, 1);  //count-1 is index, 1 is how many to remove            
   document.fileForm.fileArray.value = fileNames.join();                                 
}

I've also just realized that with this code, if someone removes a file and then adds another one, there will be 2 files with the same name which results in one file being uploaded twice and another file not being uploaded at all.

Does anyone have any ideas of how to fix that problem too?

Background - this code adds & deletes file inputs from the screen as well as adds & deletes them from an array that will be used in the uploading process.

I'm having trouble splicing the correct value from an array. In the remove function, I think it is always removing file1/element 0 from the array rather than the corresponding file that's being deleted from the screen. Can anybody tell what's wrong with the count parameter it's using and how to fix it?

var fileNames = [];                   
fileNames[0] = "file1"; 

function addFileTextbox()                                                               
{                                                                                       
   //main div that the other divs will be added to                                       
   var divLocation = document.getElementById('addToDiv');                              
                                                                                           
   //create new div for holding textboxes, & give it a unique name for uploading         
   var newDiv = document.createElement('div');                                         
   var count = document.getElementById('addToDiv').getElementsByTagName('input').length + 2;  //+2 because since it hasn't been appended yet, the length will be short one. We need this number to set the unique div name.  
   var divIDName = 'file' + count;                                                     
   newDiv.innerHTML = '<input type="file" name="' + divIDName + '" size="57"> <a href="#" onclick="removeAdditionalFile(this.parentNode, this.count)">Remove</a>';   
                                                                                           
   //add the divIDName to the array, & store it in the hidden input.                     
   fileNames[count-1] = divIDName;  //-1 because the array starts at 0 - so file1 goes in [0], file2 in [1], etc.  
   document.fileForm.fileArray.value = fileNames.join();  //string - default comma delimiter  
                                                                                           
   //Attach new div to main div location:                                                
   divLocation.appendChild(newDiv);                                                      
}                                                                                       
                                                                                           
function removeAdditionalFile(divIDNode, count)                                         
{                                                                                       
   //get main div that the other divs are attached to                                    
   var divLocation = document.getElementById('addToDiv');                              
                                                                                          
   //delete the file textbox                                                             
   divLocation.removeChild(divIDNode);                                                   
                                                                                           
   //delete the file from the array, & store back into hidden input                      
   fileNames.splice(count-1, 1);  //count-1 is index, 1 is how many to remove            
   document.fileForm.fileArray.value = fileNames.join();                                 
}

If you're trying to remove the last element in the array, use Array.pop() instead.
https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/Array

However, your splice looks ok.

Are you getting an errors? Do you have a JS debugger?
If you're on Firefox, get Firebug.

I'm not getting any error messages. When the dialogue comes back saying that you've successfully uploaded the following documents, the list isn't right. Most notably, the first file will be missing rather than the file the user actually deleted.

When a user clicks "add", a new file textbox is put on the screen along with a corresponding "remove" link, and the file name is put in the array. So the user can delete any file in the list. It might not necessarily be the last one that was added.

I think somehow this.count in the call to removeAdditionalFile is not right

newDiv.innerHTML = '<input type="file" name="' + divIDName + '" size="57"> <a href="#" onclick="removeAdditionalFile(this.parentNode, this.count)">Remove</a>';

this.count would refer to the count property of the link (a element).

I don't think this is what is intended. Maybe:

newDiv.innerHTML = '<input type="file" name="' + divIDName + '" size="57"> <a href="#" onclick="removeAdditionalFile(this.parentNode, '+count+')">Remove</a>';

yes! that fixed it :-D
thanks a bunch:icon_exclaim:

You're welcome. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.