By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,392 Members | 574 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,392 IT Pros & Developers. It's quick & easy.

How to add remove to this.

100+
P: 769
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
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.   var upload_number = 1;
  3.      function addFileInput()
  4.      {     
  5.      var d = document.createElement("div");
  6.      var l = document.createElement("a");
  7.      var file = document.createElement("input");
  8.      var text = document.createElement("input");
  9.      d.setAttribute("id", "f"+upload_number);
  10.      file.setAttribute("type", "file");
  11.      file.setAttribute("name", "attachment"+upload_number);
  12.      text.setAttribute("type", "text");
  13.      text.setAttribute("name", "description"+upload_number);
  14.      l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");
  15.      l.appendChild(document.createTextNode("Remove"));
  16.      d.setAttribute("id", "f"+upload_number);
  17.      d.appendChild(file);
  18.      d.appendChild(text);
  19.      d.appendChild(l);
  20.      document.getElementById("moreUploads").appendChild(d);
  21.      document.getElementById("totalAttachments").value = upload_number;
  22.      upload_number++;
  23.      }
  24.  
  25. function removeFileInput(i)
  26. {
  27.     var elm = document.getElementById(i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     upload_number = (upload_number - 1) + 2;
  30. }
  31. </script>
the html part
Expand|Select|Wrap|Line Numbers
  1. <form action="userform.cfm" id="userForm"  name="userForm" method="POST" enctype="multipart/form-data">
  2.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  3.  Description <input type="text" name="description1" id="description" value="" /> 
  4.           <div id="moreUploads"></div>
  5.           <div id="moreUploadsLink" style="display:none;">
  6.           <input type="button" value="Attach another file" 
  7.    onclick="javascript:addFileInput();" >
  8.           </div>
  9.           <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
  10. <input type="submit" class="officalsubmit" value="submit" name="submit">
  11. </form>
the coldfusion part (action page it goes to once you click submit)
Expand|Select|Wrap|Line Numbers
  1. <cfif structKeyExists(FORM, "totalAttachments")>
  2.      <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  3.      <cfparam name="FORM.totalAttachments" default="0">
  4.      <cfloop from="1" to="#form.totalAttachments#" index="counter">
  5.       <cfset currentDescription = form["description" & counter]>
  6.       <!---verify the form field exists --->
  7.      <cfif structKeyExists(FORM, "attachment"& counter)>
  8.           <!--- try and upload it ...--->
  9.           <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  10.           <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  11.           <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  12.               <cfquery name="attachment" datasource="CustomerSupport">
  13.     exec usp_CS_Insertattachments
  14. '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  15. </cfquery>
  16.      </cfif>
  17.      </cfloop>
  18. </cfif>
Thanks in advance ,
Rach
Aug 19 '08
Share this Question
Share on Google+
68 Replies

100+
P: 769
Hey Acoder

Don't i have the hidden field already going on right now in my form by using totalAttachments?

heres the html with totalAttachments in it.
Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
an i believe i am also doing the looping now my action page page.
Expand|Select|Wrap|Line Numbers
  1. <cfif structKeyExists(FORM, "totalAttachments")>
  2.      <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  3.      <cfparam name="FORM.totalAttachments" default="0">
  4.      <cfloop from="1" to="#form.totalAttachments#" index="counter">
  5.       <cfset currentDescription = form["description" & counter]>
  6.       <!---verify the form field exists --->
  7.      <cfif structKeyExists(FORM, "attachment"& counter)>
  8.           <!--- try and upload it ...--->
  9.           <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  10.           <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  11.           <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  12.               <cfquery name="attachment" datasource="CustomerSupport">
  13.     exec usp_CS_Insertattachments
  14. '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  15. </cfquery>
  16.      </cfif>
  17.      </cfloop>
  18. </cfif>
  19.  
the only part i am not understanding is this

then when adding, just add the upload number to this field. When removing, just remove that number from the field
or am i confused an do i have neither?

Thank you :),
Rach
Aug 26 '08 #51

acoder
Expert Mod 15k+
P: 16,027
That hidden field is just a simple number. What this new field would have is a list of numbers referring to the numbers in the names of the attachment/description fields, e.g. "1,4,5,6,8" if 2, 3 and 7 were deleted.
Aug 26 '08 #52

