How to add remove to this.

[bonneylake]

Hey Everyone,

Well what i am trying to do is create a multiple file upload. I have it uploading multiple files just fine. However, now i am trying to add a remove link to each file i upload.

Basically how it works is they choose files to upload an then when they click submit it uploads the files. An now for every file they choose to upload i want it to have a remove button next to it so that if they change there mind they won't have to deal with the problem of having to clear the field themselves (this needs to be done before they click submit). The problem i am having is with the remove part.

Example lets say i decide to upload 3 files an i decide i don't need the second file. The problem i am having is when i go to upload it to my database it still sees the 2nd file there an gives me an error. it will say that there is nothing in the 2nd file when in fact i deleted the 2nd file. But i am wondering how can i make it do this. if i have 3 files f1,f2, f3 how can i instead of it saying f1,f3 (it appears like this if i delete the 2nd file) how can i make it say f1,f2.

i know my explanation is a bit confusing. I have been posting this question in coldfusion part of the forum. but now my question has become more a javascript question then a coldfusion question. But here is a link to that part of the form which might explain what i am trying to do a bit better.
http://bytes.com/forum/showthread.ph...88#post3309788

But here is the code i got

javascript

<script type="text/javascript">
  var upload_number = 1;
     function addFileInput()
     {     
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById(i);
    document.getElementById("moreUploads").removeChild(elm);
    upload_number = (upload_number - 1) + 2;
}
</script>

the html part

<form action="userform.cfm" id="userForm"  name="userForm" method="POST" enctype="multipart/form-data">
 <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
 Description <input type="text" name="description1" id="description" value="" /> 
          <div id="moreUploads"></div>
          <div id="moreUploadsLink" style="display:none;">
          <input type="button" value="Attach another file" 
   onclick="javascript:addFileInput();" >
          </div>
          <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
<input type="submit" class="officalsubmit" value="submit" name="submit">
</form>

the coldfusion part (action page it goes to once you click submit)

<cfif structKeyExists(FORM, "totalAttachments")>
     <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
     <cfparam name="FORM.totalAttachments" default="0">
     <cfloop from="1" to="#form.totalAttachments#" index="counter">
      <cfset currentDescription = form["description" & counter]>
      <!---verify the form field exists --->
     <cfif structKeyExists(FORM, "attachment"& counter)>
          <!--- try and upload it ...--->
          <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
          <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
          <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
              <cfquery name="attachment" datasource="CustomerSupport">
    exec usp_CS_Insertattachments
'#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
</cfquery>
     </cfif>
     </cfloop>
</cfif>

Thanks in advance ,
Rach

[acoder]

Rather than passing the full ID, pass in the upload number to use in a loop to change all the input field names. You can always add the "f" to get the id in the remove function.

Did you manage to get anywhere with the loop code?

[bonneylake]

Acoder,

Well i looked up some information on the loop an now i am just baffled on which loop to use. I was thinking of using the while loop, but not 100% sure that would be right. Here is the link i found on while loop http://www.w3schools.com/JS/js_loop_while.asp

an the other part i am baffled on completely.are you saying to take id out of it all together? because other wise i am just confused.

Thank you in advance,
Rach

[acoder]

A for loop is fine, no need for a while loop, though you could use that too if you want.

As for the ID passing, I meant something like this:

...     l.setAttribute("href", "javascript:removeFileInput(upload_number+");");
...
function removeFileInput(i)
{
// i is the upload number to delete and to loop from; to get the ID, just add "f":
    var elm = document.getElementById("f"+i);
...

[bonneylake]

Acoder,

Here is what i tried but when i try to add another field i get object expected. Obviously i missed something, thinking i did the loop wrong. Does the loop need to be applied to the addFileInput and the removeFileInput or just to addFileInput?

   var upload_number = 1;
   for (i = 0; i <= 5; i++){
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("href", "javascript:removeFileInput("upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    upload_number = upload_number - 1
}
}
 

Thanks in advance (an thank you for your patience),
Rach

[acoder]

Sorry, that was a slight mistake on my part. It should be:

l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");

The loop should be in the remove function only. It should start from i+1 till the total number of uploads. In the loop, get the file element and text field (description) element and change their names to one less than their current value.

[bonneylake]

Acoder,

I understood everything except the last part about getting the file element and description (i think) here is what i got.

   var upload_number = 1;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
for (i+1; i <= 5; i++){
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    attachment+upload_number = attachment+upload_number - 1;
    description+upload_number = description+upload_number -1;
    upload_number = upload_number - 1
 
}}

