473,740 Members | 10,529 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to add remove to this.

769 Contributor
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 #1
68 5424
acoder
16,027 Recognized Expert Moderator MVP
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?
Aug 20 '08 #2
bonneylake
769 Contributor
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
Aug 20 '08 #3
acoder
16,027 Recognized Expert Moderator MVP
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:
Expand|Select|Wrap|Line Numbers
  1. ...     l.setAttribute("href", "javascript:removeFileInput(upload_number+");");
  2. ...
  3. function removeFileInput(i)
  4. {
  5. // i is the upload number to delete and to loop from; to get the ID, just add "f":
  6.     var elm = document.getElementById("f"+i);
  7. ...
Aug 20 '08 #4
bonneylake
769 Contributor
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?

Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 1;
  2.    for (i = 0; i <= 5; i++){
  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("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("f"+i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     upload_number = upload_number - 1
  30. }
  31. }
  32.  
Thanks in advance (an thank you for your patience),
Rach
Aug 20 '08 #5
acoder
16,027 Recognized Expert Moderator MVP
Sorry, that was a slight mistake on my part. It should be:
Expand|Select|Wrap|Line Numbers
  1. 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.
Aug 20 '08 #6
bonneylake
769 Contributor
Acoder,

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


Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 1;
  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.      d.setAttribute("id", "f"+upload_number);
  9.      file.setAttribute("type", "file");
  10.      file.setAttribute("name", "attachment"+upload_number);
  11.      text.setAttribute("type", "text");
  12.      text.setAttribute("name", "description"+upload_number);
  13.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  14.      l.appendChild(document.createTextNode("Remove"));
  15.      d.setAttribute("id", "f"+upload_number);
  16.      d.appendChild(file);
  17.      d.appendChild(text);
  18.      d.appendChild(l);
  19.      document.getElementById("moreUploads").appendChild(d);
  20.      document.getElementById("totalAttachments").value = upload_number;
  21.      upload_number++;
  22.      }
  23.  
  24. for (i+1; i <= 5; i++){
  25. function removeFileInput(i)
  26. {
  27.     var elm = document.getElementById("f"+i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     attachment+upload_number = attachment+upload_number - 1;
  30.     description+upload_number = description+upload_number -1;
  31.     upload_number = upload_number - 1
  32.  
  33. }}
i think i might of did the attachment an description wrong does it need to be like above or like attachment=atta chment - 1 or am i missing something else?

Thank you in advance :),
Rach
Aug 20 '08 #7
acoder
16,027 Recognized Expert Moderator MVP
The loop needs to be inside the function, not outside.

To get the file and text elements, you can use getElementsByNa me() or give them ids and use getElementById( ), e.g.:
Expand|Select|Wrap|Line Numbers
  1. function removeFileInput(i)
  2. {
  3.     var elm = document.getElementById("f"+i);
  4.     document.getElementById("moreUploads").removeChild(elm);
  5.     for (j = i + 1; j <= upload_number; j++) {
  6.     attachment = document.getElementsByName("attachment"+j)[0];
  7.     description = document.getElementsByName("description"+j)[0];
  8.     attachment.setAttribute("name","attachment"+(j - 1));
  9.     description.setAttribute("name","description"+(j -1));
  10.     }
  11.     upload_number = upload_number - 1
  12. }