100+
P: 769
Hey Acoder,

alrighty i see what you mean on the difference. But what needs to stay an what needs to go because we have done so much to it i am not sure where to begin.

here is the javascript again.
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.    var upload_number = 2;
  3.      function addFileInput()
  4.      {
  5.      var d = document.createElement("div");
  6.      var l = document.createElement("a");
  7.      var file = document.createElement("input");
  8.      var text = document.createElement("input");
  9. <!---     var br = document.createElement("br");--->
  10.      var des = document.createTextNode("Description")
  11.      try {
  12.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  13.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  14. } catch (e) {
  15.   file = document.createElement("input");
  16.   text = document.createElement("input");
  17. }
  18.      d.setAttribute("id", "f"+upload_number);
  19.      file.setAttribute("type", "file");
  20.      file.setAttribute("name", "attachment"+upload_number);
  21.      text.setAttribute("type", "text");
  22.      text.setAttribute("name", "description"+upload_number);
  23.      l.setAttribute("id", "l"+upload_number);  
  24.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  25.      l.appendChild(document.createTextNode("Remove"));
  26.      d.setAttribute("id", "f"+upload_number);
  27.      d.appendChild(file);
  28. <!---     d.appendChild(br);--->
  29.      d.appendChild(des);
  30.      d.appendChild(text);
  31.      d.appendChild(l);
  32.      document.getElementById("moreUploads").appendChild(d);
  33.      document.getElementById("totalAttachments").value = upload_number;
  34.      upload_number++;
  35.      }
  36.  
  37. function removeFileInput(i)
  38. {
  39.     var elm = document.getElementById("f"+i);
  40.     document.getElementById("moreUploads").removeChild(elm);
  41.     for (j = i + 1; j < upload_number; j++) {
  42.     link = document.getElementById("l"+j);
  43.     div = document.getElementById("f"+j);
  44.     attachment = document.getElementsByName("attachment"+j)[0];
  45.     description = document.getElementsByName("description"+j)[0];
  46.     attachment.setAttribute("name","attachment"+(j - 1));
  47.     description.setAttribute("name","description"+(j -1));
  48.     link.setAttribute("id","l"+(j-1));
  49.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  50.     div.setAttribute("id","f"+(j-1));
  51.     }
  52.     upload_number = upload_number - 1 ;
  53.     document.getElementById("totalAttachments").value = upload_number - 1;
  54.  
  55. }

here is the html

Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
  9.           <input type="hidden" name="uploads" id="uploads" value="1">
Thank you again for all the help :),
Rach
Aug 26 '08 #53

acoder
Expert Mod 15k+
P: 16,027
You don't need the total-attachments field anymore because you can work it out from the new hidden field. In the add function, you only need to change the last line to change the uploads hidden field instead of totalAttachments (instead of adding 1, you need to add a number as a string separated by commas, e.g.
Expand|Select|Wrap|Line Numbers
  1. ...value += "," + upload_number;
. In the remove function, you can comment out or get rid of the for loop - the renaming is not needed any more. Again, you need to change the total attachments line to remove the upload number from the list of upload numbers.
Aug 27 '08 #54

100+
P: 769
Hey Acoder,

alrighty well here is the changes i made.

Expand|Select|Wrap|Line Numbers
  1.   var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("a");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8. <!---     var br = document.createElement("br");--->
  9.      var des = document.createTextNode("Description")
  10.      try {
  11.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  12.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  13. } catch (e) {
  14.   file = document.createElement("input");
  15.   text = document.createElement("input");
  16. }
  17.      d.setAttribute("id", "f"+upload_number);
  18.      file.setAttribute("type", "file");
  19.      file.setAttribute("name", "attachment"+upload_number);
  20.      text.setAttribute("type", "text");
  21.      text.setAttribute("name", "description"+upload_number);
  22.      l.setAttribute("id", "l"+upload_number);  
  23.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  24.      l.appendChild(document.createTextNode("Remove"));
  25.      d.setAttribute("id", "f"+upload_number);
  26.      d.appendChild(file);
  27. <!---     d.appendChild(br);--->
  28.      d.appendChild(des);
  29.      d.appendChild(text);
  30.      d.appendChild(l);
  31.      document.getElementById("moreUploads").appendChild(d);
  32.      document.getElementById("uploads").value += "," upload_number;
  33.      upload_number++;
  34.      }
  35.  
  36. function removeFileInput(i)
  37. {
  38.     var elm = document.getElementById("f"+i);
  39.     document.getElementById("moreUploads").removeChild(elm);
  40.     upload_number = upload_number - 1 ;
  41.     document.getElementById("uploads").value = upload_number - 1;
  42.  
  43. }
html
Expand|Select|Wrap|Line Numbers
  1. <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
the only thing i am concerned about is taking out totalAttachments since it appears in the action page. are you sure taking out totalAttachments won't mess with the action page? here whats on the action page

Expand|Select|Wrap|Line Numbers
  1. <cfif structKeyExists(FORM, "totalAttachments")>
  2.      <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  3.      <cfparam name="FORM.totalAttachments" default="0">
  4.      <cfloop from="1" to="#form.totalAttachments#" index="counter">
  5.       <cfset currentDescription = form["description" & counter]>
  6.       <!---verify the form field exists --->
  7.      <cfif structKeyExists(FORM, "attachment"& counter)>
  8.           <!--- try and upload it ...--->
  9.           <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  10.           <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  11.           <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  12.               <cfquery name="attachment" datasource="CustomerSupport">
  13.     exec usp_CS_Insertattachments
  14. '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  15. </cfquery>
  16.      </cfif>
  17.      </cfloop>
  18. </cfif>
Thank you for the help,
Rach
Aug 27 '08 #55

acoder
Expert Mod 15k+
P: 16,027
You'll have to modify the action page too for this to work. Instead of using totalAttachments, use the uploads string value which will be a comma-delimited string to determine which fields contain the upload information. If you can't get that working, post in the original Coldfusion forum thread.

Just one more thing: the remove code isn't quite correct. You need to remove the upload number from the field value using replace() and you don't need to decrease the upload_number any longer.
Aug 27 '08 #56

100+
P: 769
Hey Acoder,

all definitely post the coldfusion part back in the previous question. because i understand the part about changing the name but the part about the comma-delimited string part has me a bit confused.

but for the remove part do i need to do it like this

what was previously written
Expand|Select|Wrap|Line Numbers
  1. function removeFileInput(i)
  2. {
  3.     var elm = document.getElementById("f"+i);
  4.     document.getElementById("moreUploads").removeChild(elm);
  5.     upload_number = upload_number - 1 ;
  6.     document.getElementById("uploads").value = upload_number - 1;
  7.  
  8. }

what i changed
Expand|Select|Wrap|Line Numbers
  1. {
  2.     var elm = document.getElementById("f"+i);
  3.     document.getElementById("moreUploads").removeChild(elm);
  4.     upload_number = upload_number - 1 ;
  5.     document.getElementById("uploads").value = replace(upload_number);
  6.  
  7. }
Thank you,
Rach
Aug 27 '08 #57

acoder
Expert Mod 15k+
P: 16,027
Not quite. You don't need to decrease the upload_number. In fact, you shouldn't, so remove that line. replace() is a string method, so you need to use it like this:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
Aug 27 '08 #58

100+
P: 769
Hey Acoder,

Alrighty should this be the whole thing in a nut shell?

Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("a");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8. <!---     var br = document.createElement("br");--->
  9.      var des = document.createTextNode("Description")
  10.      try {
  11.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  12.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  13. } catch (e) {
  14.   file = document.createElement("input");
  15.   text = document.createElement("input");
  16. }
  17.      d.setAttribute("id", "f"+upload_number);
  18.      file.setAttribute("type", "file");
  19.      file.setAttribute("name", "attachment"+upload_number);
  20.      text.setAttribute("type", "text");
  21.      text.setAttribute("name", "description"+upload_number);
  22.      l.setAttribute("id", "l"+upload_number);  
  23.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  24.      l.appendChild(document.createTextNode("Remove"));
  25.      d.setAttribute("id", "f"+upload_number);
  26.      d.appendChild(file);
  27. <!---     d.appendChild(br);--->
  28.      d.appendChild(des);
  29.      d.appendChild(text);
  30.      d.appendChild(l);
  31.      document.getElementById("moreUploads").appendChild(d);
  32.      document.getElementById("uploads").value += "," upload_number;
  33.      upload_number++;
  34.      }
  35.  
  36. function removeFileInput(i)
  37. {
  38.     var elm = document.getElementById("f"+i);
  39.     document.getElementById("moreUploads").removeChild(elm);
  40. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  41.  
  42. }