i think i might of did the attachment an description wrong does it need to be like above or like attachment=attachment - 1 or am i missing something else?

Thank you in advance :),
Rach

[acoder]

The loop needs to be inside the function, not outside.

To get the file and text elements, you can use getElementsByName() or give them ids and use getElementById(), e.g.:

function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j <= upload_number; j++) {
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    }
    upload_number = upload_number - 1
}

[bonneylake]

Hey Acoder,

I tried that an when i click remove i get the error of attachment

is null or not an object

. I even tried changing them to getElementById() an gave them both ids and i got object does not support this method. But here is what i got

   var upload_number = 1;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j <= upload_number; j++) {
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    }
    upload_number = upload_number - 1;
}

here is what is in the form (don't know if showing this will help) but thought i would show it anyway just in case.

 <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
 Description <input type="text" name="description1" id="description" value="" /> 
          <div id="moreUploads"></div>
          <div id="moreUploadsLink" style="display:none;">
          <input type="button" value="Attach another file" 
   onclick="javascript:addFileInput();" >
          </div>
          <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">

Thank you again for all the help :),
Rach

[RamananKalirajan]

Hey Acoder,

I tried that an when i click remove i get the error of attachment . I even tried changing them to getElementById() an gave them both ids and i got object does not support this method. But here is what i got

   var upload_number = 1;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j <= upload_number; j++) {
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    }
    upload_number = upload_number - 1;
}

here is what is in the form (don't know if showing this will help) but thought i would show it anyway just in case.

 <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
 Description <input type="text" name="description1" id="description" value="" /> 
          <div id="moreUploads"></div>
          <div id="moreUploadsLink" style="display:none;">
          <input type="button" value="Attach another file" 
   onclick="javascript:addFileInput();" >
          </div>
          <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">

Thank you again for all the help :),
Rach

Hi, Rach I did in a different way but i got the solution for ur problem.

[HTML]<html>
<body>
<input type="button" value="Attachment" onclick="doThis()">
<br/>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
</table>
</body>
</html>

<script type="text/javascript">
function doThis()
{
var myTab = document.getElementById('myTable');
var xx= document.createElement('input');
xx.type="file";

var row=myTab.rows.length;
var y=myTab.insertRow(row) ;
var b=y.insertCell(0);
b.appendChild(xx);
b.innerHTML = b.innerHTML;

var xy=document.createElement('input');
xy.type="button";
xy.value="Remove";
xy.onclick="removeThis(this)";
var c=y.insertCell(1);
c.appendChild(xy);
c.innerHTML=c.innerHTML;
}
function removeThis(ths)
{
var rowIndex = ths.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(rowIn dex);
}
</script>[/HTML]

Regards
Ramanan Kalirajan

[acoder]

Hey Acoder,

I tried that an when i click remove i get the error of attachment

Firstly, the upload_number should be 2 at the beginning as you had it earlier.

Secondly, in the loop, it should be j < upload_number instead of <=

Thirdly, you will also need to change the remove link to pass the correct number and the div id to reference the correct element too.

@Ramanan, that doesn't really answer the question. That part is already working, but I like your idea of using a button - much better than a link and the "javascript:" protocol.

[RamananKalirajan]

Firstly, the upload_number should be 2 at the beginning as you had it earlier.

Secondly, in the loop, it should be j < upload_number instead of <=

Thirdly, you will also need to change the remove link to pass the correct number and the div id to reference the correct element too.

@Ramanan, that doesn't really answer the question. That part is already working, but I like your idea of using a button - much better than a link and the "javascript:" protocol.

Thank You Mr. Acoder. This is my Idea. Not the solution. it simplifies and there is no confusion or complexity in the code.

Regards
Ramanan Kalirajan