Aug 20 '08 #8
bonneylake
769 Contributor
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


Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 1;
  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.      d.setAttribute("id", "f"+upload_number);
  9.      file.setAttribute("type", "file");
  10.      file.setAttribute("name", "attachment"+upload_number);
  11.      text.setAttribute("type", "text");
  12.      text.setAttribute("name", "description"+upload_number);
  13.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  14.      l.appendChild(document.createTextNode("Remove"));
  15.      d.setAttribute("id", "f"+upload_number);
  16.      d.appendChild(file);
  17.      d.appendChild(text);
  18.      d.appendChild(l);
  19.      document.getElementById("moreUploads").appendChild(d);
  20.      document.getElementById("totalAttachments").value = upload_number;
  21.      upload_number++;
  22.      }
  23.  
  24.  
  25. function removeFileInput(i)
  26. {
  27.     var elm = document.getElementById("f"+i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     for (j = i + 1; j <= upload_number; j++) {
  30.     attachment = document.getElementsByName("attachment"+j)[0];
  31.     description = document.getElementsByName("description"+j)[0];
  32.     attachment.setAttribute("name","attachment"+(j - 1));
  33.     description.setAttribute("name","description"+(j -1));
  34.     }
  35.     upload_number = upload_number - 1;
  36. }
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.
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">
Thank you again for all the help :),
Rach
Aug 20 '08 #9
RamananKalirajan
608 Contributor
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


Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 1;
  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.      d.setAttribute("id", "f"+upload_number);
  9.      file.setAttribute("type", "file");
  10.      file.setAttribute("name", "attachment"+upload_number);
  11.      text.setAttribute("type", "text");
  12.      text.setAttribute("name", "description"+upload_number);
  13.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  14.      l.appendChild(document.createTextNode("Remove"));
  15.      d.setAttribute("id", "f"+upload_number);
  16.      d.appendChild(file);
  17.      d.appendChild(text);
  18.      d.appendChild(l);
  19.      document.getElementById("moreUploads").appendChild(d);
  20.      document.getElementById("totalAttachments").value = upload_number;
  21.      upload_number++;
  22.      }
  23.  
  24.  
  25. function removeFileInput(i)
  26. {
  27.     var elm = document.getElementById("f"+i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     for (j = i + 1; j <= upload_number; j++) {
  30.     attachment = document.getElementsByName("attachment"+j)[0];
  31.     description = document.getElementsByName("description"+j)[0];
  32.     attachment.setAttribute("name","attachment"+(j - 1));
  33.     description.setAttribute("name","description"+(j -1));
  34.     }
  35.     upload_number = upload_number - 1;
  36. }
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.
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">
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="Attachme nt" onclick="doThis ()">
<br/>
<table id="myTable" border="1" cellspacing="5" cellpadding="5" >
</table>
</body>
</html>

<script type="text/javascript">
function doThis()
{
var myTab = document.getEle mentById('myTab le');
var xx= document.create Element('input' );
xx.type="file";

var row=myTab.rows. length;
var y=myTab.insertR ow(row) ;
var b=y.insertCell( 0);
b.appendChild(x x);
b.innerHTML = b.innerHTML;

var xy=document.cre ateElement('inp ut');
xy.type="button ";
xy.value="Remov e";
xy.onclick="rem oveThis(this)";
var c=y.insertCell( 1);
c.appendChild(x y);
c.innerHTML=c.i nnerHTML;
}
function removeThis(ths)
{
var rowIndex = ths.parentNode. parentNode.rowI ndex;
document.getEle mentById('myTab le').deleteRow( rowIndex);
}
</script>[/HTML]

Regards
Ramanan Kalirajan
Aug 21 '08 #10

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

Similar topics

23
4047
by: Stan Cook | last post by:
I was trying to take a list of files in a directory and remove all but the ".dbf" files. I used the following to try to remove the items, but they would not remove. Any help would be greatly appreciated. x = 0 for each in _dbases: if each <> ".dbf": del each # also tried: del _dbases x = x + 1 I must be doing something wrong, but it acts as though it is....
4
10403
by: wk6pack | last post by:
Hi, I'm trying to use the remove method on a string but it doesnt seem to change it. name.remove(instr(name," ")-1,1) If name = bon jovi, I would like bonjovi but I get bon jovi in the msgbox to display it. I thought it suppose to remove the character space?
3
5783
by: Venkat | last post by:
Hi All, Currently i guess rename and remove are not supported using fstream. How do i rename or remove a file? regards, Venkat
6
4950
by: Arne Claus | last post by:
Hi If've just read, that remove() on a list does not actually remove the elements, but places them at the end of the list (according to TC++STL by Josuttis). It also says, that remove returns a new, logical end pointer, so that the following myList::iterator end = myListObj.remove(myInt); myListObj.erase(end, myListObj.end()); is possible and removes the "invalid" items at the end of the list.
6
7194
by: tshad | last post by:
Is there a reason to use session.remove over session.contents.remove? Don't they both remove the key and data from the contents collection? I assume that session(x) = nothing does essentially the same thing but is actually deleted later by the GC. Thanks, Tom
6
6005
by: sam_cit | last post by:
Hi Everyone, I'm using remove() function to delete a file, and i observed the following behavior, Concerned file : sample.txt Operation : i open the file in read mode and don't close the file. remove() returns -1 and the file is not deleted. The above operation is successful when i close the file just before
1
6230
by: ken | last post by:
How to remove specified cookie (via a given name) in cookie jar? I have the following code, but how can I remove a specified cookie in the cookie jar? cj = cookielib.LWPCookieJar() if cj is not None: if os.path.isfile(COOKIEFILE): print 'Loading Cookie--------------' cj.load(COOKIEFILE)
10
18077
by: =?Utf-8?B?YmJn?= | last post by:
Hi all, I wanted to go through each entry(?) of ArrayList and remove some particular entry. So I tried following but it throws exception at runtime: foreach (myEntry entry in myArrayList) { // do something... if (entry.fieldA == 0)
4
9594
by: Yansky | last post by:
Got a quick n00b question. What's the difference between del and remove?
20
5808
by: Nates | last post by:
I have a .bas file saved locally that I load into my Acces project to run a particular sub. I use the following code to load the module (which works fine): I use the following loop to remove the module: The above works fine (both adding the module and subsequantly removing it) provided I do not run any code within the module once it is loaded. The second I use code within the module the deletion loop does not seem to remove the...
0
8969
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
1
9272
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9211
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8218
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6756
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6056
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4826
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3286
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2195
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.