html
Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
the reason i ask is because right now if i click add attachment it wont let me even add another attachment. an i took it to firefox and it said addFileInput is not defined.

Thank you,
Rach
Aug 27 '08 #59

acoder
Expert Mod 15k+
P: 16,027
Ah, an elementary mistake:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("uploads").value += "," + upload_number;
Aug 27 '08 #60

100+
P: 769
Hey Acoder,

Alrighty that works right now (yay). Just got to get the server-side part going which i posted back in coldfusion. But i do got one last question to ask on this. When you click add attachment (to upload multiple files) it puts the word description really close to the file input an i was wondering how would you put some space between the word description and the file input? i been trying to figure it out by myself but i really can't get it. i figured out how to do a break (which you will see is commented out). but i can't figure out how i would just simply space it out.

Expand|Select|Wrap|Line Numbers
  1. var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("a");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8. <!---     var br = document.createElement("br");--->
  9.      var des = document.createTextNode("Description")
  10.      try {
  11.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  12.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  13. } catch (e) {
  14.   file = document.createElement("input");
  15.   text = document.createElement("input");
  16. }
  17.      d.setAttribute("id", "f"+upload_number);
  18.      file.setAttribute("type", "file");
  19.      file.setAttribute("name", "attachment"+upload_number);
  20.      text.setAttribute("type", "text");
  21.      text.setAttribute("name", "description"+upload_number);
  22.      l.setAttribute("id", "l"+upload_number);  
  23.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  24.      l.appendChild(document.createTextNode("Remove"));
  25.      d.setAttribute("id", "f"+upload_number);
  26.      d.appendChild(file);
  27. <!---     d.appendChild(br);--->
  28.      d.appendChild(des);
  29.      d.appendChild(text);
  30.      d.appendChild(l);
  31.      document.getElementById("moreUploads").appendChild(d);
  32.      document.getElementById("uploads").value += "," + upload_number;
  33.      upload_number++;
  34.      }

Thank you so much for all the help on this :),
Rach
Aug 27 '08 #61

acoder
Expert Mod 15k+
P: 16,027
To add space, you can use the non-breaking space character, but it won't work with createTextNode(). For that, you'll need to use the unicode character \u00a0:
Expand|Select|Wrap|Line Numbers
  1. var nbsp = document.createTextNode("\u00a0");
then append this.
Aug 27 '08 #62

100+
P: 769
Hey Acoder,

wow that kills me. I was trying that exact thing an couldn't get it to work!!! i didn't realize you couldn't do it with createTextNode() which now it makes so much since why it didn't work! But THANK YOU SO MUCH for all the help!!! you truely are awesome :) THANK YOU, THANK YOU!!!!

Rach

In case anyone else wants to see the resolution to the javascript an html here it is.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.    var upload_number = 2;
  3.      function addFileInput()
  4.      {
  5.      var d = document.createElement("div");
  6.      var l = document.createElement("a");
  7.      var file = document.createElement("input");
  8.      var text = document.createElement("input");
  9.      var nbsp = document.createTextNode("\u00a0");
  10.      var space = document.createTextNode("\u00a0");
  11. <!---     var br = document.createElement("br");--->
  12.      var des = document.createTextNode("Description")
  13.      try {
  14.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  15.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  16. } catch (e) {
  17.   file = document.createElement("input");
  18.   text = document.createElement("input");
  19. }
  20.      d.setAttribute("id", "f"+upload_number);
  21.      file.setAttribute("type", "file");
  22.      file.setAttribute("name", "attachment"+upload_number);
  23.      text.setAttribute("type", "text");
  24.      text.setAttribute("name", "description"+upload_number);
  25.      l.setAttribute("id", "l"+upload_number);  
  26.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  27.      l.appendChild(document.createTextNode("Remove"));
  28.      d.setAttribute("id", "f"+upload_number);
  29.      d.appendChild(file);
  30.      d.appendChild(nbsp);
  31.      d.appendChild(des);
  32. <!---     d.appendChild(br);--->
  33.       d.appendChild(space);
  34.      d.appendChild(text);
  35.      d.appendChild(l);
  36.      document.getElementById("moreUploads").appendChild(d);
  37.      document.getElementById("uploads").value += "," + upload_number;
  38.      upload_number++;
  39.      }
  40.  
  41. function removeFileInput(i)
  42. {
  43.     var elm = document.getElementById("f"+i);
  44.     document.getElementById("moreUploads").removeChild(elm);
  45. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  46. }
  47. </script>