[bonneylake]

Ramanan,

Yes a button is a good idea an was after i got the remove part working going to change it from a link to a button. I tried to do your example (wanted to see what you had done) but when i tried to click attachment i got the error saying object expected but then it wouldn't tell me where it was needed. But still thank you for the suggestion :).

Acoder,

I understood everything you said except the last part about changing the remove link to get the correct number and the div. completely baffled by what you mean.
here is what i got

   var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    }
    upload_number = upload_number - 1;
}

Thank you both for all the help,
Rach

[acoder]

You need to change the number that is being passed into the remove function otherwise it will try to remove the wrong div. Likewise with the div- you have to change the ID otherwise when you try to access the div to remove it, it will get the wrong div (or no div and cause an error).

For example, let's say you have three upload divs and you remove the second one. Currently, that would remove the second div and change the name of the attachment/description of the third to "2". The remove link, however, would still have "3" and the div ID would be "f3" instead of "f2". When you now add another div, that div's ID will be "f3" (so you have duplicate IDs) and the remove link will have 3 passed into it. Can you now see the problem?

[bonneylake]

Acoder,

I understand what your telling me and why we need to do it, i am just not sure how to apply what you said. I know i am not focusing today an i am sorry i am not focusing (lot been going on at home last 4 weeks, car trouble). But maybe if you could show me what lines are wrong it might help me understand and i could figure it out that way because i am just confused on what lines are wrong. But sorry i am making this difficult just really having a hard time understanding


But thank you again for all the help an patience,
Rach

[RamananKalirajan]

Ramanan,

Yes a button is a good idea an was after i got the remove part working going to change it from a link to a button. I tried to do your example (wanted to see what you had done) but when i tried to click attachment i got the error saying object expected but then it wouldn't tell me where it was needed. But still thank you for the suggestion :).

Acoder,

I understood everything you said except the last part about changing the remove link to get the correct number and the div. completely baffled by what you mean.
here is what i got

   var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    }
    upload_number = upload_number - 1;
}

Thank you both for all the help,
Rach

Hi Rach, I am sure that my code works good I tried it out. Can u please tell me at which line it is giving error. so that I can help u out.

Regards
Ramanan Kalirajan

[bonneylake]

Hey Ramanan,

Well i retried it and says line 27 an this is whats on line 27

  b.appendChild(xx);

Thank you,
Rach

[acoder]

maybe if you could show me what lines are wrong it might help me understand and i could figure it out that way because i am just confused on what lines are wrong.

There's no lines that are wrong, you just need to add more lines. You need to access the link and the div and then change their IDs. To access the link (give it an ID first) and div, use document.getElementById(id) (where id is the ID). For changing the ID, use setAttribute again.

[bonneylake]

There's no lines that are wrong, you just need to add more lines. You need to access the link and the div and then change their IDs. To access the link (give it an ID first) and div, use document.getElementById(id) (where id is the ID). For changing the ID, use setAttribute again.

Acoder,

Ok i know i did this way wrong but this is what i tried to do

var test=document.getElementById("id"+l);
test.setAttribute("");
d.appendChild(test);

but wanted to ask what function does it need to be in, in the add or the remove?
an i really don't know how to access the link nor the div. I mean would there names be to access them d and l since in the code there both written like this

var d = document.createElement("div");
     var l = document.createElement("a");

or am i confused?

Thank you for all the help,
Rach

[acoder]

You need to make changes in both. In the add function, you need to add the IDs and in the remove function, you want to access and remove them. You can't access them with d and l because those are local variables only available in the add function.

function addFileInput()
     {
...  l.setAttribute("id", "l"+upload_number);     
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
...
     }
 
function removeFileInput(i)
{
...
    for (j = i + 1; j < upload_number; j++) {
        link = document.getElementById("l"+j);
...
        link.setAttribute("id","l"+(j-1));
        link.setAttribute("href", "javascript:removeFileInput("+(j-1)+");");
    }
    upload_number = upload_number - 1;
}

and something similar for the div (not setting the href, of course).

[bonneylake]

Acoder,

