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.
Next: Making it Pretty >>
More ColdFusion Articles
More By Charles Kaufmann