html
Expand|Select|Wrap|Line Numbers
  1. <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
Aug 27 '08 #63

acoder
Expert Mod 15k+
P: 16,027
OK, I guess that means it worked ;)

I think there's one last thing you had left - to replace the link with a button as shown by Ramanan above.
Aug 27 '08 #64

100+
P: 769
Acoder,

yeah your right an i been playing with it. But i messed it up :(. i got the button to appear but wont let me remove any.

Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("input");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8.      var nbsp = document.createTextNode("\u00a0");
  9.      var space = document.createTextNode("\u00a0");
  10. <!---     var br = document.createElement("br");--->
  11.      var des = document.createTextNode("Description")
  12.      try {
  13.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  14.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  15. } catch (e) {
  16.   file = document.createElement("input");
  17.   text = document.createElement("input");
  18. }
  19.      d.setAttribute("id", "f"+upload_number);
  20.      file.setAttribute("type", "file");
  21.      file.setAttribute("name", "attachment"+upload_number);
  22.      text.setAttribute("type", "text");
  23.      text.setAttribute("name", "description"+upload_number);
  24.      l.setAttribute("id", "l"+upload_number);  
  25.      l.type="button";
  26.      l.value="Remove";
  27.      l.onclick="javascript:removeFileInput("+upload_number+")";
  28. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  29. <!---     l.appendChild(document.createTextNode("Remove"));--->
  30.      d.setAttribute("id", "f"+upload_number);
  31.      d.appendChild(file);
  32.      d.appendChild(nbsp);
  33.      d.appendChild(des);
  34. <!---     d.appendChild(br);--->
  35.       d.appendChild(space);
  36.      d.appendChild(text);
  37.      d.appendChild(l);
  38.      document.getElementById("moreUploads").appendChild(d);
  39.      document.getElementById("uploads").value += "," + upload_number;
  40.      upload_number++;
  41.      }

Thank you,
Rach
Aug 27 '08 #65

100+
P: 769
i figured out how to get this to work in internet explorer and firefox!

Thank you again for all the help acoder!

here is the FINAL results to the javascript (html is same as above)

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.    var upload_number = 2;
  3.      function addFileInput()
  4.      {
  5.      var d = document.createElement("div");
  6.      var l = document.createElement("input");
  7.      var file = document.createElement("input");
  8.      var text = document.createElement("input");
  9.      var nbsp = document.createTextNode("\u00a0");
  10.      var space = document.createTextNode("\u00a0");
  11. <!---     var br = document.createElement("br");--->
  12.      var des = document.createTextNode("Description")
  13.      try {
  14.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  15.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  16.    l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+upload_number+");'>");
  17. } catch (e) {
  18.   file = document.createElement("input");
  19.   text = document.createElement("input");
  20. }
  21.      d.setAttribute("id", "f"+upload_number);
  22.      file.setAttribute("type", "file");
  23.      file.setAttribute("name", "attachment"+upload_number);
  24.      text.setAttribute("type", "text");
  25.      text.setAttribute("name", "description"+upload_number);
  26.      l.setAttribute("id", "l"+upload_number);  
  27.      l.setAttribute("type", "button");
  28.      l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
  29.  
  30.      l.type="button";
  31.      l.value="Remove";
  32.      l.onclick="javascript:removeFileInput("+upload_number+")";
  33. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  34. <!---     l.appendChild(document.createTextNode("Remove"));--->
  35.      d.setAttribute("id", "f"+upload_number);
  36.      d.appendChild(file);
  37.      d.appendChild(nbsp);
  38.      d.appendChild(des);
  39. <!---     d.appendChild(br);--->
  40.       d.appendChild(space);
  41.      d.appendChild(text);
  42.      d.appendChild(l);
  43.      document.getElementById("moreUploads").appendChild(d);
  44.      document.getElementById("uploads").value += "," + upload_number;
  45.      upload_number++;
  46.      }
  47.  
  48. function removeFileInput(i)
  49. {
  50.     var elm = document.getElementById("f"+i);
  51.     document.getElementById("moreUploads").removeChild(elm);
  52. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  53.  
  54. }
  55.  
  56. </script>