Alrighty here is what i got, but i still did something wrong because still getting the same error. Theres one thing i added in the code which is the word description and a break tag. was trying to do a space tag, but not sure what i need to put in document.createElement("br") to make it space out instead of break.

   var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("id", "l"+upload_number);  
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    }
    upload_number = upload_number -1 ;
}
 

Thank you again :)
Rach

[acoder]

Is that the Coldfusion error or a JavaScript error?

Also don't forget to access the div and change its ID similar to the link.

[bonneylake]

Acoder,

Its definately a JavaScript error because the moment i click remove it comes up an says 'attachment' is null or not an object

an ok i tried to access the div an here is what i got. i am going to bold all the stuff for div i added.

   var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("id", "d"+upload_number); 
     l.setAttribute("id", "l"+upload_number);  
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    link = document.getElementById("d"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
     link.setAttribute("id","d"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    }
    upload_number = upload_number -1 ;
}

Thank you,
Rach

[acoder]

OK, that didn't quite go according to plan.

Remove line 15 since it's not needed. In the remove function, you can't use the link variable again otherwise it'll overwrite the previous declaration. Use another variable, e.g. div. Finally, a div does not have a href, so remove that line too.

What line does the error occur on?

[bonneylake]

Acoder,

Ok here is the updated code.

 <script type="text/javascript">
 var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("id", "l"+upload_number);  
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("d"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
     div.setAttribute("id","d"+(j-1));
    }
    upload_number = upload_number -1 ;
}
 
</script>

an here is the html

<input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
 Description <input type="text" name="description1" id="description" value="" /> 
          <div id="moreUploads"></div>
          <div id="moreUploadsLink" style="display:none;">
          <input type="button" value="Attach another file" 
   onclick="javascript:addFileInput();" >
          </div>
          <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
 

the error appears on the last line of the html or this line <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">

Thank you
Rach

[RamananKalirajan]

Hey Ramanan,

Well i retried it and says line 27 an this is whats on line 27

  b.appendChild(xx);

Thank you,
Rach

Whil u copy and run the code in the function removeThis(this) please note that some white spaces have been added in the field (rowIndex). remove that it will work

Regards
Ramanan Kalirajan

[acoder]

the error appears on the last line of the html or this line <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">

That can't be correct. Which browser are you testing on?

I noticed that the ID of the divs are "f*" and you're trying to access them with "d*".

[bonneylake]

Ramanan,

All definately take a look at it, but thank you for all your help :)

Acoder,

I am testing it using internet explorer. An with the id part do i need to change these lines from saying d to f?

div = document.getElementById("d"+j);
div.setAttribute("id","d"+(j-1));
 

Thank you,
Rach

[acoder]

Yes, those are the lines you need to change.

Have you got another browser to test on, e.g. Firefox, Opera?

[bonneylake]

Hey Acoder,

Ok changed those lines an tested it in firefox and it works like its suppose to in firefox but the remove doesn't work right at all in internet explorer.

Here is the code changed.

 var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("id", "l"+upload_number);  
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number -1 ;
}
 

but the error i get in internet explorer is attachment is null or not an object.this is could be with the html?
Any suggestions?

Thank you :),
Rach

[acoder]

Oh, this is an extremely annoying bug in IE which I forgot about.

If you create an input element dynamically, you can't set its name! On their website, they offer a workaround which is completely against the standard and causes errors in other browsers.

You'll need a try/catch to try the wrong way first and then catch the error and use the correct method. Hacky, but that's what we're used to as web developers.

try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
}
// add setAttribute lines here...

[bonneylake]

Acoder,

Obviously i am missed/did something wrong. It works like its suppose to now in IE.if i choose to upload 3 it an decided to delete the 2nd one it does turn the 3rd one into the second one. But when i click submit i am still getting this error

Error Diagnostic Information
 
An error occurred while evaluating the expression: 
 
 currentDescription = form["description" & counter]
Error near line 86, column 13.
--------------------------------------------------------------------------------
 
The member "DESCRIPTION3" in dimension 1 of object "form" cannot be found. Please, modify the member name.
 
 
The error occurred while processing an element with a general identifier of (CFSET), occupying document position (86:7) to (86:64) in the template file C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\userform.cfm.

