Ask Ben: Uploading Multiple Files Using ColdFusion
After posting a while back about uploading a file and emailing it using ColdFusion, I was asked to put up a demo of how to upload multiple files using ColdFusion. For this demo, I am concentrating only on the upload aspect and not worrying about any emailing functionality as I believe that adding that is easy after the upload is complete.
Before I show the code, I just want to preempt some stuff. For starters, I am using a LOT Of error handling via ColdFusion's CFTry / CFCatch tags. In practice, I don't really use that much error handling. However, I am just trying to instill some good practice here and drive home the fact that when dealing with a third party service (the file system), there is always potential for errors to occur. And, the truth is, I should really use better error handling anyway.
That being said, this code is only partially tested as I could not generate any errors on the file upload. I think the error handling looks good, but again, not fully tested. The best that I could do was to change the NameConflict attribute in the CFFile tag from MakeUnique to Error and upload two files of the same name, which threw the following error:
There was a problem uploading file #2: File overwriting is not permitted in this instance of the CFFile tag.
So, it seems to be working; but, I just want to stress that I couldn't generate a file system error and therefore some of this code is still theoretical.
Additionally, I build the page such that the number of files to be uploaded can be variable. Right now, it is set to have 5 file fields, but that can be set using the REQUEST.FileCount variable. I know that this kind of stuff is handled very Web 2.0 dynamic style these days, but for this demo, I wanted to keep it really simple and straight forward.
That being said, here is the code:
<!---
Set the number of files that can uploaded in a single
form submission.
--->
<cfset REQUEST.FileCount = 5 />
<!--- Set the destination folder for uploads. --->
<cfset REQUEST.UploadPath = ExpandPath( "./uploads/" ) />
<!--- Param the appropriate number of file fields. --->
<cfloop
index="intFileIndex"
from="1"
to="#REQUEST.FileCount#"
step="1">
<!--- Param file value. --->
<cfparam
name="FORM.file#intFileIndex#"
type="string"
default=""
/>
</cfloop>
<!--- Param upload flag. --->
<cftry>
<cfparam
name="FORM.submitted"
type="numeric"
default="0"
/>
<cfcatch>
<cfset FORM.submitted = 0 />
</cfcatch>
</cftry>
<!--- Set up an array to hold errors. --->
<cfset arrErrors = ArrayNew( 1 ) />
<!--- Check to see if the form has been submitted. --->
<cfif FORM.submitted>
<!---
Here is where we would validate the data; however,
in this example, there really isn't anything to
validate. In order to validate something, we are going
to require at least one file to be uploaded!
--->
<!---
Since we are going to require at least one file, I am
going to start off with an error statement. Then, I am
gonna let the form tell me to DELETE IT.
--->
<cfset ArrayAppend(
arrErrors,
"Please select at least one file to upload"
) />
<!--- Loop over the files looking for a valid one. --->
<cfloop
index="intFileIndex"
from="1"
to="#REQUEST.FileCount#"
step="1">
<cfif Len( FORM[ "file#intFileIndex#" ] )>
<!--- Clear the errors array. --->
<cfset ArrayClear( arrErrors ) />
<!--- Break out of loop. --->
<cfbreak />
</cfif>
</cfloop>
<!---
Check to see if there were any form validation
errors. If there are no errors, then we can continue
to process the form. Otherwise, we are going to skip
this and just let the page render again.
--->
<cfif NOT ArrayLen( arrErrors )>
<!---
Create an array to hold the list of uploaded
files.
--->
<cfset arrUploaded = ArrayNew( 1 ) />
<!---
Loop over the form fields and upload the files
that are valid (have a length).
--->
<cfloop
index="intFileIndex"
from="1"
to="#REQUEST.FileCount#"
step="1">
<!--- Check to see if file has a length. --->
<cfif Len( FORM[ "file#intFileIndex#" ] )>
<!---
When uploading, remember to use a CFTry /
CFCatch as complications might be encountered.
--->
<cftry>
<cffile
action="upload"
destination="#REQUEST.UploadPath#"
filefield="file#intFileIndex#"
nameconflict="makeunique"
/>
<!---
Store this file name in the uploaded file
array so we can reference it later.
--->
<cfset ArrayAppend(
arrUploaded,
(CFFILE.ServerDirectory & "\" & CFFILE.ServerFile)
) />
<!--- Catch upload errors. --->
<cfcatch>
<!--- Store the error. --->
<cfset ArrayAppend(
arrErrors,
"There was a problem uploading file ###intFileIndex#: #CFCATCH.Message#"
) />
<!---
Break out of the upload loop as we
don't want to deal with any more
files than we have to.
--->
<cfbreak />
</cfcatch>
</cftry>
</cfif>
</cfloop>
<!--- Check to see if we have any form errors. --->
<cfif ArrayLen( arrErrors )>
<!---
We encountered an error somewhere in the upload
process. As such, we want to clean up the server
a bit by deleteing any files that were
successfully uploaded as part of this process.
--->
<cfloop
index="intFileIndex"
from="1"
to="#ArrayLen( arrUploaded )#"
step="1">
<!--- Try to delete this file. --->
<cftry>
<cffile
action="delete"
file="#arrUploaded[ intFileIndex ]#"
/>
<cfcatch>
<!--- File could not be deleted. --->
</cfcatch>
</cftry>
</cfloop>
<cfelse>
<!---
!! SUCCESS !!
The files were properly uploaded and processed.
Here is where you might forward someone to some
sort of success / confirmation page.
--->
</cfif>
</cfif>
</cfif>
<!--- Set the content type and reset the output buffer. --->
<cfcontent
type="text/html"
reset="true"
/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Multiple File Uploads</title>
</head>
<body>
<cfoutput>
<h1>
Multiple File Upload ColdFusion Example
</h1>
<!--- Check to see if we have any errors to display. --->
<cfif ArrayLen( arrErrors )>
<p>
Please review the following errors:
</p>
<ul>
<cfloop
index="intError"
from="1"
to="#ArrayLen( arrErrors )#"
step="1">
<li>
#arrErrors[ intError ]#
</li>
</cfloop>
</ul>
</cfif>
<form
action="#CGI.script_name#"
method="post"
enctype="multipart/form-data">
<!--- Submission flag. --->
<input type="hidden" name="submitted" value="1" />
<!---
Loop over the number of files we are going to
allow for the upload.
--->
<cfloop
index="intFileIndex"
from="1"
to="#REQUEST.FileCount#"
step="1">
<label for="file#intFileIndex#">
File #intFileIndex#:
</label>
<input
type="file"
name="file#intFileIndex#"
id="file#intFileIndex#"
/>
<br />
</cfloop>
<input type="submit" value="Upload Files" />
</form>
</cfoutput>
</body>
</html>
Hope that helps. Please let me know if there are any follow up questions.
Want to use code from this post? Check out the license.
Reader Comments
Just wondering why you add the step="1" attribute on all your cfloops?
@Duncan,
There is no technical reason for this. I know that the loop increment defaults to 1. However, since many of my posts are meant to help people learn, I believe that it is best to spell everything out explicitly so there is no mystery and people can concentrate on the real task at hand.
A nice addition for the beginners out there might be to use the result attribute and show'em how it can be used to interact with the db.
Great post!
Will
thank you for this, very helpful
Thanks Ben. Have been wondering how to do this for a little while now. Nice tutorial.
Greetings -
I tried this code to upload multiple files, which worked great. However, while the files are uploaded to the right directory, I wanted to upload the name of files to my database.
Here is my databse code I added to this script:
INSERT INTO Uploads (user_ID, File_Name, Date_Published)
VALUES (#Form.ClientID#, 'file#intFileIndex#', #Now()#)
Issue 1 -
------------
The upload runs successfully, but I am not getting the right filenames populated on the database. Exp.: I have photo-1.jpg photo-2.jpg photo-3.jpg - On the "upload" directory, I get the right names: photo-1.jpg photo-2.jpg photo-3.jpg But on the database I get: file1 file2 file3 - instead I'd like to see the right files on the database as follows: photo-1.jpg photo-2.jpg photo-3.jpg
Issue 2 -
------------
2) I set the script to show 5 uploads:
as follows: <cfset REQUEST.FileCount = 5 />
But once they upload 5 photos, they can come back and upload more, I tested, I expected to see an error message that says "you have reached max limit which is 5 files/photos"
Issue 3 -
------------
Could we specify the file size. i.e. only up to 1MB per file can be uploaded
Please note, I am not too concerned about Issue 2 or 3, but the issue 1 is very critical.
Thank you so much for any input you can provide.
Regards,
Karim
MoroccoIT@gmail.com
Karim:
Issue 1. Replace 'file#intFileIndex#' with '#cffile.ServerFile#' - this is the name that CFFile saves the file as on the server.
Issue 3. After the file uploads, you could use CFFile.fileSize to check if the size is GT 1Mb.
Thanks for the tutorial Ben. The tips you gave made my day go quicker.
@Brian,
Awesome my man; glad to help out.
I discovered a problem with the CF file upload thing: file parameters with the same parameter name. They all upload to CF, you just can't retrieve them as easily.
<input type="file" name="file0"/>
<input type="file" name="file1"/>
This works fine.
<input type="file" name="file"/>
<input type="file" name="file"/>
This only retrieves the last file.
You have to do some undocumented CF to get it to work. Basically, retrieve the temporary CF files from disk yourself.
........................................
<cfsavecontent variable="fileNumberPattern">.*neotmp(\d+).tmp.*</cfsavecontent>
<cfset lastFileNumber=reReplace(form["file"], fileNumberPattern, "\1", "all")/>
<div>lastFileNumber: <cfdump var="#lastFileNumber#"/></div>
<cfset filesCount=listValueCountNoCase(form.fieldNames, "file")/>
<div>filesCount: <cfdump var="#filesCount#"/></div>
<cfloop index="fileIndex" from="0" to="#(filesCount - 1)#">
<cfset filePath=(getTempDirectory() & "neotmp" & (lastFileNumber - fileIndex) & ".tmp")/>
<div>filePath: <cfdump var="#filePath#"/></div>
<cffile action="readBinary" file="#filePath#" variable="m_file"/>
<div>file: <cfdump var="#m_file#"/></div>
<cffile action="delete" file="#filePath#"/>
</cfloop>
........................................
@Alex,
Parsing temp files seems like a lot of work to do for the sake of naming files the same thing; I would suggest just having file inputs with different names. After all, that is really the intent of form fields - to provide unique sets of data. I am not sure that you should think of files as a single group.... although, that is how we can look at checkboxes, so I guess it's 6 of one, half a dozen of the other.
@Ben
> naming files the same thing
This is my usual strategy for JavaScript add/delete/rearrange.
<fieldset class="item">
<input name="title" type="text"/>
<input name="description" type="text"/>
<input name="file" type="text"/>
</fieldset>
That way, you don't have to fuss with renumbering all the other items when you add/delete/rearrange.
When the page is submitted to the server (for real or via XHR), you assume title[1], description[1], and file[1] all go together. You can count how many items you have by counting the titles. In fact, it makes enumerating your values much easier because there's none of that "title#index#" complexity.
The next question would be how do you do all the labels and IDs. Well, these just need to be unique, not sequential. So make them unique.
@Alex,
I am not sure how it is possible to separate the Title and Description fields in your form post? If either the Title or the Description contain a comma, doesn't that mess everything up?
Perhaps this is just a ColdFusion thing, but when you post a form with duplicate names, they get concatenated into a list. For example, checkbox with the same name (ids) would become:
ids: 1,2,7,9
... if 4 different checkboxes were checked.
Does your language actually break them out into separate array items?
> concatenated into a list
Yes. That is why the form and url scopes are stupid.
Granted, the good thing about the form and url scopes are their ease of retrieving values. Assuming you only want the first value or there are no commas. Which is probably 99% of the time.
But they break even the simplest checkbox lists with same name, different values, values containing commas.
The query and body should have never been stuck in _just_ a simple struct with a list of values.
It made it nice to do url["foo"] and url["foo"][1], but only if there's no commas. It wouldn't have hurt to provided more advanced objects as well.
I use simple scripts to parse the query and body if needs be. You can get an value array (by index) or a struct (by name, array of values).
@Alex,
Out of curiosity, where are you grabbing the form data from? I have looked in the GetHTTPRequestData(), but it looks like it doesn't store the data there when file uploads are involved. Where are you getting the raw data?
@Ben
> where are you grabbing the form data from?
You're right, ColdFusion/Java intercepts the file data.
For multiple file uploads with the same form field name, you gotta do an end run around.
The form scope will give you the filename of the last uploaded file.
<cfsavecontent variable="fileNumberPattern">.*neotmp(\d+).tmp.*</cfsavecontent>
<cfset lastFileNumber=reReplace(form["file"], fileNumberPattern, "\1", "all")/>
<div>lastFileNumber: <cfdump var="#lastFileNumber#"/></div>
Use the form scope to find how many files were uploaded.
<cfset filesCount=listValueCountNoCase(form.fieldNames, "file")/>
<div>filesCount: <cfdump var="#filesCount#"/></div>
Loop through uploaded files (via count), grab data for each file from its temporary file, and delete its temporary file.
I changed this code to put file data in an array.
<cfset files=[]/>
<cfloop index="fileIndex" from="0" to="#(filesCount - 1)#">
<cfset filePath=(getTempDirectory() & "neotmp" & (lastFileNumber - fileIndex) & ".tmp")/>
<div>filePath: <cfdump var="#filePath#"/></div>
<cffile action="readBinary" file="#filePath#" variable="m_file"/>
<div>file: <cfdump var="#m_file#"/></div>
<cfset arrayAppend(m_file)/>
<cffile action="delete" file="#filePath#"/>
</cfloop>
I think you can use getHttpRequestData() to get the original filename and extension, I can't remember.
Hi Ben.
After googling for about a week, I'm unable to locate a good demo like this one but also be able to add, update, and delete or CRUD images to a database (MySQL) and have CF8 crop the images too. Next, display the images related to the ID.
Thanks,
Barry
@Barry
> crud images
MySQL blob data type
<http://dev.mysql.com/doc/refman/5.0/en/blob.html>
ColdFusion MySQL data source, enable BLOB
<http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=functions_h-im_10.html>
> crop images
ColdFusion ImageCrop function
<http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=functions_h-im_10.html>
Thanks Alex.
But what I was looking for is a complete demo.
Barry.
@Barry,
Perhaps you could combine this demo with the following one (which demonstrates BLOB data type usage):
www.bennadel.com/blog/1274-Ask-Ben-Streaming-Binary-Data-From-The-Database-BLOB-To-The-User-Using-ColdFusion.htm
Hey Ben, I think Alex touched on a topic that I'm actually interested in digging into right now. My question is how do I determine the original filename? I've looked into GetHTTPRequestData() and form field itself and can't seem to find it.
What I'm doing is uploading the file and directly inserting it into blob database. It just irks me to have to cfupload the file to some tmp path, readbinary it before putting it into the database. especially now since i've figured out that CF has already written the file to the hard drive as the tmp file.
I figure that instead of cfuploading, I can just readbinary the tmp file and insert that data into the db directly. i just need the orig filename to finish off the puzzle.
thanks
@Yuliang,
I don't know enough about how ColdFusion handles the binary form post to answer that. Personally, I think CFFILE is so easy, I would only avoid it if entire necessary.
Just in case you were not away (not making any assumptions), you can get the original file name from CFFILE after the upload is complete (CFFILE.clientFile).
yea. it's not a huge deal to do the cffile. my only concern is that i'd have to keep a temp folder around and deleting the file after the blob insert. it's not as clean as I would like. but that's just me being anal about these things heh.
@Yuliang,
Understandable - it certainly adds an extra step. But, I think you'll find it's an extra step that makes everything else (minus the additional step) easier.
The only other issue with cffile is that you cannot retrieve the original mime type.
This becomes a problem when you go to serve the uploaded files. Especially out of a database. Serving a file requires a mime type, e.g., image/jpeg.
You need to add a file extension to mime type lookup. E.g., file.jpg > image/jpeg.
This isn't really the best solution. Clients may have more or more recent mime types than the server. Clients may have a different mime type for the same extension.
The cffile tag is really a poor implementation. Shortsighted, overly complicated, and incomplete.
@Alex,
I am not sure I understand - you can get the mimetype from the uploaded file from either the CFFILE hidden scope or from the Result reference.
I don't think there's anyway you can call the CFFile tag "overly complicated". It really makes uploading super straightforward? How would you go about making it easier?
@Ben
> mime type
Sorry. I should've clarified.
You can't get mime type for multiple file uploads with the same field name. Which is my whole gripe.
All your left with is a bunch of binary temp files on the server. You can get the file names from getHttpRequestData().
Why support _some_ of HTTP? It's not that large of a protocol. Just support the whole thing.
> cffile complicated
It sure is.
You have to know that a particular field is a file in order to process it correctly.
There's no way to do a for loop on the fields.
for each field in fields
switch field.type
case file
case text
end
end
@Alex,
It sounds like there's no doubt that the functionality of CFFILE could be expanded. After all, if it's not letting you do what you want it to do, then clearly there is room for improvement.
However, I honestly believe your use case (multiple files with the same form field name) is an outlier case. I imagine that is why this problem has not been addressed by the server software.
Not trying to downplay your requirements - just that they might be more on the unique side of things.
Hey Ben,
I'm fairly new to Coldfusion, and am not sure how to make the above code work. From what i see the first block of code is called when the form is submitted with this line: <form action="#CGI.script_name#">. Im not really sure whats going on here and simply putting the html portion of the code on a page throws up countless errors, whats a CGI script and how do I implement this from a beginners point of view?
the cgi.script_name refers to the CFM file itself. essentially it's just saying the form's action (i.e. who's handling the processing the form) is this very same file.
make sure that the #CGI.script_name# is inside a <CFOUTPUT> block.
You don't actually have to specify the value for the action attribute, if you're just posting to the same page. This will work perfectly:
<form action="">
Charlie Arehart wrote a good article about this:
http://www.carehart.org/blog/client/index.cfm/2007/1/2/form_self_post
@Andrew,
Yeah, exactly what @Yuliang said. cgi.script_name simply refers to the file that was requested by the user. It's basically an easy way to say "post back to yourself" without having to couple the page to an actual URL.
Works with links too, such as those used in pagination or sorting or other "same page" actions.
@Duncan,
I see it... but it makes me feel uncomfortable :)
Hi Ben!
Many thanks for your very useful posts!
Actually, I wanted to know whether it would be possible to select a folder instead of a file using CF?
I've already posted a thread of Adobe's CF forum but haven't got any answer so far.
Here is the link of this thread: http://forums.adobe.com/thread/722826?tstart=0
What I want to do is to create a form and instead of browsing for files, the user only browses for the directory where he/she has placed all the files that need to be uploaded and processed, and then I just use the cfdirectory tag to do the upload and the processing.
Do you know if there is any way to do this?
Thanks in advance.
Best regards,
Yogesh.
@Yogesh,
no you can't. cfdirectory operates on directories on the server, not the client. it's a security breach to "select all files" on the client's computer.
that said, an alternative is to use a Flash element to allow the user to select multiple files and then have the Flash element push those selected multiple file data up to the server.
Hi Yuliang!
Thanks for the reply.
I know cfdirectory operates on the server.
Even if it's multiple upload, the user still has to select each file manually.
The idea is to automate this process to the maximum, i.e. having a form where the user only needs to point to a local directory where he/she has stored the files to be uploaded to the server.
Then, when he/she clicks on e.g. Upload to Server, the program just copies everything from the user's selected folder to a destination folder on the server, and then the cfdirectory would read the destination folder on the server and do the processing.
But before reaching the point where cfdirectory operates, all the files need to be copied from the user's selected folder first.
Now, to be able to copy those files, the user needs to tell the program from which folder the files need to be copied from.
You get my point?
How do Java applets do this?
E.g. If you have CF installed on your pc and you want to set up a Microsoft Access datasource in your CF Admin, then, when you locate the file, the Java Applet displays your local pc's My Computer hierarchy, allowing you to browse to the location of the database.mdb.
I really hope I can find a solution to this :-)
Thanks in advance.
Best regards,
Yogesh.
@Yogesh,
I don't know about Java, but Flash has a security check to prevent the program from programatically selecting a file from the user's filesystem and upload it to the server. The initiating action has to be a user clicking on a file to upload. You can have the user browse for a file. You just can't upload the other files programatically. There may be a workaround, but you're going to be constantly fighting the security patches in Flash player.
One possibility is to have drag-drop interface so that the user can select multiple files in their explorer window and drag the reference to all of those files into the dropbox. I've played around with Flex file uploader but never done a dragdrop uploader. It's at least an avenue to explore.
Good luck!
Hi Yuliang!
Thanks for your reply.
I'll try to explore the Flex file uploader.
All the best to you too!
Cheers,
Yog.
@Yogesh,
As @Yuliang suggested, I would look into Flash. Even if you can't select a directory, I believe that the File Prompt in Flash allows you to select more than one file at a time (unlike the standard HTML file input). If you look at the GMail file attachment, you'll notice that once inside a folder (in the prompt), you can do a Select-All to select and then attach all files in the directory.
Unforutnately, I know very little about Flash/FLEX itself so I can't give you any more technical direction. One day, when I clone myself, I'll have time to master Flash :D
where would you add a check to check for file upload size. Want to limit total file size to under 10 megabytes
I am trying to use two uploads in my coldfusion form and the form has enctype="multipart/form-data". But the first upload is required but not the second one. When I tested the form by uploading the required file without uploading anything on the second one. When I do that, I am getting error as follows: "The form field form.comment_file did not contain a file." I don't have this validation through out my application and could not figure out how to fix this. The second upload is not required and I want people can only upload the first one and leave blank the second if needed. Please help.
ARGH!!! uploadall is a crock, i can't get the individual file names to put into the database, i can only get the last one via #cffile.ServerFile#. I'm going to have to write a loop to upload 1 by 1...>:(
FINALLY GOT IT:
Here's how you get individual file names for a multiple file upload.
<cffile action="uploadall" destination="SOMEPLACE" result="uploadedFiles">
<cfloop from="1" to="#ArrayLen(uploadedFiles)#" index="idx"><cfoutput>
#uploadedFiles[idx].serverFile#
</cfoutput></cfloop></cfif>
Then you do a loop to upload filenames 1 by 1 or you could create 1 variable to store a list of all the names then insert into your database.
Ben,
would like to know if we can implement the same in fusebox framework ? I am having difficulty implementing the same.
Hi Ben,
I was wondering if you could tell me were to insert the <cfmail> tag. I need this to email three attachments to an email account. I hope you can get back to me.
Kind Regards,
Martin.
Hey Ben. This is probably one of the most helpful posts I've had the pleasure of absorbing on the internet as far as CF coding goes. I was even able to split the code into two pages and make the first page an input page for the user to choose how many files they want to upload. I know this is an old blogpost, but the technique and style is still very relevant. Thanks for putting up really good stuff!
Tony
@Alas,
Thanks! Very helpful. It was doing my head in too.
I had tinkered doing this a few years back and I remember a problem I had was evaluating the size of a file before the upload so that if the maximum file upload size was exceeded, a message could be provided to the user letting them know that the file(s) they were uploading were exceeding the maximum file size limit and would be rejected, before they bothered to upload. I do not remember what my solution was, but I think that there was some java code remedy...
I had success adding a cfmail in your Success else area.
What I would like to do is add a text list of the files uploaded and also
a place for the uploader to comment about the files in the email body.
Thank you,
Terry