Aug 27 '08 #66

acoder
Expert Mod 15k+
P: 16,027
Try:
Expand|Select|Wrap|Line Numbers
  1. l.onclick=function() {removeFileInput(upload_number)};
or you could create a variable function reference and assign that instead.

Edit: Oh, I posted this without realising you'd solved it. Well done.
Aug 27 '08 #67

100+
P: 769
Try:
Expand|Select|Wrap|Line Numbers
  1. l.onclick=function() {removeFileInput(upload_number)};
or you could create a variable function reference and assign that instead.

Edit: Oh, I posted this without realising you'd solved it. Well done.
Hey Acoder,

well i ran into one more problem. if you wouldn't mind solving it.
I tried to send the form without uploading a file an got this error
Expand|Select|Wrap|Line Numbers
  1. Error processing CFFILE
  2.  
  3. No data was received in the uploaded file '\' Saving empty (zero-length) files is prohibitted. Please make sure you specified the correct file. 
how would i send the form without having a file in it?

heres the javascript
Expand|Select|Wrap|Line Numbers
  1.  var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("input");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8.      var nbsp = document.createTextNode("\u00a0");
  9.      var space = document.createTextNode("\u00a0");
  10. <!---     var br = document.createElement("br");--->
  11.      var des = document.createTextNode("Description")
  12.      try {
  13.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  14.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  15.    l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+upload_number+");'>");
  16. } catch (e) {
  17.   file = document.createElement("input");
  18.   text = document.createElement("input");
  19. }
  20.      d.setAttribute("id", "f"+upload_number);
  21.      file.setAttribute("type", "file");
  22.      file.setAttribute("name", "attachment"+upload_number);
  23.      text.setAttribute("type", "text");
  24.      text.setAttribute("name", "description"+upload_number);
  25.      l.setAttribute("id", "l"+upload_number);  
  26.      l.setAttribute("type", "button");
  27.      l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
  28.  
  29.      l.type="button";
  30.      l.value="Remove";
  31.      l.onclick="javascript:removeFileInput("+upload_number+")";
  32. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  33. <!---     l.appendChild(document.createTextNode("Remove"));--->
  34.      d.setAttribute("id", "f"+upload_number);
  35.      d.appendChild(file);
  36.      d.appendChild(nbsp);
  37.      d.appendChild(des);
  38. <!---     d.appendChild(br);--->
  39.       d.appendChild(space);
  40.      d.appendChild(text);
  41.      d.appendChild(l);
  42.      document.getElementById("moreUploads").appendChild(d);
  43.      document.getElementById("uploads").value += "," + upload_number;
  44.      upload_number++;
  45.      }
  46.  
  47. function removeFileInput(i)
  48. {
  49.     var elm = document.getElementById("f"+i);
  50.     document.getElementById("moreUploads").removeChild(elm);
  51. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  52.  
  53. }
heres the html
Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
thank you again for all the help,
Rach
Aug 28 '08 #68

acoder
Expert Mod 15k+
P: 16,027
This is actually a Coldfusion problem and the error-checking should be done on the server-side, though you can help the user by checking on the client-side too. This would be achieved by having uploads set to empty to begin with. When you select a file for the first attachment, set it to "1". Just a note that you should never depend on JavaScript error-checking.

For the Coldfusion error-checking, it's back to the other thread.
Aug 28 '08 #69

68 Replies

Post your reply

Sign in to post your reply or Sign up for a free account.