Home arrow ColdFusion arrow Page 2 - Multiple File Upload with CFFILE

Multiple File Upload with CFFILE

The author explains how to upload documents using the CFFILE tag in ColdFusion. He covers making a form that has an infinite number of fields, using CFLOOP. He starts with getting basic functionality, then moves on to the "fun stuff" -- multiple file upload.

Author Info:
By: Charles Kaufmann
Rating: 5 stars5 stars5 stars5 stars5 stars / 76
May 24, 2004
  1. · Multiple File Upload with CFFILE
  2. · Multiple Upload
  3. · Making it Pretty

print this article

Multiple File Upload with CFFILE - Multiple Upload
(Page 2 of 3 )

This is where it should start to get interesting. On the client side, we want to be able to upload multiple files (getting back to that title again). I want to create separate fields for each file you want to upload. I could simply copy and past a bunch of form fields and put a different name in each, but since I am so "ambitiously lazy" I am going to CFLOOP through it all. And furthermore, because I am really "efficient" I will use a variable that will determine the amount of form fields that will show up. This in the end will make it more efficient and more reusable. So before any of the CFIF statement I am going to place the following:

<cfset numberoffields = 10>

Now for the Form. We are going to use almost exactly the same form as before with a couple of additions. Here it is in its entirety (with line numbers added for clarity):

1  <form action="FileUpload.cfm" enctype="multipart/form-data" method="post">
2    <cfloop index="i" from="1" to="#variables.numberoffields#" step="1">
3      <cfset filename = "file" & #i#>
4      <input type="File" name="<cfoutput>#variables.filename#</cfoutput>" /><br />
5    </cfloop>
6     <input type="Submit" name="upload" value="upload" />
7  </form>

Now let's walk through that briefly. Both FORM tags and the SUBMIT button are the same as before so we don't have to worry about them. Before the Input field, we put a CFLOOP. For this CFLOOP we are going to use what is called an Index Loop. This means it is going to count each time it loops. Here are the attributes of the loop:

INDEX - the variable name you assign to the loop that keeps track of the counting (i.e. in the above example "i" get incremented by 1 value each loop).

FROM - the number you want to start counting at.

TO - the maximum number to count to.

STEP - the increments to want to count with (i.e. if you put a 2 there it would count 2,4,6,8 etc.)

So now we know that the loop is going to count from 1 to 10 (the value you set the variable "numberoffields" to). Since in the TO field you referenced a variable, you can just change the variable and it changes in the loop. Now onto line 3. Since we are creating the number of form fields on the fly, we also have to create the names of those fields on the fly as well. Line 3 uses the CFSET to create a variable that creates that field name every time it loops. As you can see I concatenate the string "file" with the Index value to create the name (you could use any word other than "File"). So as a result the variable filename will be set to file1, file2, file3 etc. The only thing left to do is use the variable and that is done in line 4. We simply CFOUTPUT the value of the variable into the form field name. That completes the client part of the form.

Now to the server side code.

1  <cfloop index="i" from="1" to="#variables.numberoffields#" step="1">
2    <cfset filename = "form.file" & #i#>
3    <cfif evaluate(variables.filename) neq "">
4       <cffile action="UPLOAD"
5          destination="c:cfusionmxwwwroottestfiles"
6          nameconflict="OVERWRITE"
7          filefield="#variables.filename#">
8     </cfif>
9  </cfloop>

So let's walk through the above server side code. Lines 1 and 2 should look familiar, they are exactly the same as the client side codes lines 2 and 3. So you are just setting up the loop and setting up the form field values. Line 3 checks to see if the form field is blank or not. If the form field is blank, it skips the upload. We will do a little more with that later. Then lines 4 through 7 are the same file upload as before, the only change is that you substitute the value of the variable filename, in the FILEFIELD attribute.

That is it! Now you can have a form that can have an infinite number of file fields, which you can adjust by editing one number (the variable numberoffields), that will upload files to your web site.

blog comments powered by Disqus

- Adobe ColdFusion Just Got More RAD
- How to Access a SQL Anywhere Database with C...
- CFXML: Probing XMLDOM in ColdFusion
- Creating a Web Service with ColdFusion: the ...
- CFAjax: What it is and How to Use it
- Querying SQL 2000 Server from ColdFusion
- Introduction to ColdFusion Markup Language, ...
- Introduction to ColdFusion Markup Language
- Databases and Dreamweaver MX 2004, concluded
- Databases and Dreamweaver MX 2004
- Welcome to Coldfusion MX 6.1, concluded
- Welcome to Coldfusion MX 6.1
- What You Must Know About ColdFusion Flow-Con...
- What You Must Know About Operators in ColdFu...
- Everything You Must Know About ColdFusion Va...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials