Multiple File Upload with CFFILE - Making it Pretty
(Page 3 of 3 )
Below is the complete code with some final additions that will do a CFLOCATION back to the form page and display a message on the screen showing which files were uploaded and which form fields were blank.
Final Code:
1 <cfset numberoffields = 10>
2 <cfif isdefined("form.upload")>
3 <cfset message = "">
4 <cfloop index="i" from="1" to="#variables.numberoffields#" step="1">
5 <cfset filename = "form.file" & #i#>
6 <cfif evaluate(variables.filename) neq "">
7 <cffile action="UPLOAD"
8 destination="c:cfusionmxwwwrootNAPAfiles"
9 nameconflict="OVERWRITE"
10 filefield="#variables.filename#">
11 <cfset message = message & ",File%20#i#%20(#file.serverfile#)%20was%20uploaded">
12 <cfelse>
13 <cfset message = message & ",File%20#i#%20was%20empty">
14 </cfif>
15 </cfloop>
16 <cflocation url="FileUpload.cfm?msg=#variables.message#">
17
18 <cfelse>
19 <h2>File Upload</h2>20 <cfif isdefined("url.msg")>
21 <div style="color:#FF0000;">
22 <cfloop list="#url.msg#" index="i">
23 <cfoutput>#i#</cfoutput><br />
24 </cfloop>
25 </div>
26 </cfif>
27 <form action="FileUpload.cfm" enctype="multipart/form-data" method="post">
28 <cfloop index="i" from="1" to="#variables.numberoffields#" step="1">
29 <cfset filename = "file" & #i#>
30 <input type="File" name="<cfoutput>#variables.filename#</cfoutput>" /><br />
31 </cfloop>
32 <input type="Submit" name="upload" value="upload">
33 </form>
34 </cfif>
Let's briefly walk through the entire code and point out the changes. Let's start with the server side. The first new piece of code (line 3) is the CFSET, I am just initializing a list variable that will contain the message sent back to the client. Lines 4 through 10 are the same as before. Line 11 concatenates a message onto the list variable (message). The message we are creating is ",File (somefile.jpg) was uploaded) ". We are putting %20 for space markers (it is the hexadecimal to ascii equivalent). Line 12 is a CFELSE which handles the form fields that are blank. Line 13 creates a message like ", File4 was empty". So it just keeps looping, creating the message until the loop terminates then it goes to line 16, where it does a CFLOCATION back to the client side.
On the client side, the only changes made are to add the CFIF statement at the top (lines 20 to 26) to check if there are any messages sent from client part of the page. If there is a URL.MSG, it loops through the list because when we were creating the Message on the client side we kept on adding commas so that it would be a list (and thus easy to loop through).
Conclusion
So we started out with the goal of creating a versatile form for uploading multiple files. We accomplished the task by using two types of CFLOOP (an index loop and a list loop), and a couple other items of interest as needed. You can now use this form to accomplish all your uploading needs, and can easily change it so it displays one field or one thousand. A note of interest, if you also want to enter a record into a database that the image was uploaded and what the name is, you could put a CFQUERY statement before or after line 11. When you do the insert statement, use #file.serverfile# as the filename and not #form.filename#.
Have fun uploading, while being mindful of your disk space quota of course.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