here is what i got in userform.cfm. i am going to bold what line it says is the problem

<!---Inserts attachments into attachments.--->
<cfif structKeyExists(FORM, "totalAttachments")>
     <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
     <cfparam name="FORM.totalAttachments" default="0">
     <cfloop from="1" to="#form.totalAttachments#" index="counter">
      <cfset currentDescription = form["description" & counter]>
      <!---verify the form field exists --->
     <cfif structKeyExists(FORM, "attachment"& counter)>
          <!--- try and upload it ...--->
          <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
          <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
          <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
              <cfquery name="attachment" datasource="CustomerSupport">
    exec usp_CS_Insertattachments
'#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
</cfquery>
     </cfif>
     </cfloop>
</cfif>
 

an here is what the javascript looks like with the changes i added

   var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
   text = document.createElement("<input type='text' name='description"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
  file = document.createElement("input");
}
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("id", "l"+upload_number);  
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number -1 ;
}

Any suggestions,

Thank you :)
Rach

[acoder]

A copy/paste error. Line 15 should be "text = ..."

[bonneylake]

Hey Acoder,

still getting the same error. but here is the javascript part corrected.

  var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
   text = document.createElement("<input type='text' name='description"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
  text = document.createElement("input");
}
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("id", "l"+upload_number);  
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number -1 ;
}
 

it keeps saying the error is with this userform.cfm and on this line

 <cfset currentDescription = form["description" & counter]>

anyway possible that could be affecting it?

Thank you :),
Rach

[acoder]

Can you confirm if you test this in Firefox that it works or not?

The problem most likely is caused by lines 45/46 in the previous post in IE only.

[bonneylake]

Acoder,

Yep the same problem happens in firefox as well.

but what do you think is wrong with the 2 lines you mentioned?

Thank you,
Rach

[acoder]

Actually, I think the problem might be that you need to update the totalAttachments field:

document.getElementById("totalAttachments").value = upload_number-1;

[bonneylake]

Acoder

Sadly enough that didn't work either :(.

Here is the code updated.

 var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
   text = document.createElement("<input type='text' name='description"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
  text = document.createElement("input");
}
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("id", "l"+upload_number);  
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number-1;;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number -1 ;
}
 

Thank you,
Rach

[acoder]

No I meant in the remove function. So change that line back and add the -1 line to the remove function at the end.

[bonneylake]

No I meant in the remove function. So change that line back and add the -1 line to the remove function at the end.

Acoder,

Ok i changed that line back, but with the remove are you meaning it like this

function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number - 1 ;
}-1

or like this

function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    div.setAttribute("id","f"+(j-1));
    }
    document.getElementById("totalAttachments").value = upload_number - 1;
    upload_number = upload_number - 1 ;
}

Thank you,
Rach

[acoder]

The second one, but with lines 16 and 17 swapped.

[bonneylake]

Hey Acoder,

Ok well it worked correctly with no errors in firefox (and went into database), but still having trouble with internet explorer. With both i added 6 files and then tried to remove 2 ,4 and 6. When i removed the 2nd one i had no problems. but when i then tried to remove 4th file i got an error an the error was that attachments is null or not a number error and i tried to continue even though the error came up but it still wouldn't insert it into database.

Heres the new code

 var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
     var l = document.createElement("a");
     var file = document.createElement("input");
     var text = document.createElement("input");
     var br = document.createElement("br");
     var des = document.createTextNode("Description")
     try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
   text = document.createElement("<input type='text' name='description"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
  text = document.createElement("input");
}
     d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
     l.setAttribute("id", "l"+upload_number);  
     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
     d.appendChild(br);
     d.appendChild(des);
     d.appendChild(text);
     d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }
 
function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
    div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number - 1 ;
    document.getElementById("totalAttachments").value = upload_number - 1;
 
}

Thank you for all the help (an sorry this is being so frustrating),
Rach

[acoder]

At least you know that it should work, but IE doesn't want to play fair.

Those two lines I mentioned earlier, the problem with them is that there's no problem with them. It's just IE's buggy behaviour that comes to the fore again. It's the same setAttribute name problem. This one is more difficult to solve because you're not creating, but renaming.

If I have time over the weekend, I'll see if I can come up with a solution.

[bonneylake]

Hey Acoder,

Well i just wanted to say thank you for all the help you are given me i know i been a good amount of a pain in the rear. but please don't worry about it over the weekend, have fun over the weekend. i won't be able to work on it till monday anyway because don't got coldfusion on home computer:(. But still thank you for all the help you are given me i really do appreciate it all the help :)

Thank you,
Rach

[bonneylake]

Hey Acoder,

just wanted to ask if you were able to figure out a solution to the IE problem? I was thinking about it an maybe just putting a count in there would help. i used this in another part of my form http://www.dustindiaz.com/add-and-re...th-javascript/
but anyway in it they used a count an this seems to work fine in IE. but just thought i show you this an see if maybe this would help.

But again thank you for all your help,
Rach

[acoder]

The removing part isn't the problem, it's the renaming that causes problems in IE.

You could try using the same name for each element and then loop over them, e.g. attachment[], description[], so there's no renaming involved.

[bonneylake]

Ok i am guessing, but something like this?

function removeFileInput(i)
{
    var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
    link = document.getElementById("l"+j);
    div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[];
    description = document.getElementsByName("description"+j)[];
    attachment.setAttribute("name","attachment"+(j));
    description.setAttribute("name","description"+(j ));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j)+");");
    div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number - 1 ;
    document.getElementById("totalAttachments").value = upload_number - 1;
 
}
 

Thank you,
Rach

[acoder]

No, not quite. You'd need to make quite a few changes actually. You should first test with only one input and submit to the server-side. The change you need to make on the server is look for "attachment[]"-named form elements (and "description[]" too. Loop over them to test that it can work.

On the client-side, instead of naming elements attachment1, attachment2, etc., name them all "attachment[]". This may be the best solution for this problem. There are other alternatives you could consider too.

[bonneylake]

ok i get what your saying, just not 100% sure how to apply it.

Ok on my userform.cfm here is what i am guessing you what me to change

change these 2
<cfset currentDescription = form["description" & counter]>
 <cfif structKeyExists(FORM, "attachment"& counter)>
2 this
<cfset currentDescription = form["description" & []]>
 <cfif structKeyExists(FORM, "attachment" & [])>

here is what userform.cfm looks like in total

<cfif structKeyExists(FORM, "totalAttachments")>
     <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
     <cfparam name="FORM.totalAttachments" default="0">
     <cfloop from="1" to="#form.totalAttachments#" index="counter">
      <cfset currentDescription = form["description" & counter]>
      <!---verify the form field exists --->
     <cfif structKeyExists(FORM, "attachment"& counter)>
          <!--- try and upload it ...--->
          <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
          <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
          <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
              <cfquery name="attachment" datasource="CustomerSupport">
    exec usp_CS_Insertattachments
'#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
</cfquery>
     </cfif>
     </cfloop>
</cfif>

an on the client side i am guessing

 from this
<input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
 Description <input type="text" name="description1" id="description" value="" /> 
          <div id="moreUploads"></div>
          <div id="moreUploadsLink" style="display:none;">
          <input type="button" value="Attach another file" 
   onclick="javascript:addFileInput();" >
          </div>
          <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
 
to this
<input type="file" name="attachment[]" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
 Description <input type="text" name="description[]" id="description" value="" /> 
          <div id="moreUploads"></div>
          <div id="moreUploadsLink" style="display:none;">
          <input type="button" value="Attach another file" 
   onclick="javascript:addFileInput();" >
          </div>
          <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">

is that correct?

Thank you,
Rach

[acoder]

Actually, that was just an idea that I know will work with PHP, but not tested with Coldfusion.

I know one way that can work with Coldfusion or for that matter any language. Keep a hidden field that contains the upload numbers to upload, e.g.

<input type="hidden" name="uploads" id="uploads" value="1">

then when adding, just add the upload number to this field. When removing, just remove that number from the field. What you will end up with is a list of numbers which you can loop over on the server-side to determine which field names to use to upload. This whole process avoids the need to rename any of the elements.