Ask Ben: Uploading Multiple Files Using ColdFusion

Posted January 8, 2008 at 8:53 AM

Tags: ColdFusion, Ask Ben

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:

 Launch code in new window » Download code as text file »

Hope that helps. Please let me know if there are any follow up questions.

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Permalink  |  Other Searches  |  Print Page

• Add To Del.icio.us
• Add To Digg
• Add to Spurl.net
• Add to Wists
• Add to Simpy
• Add to Newsvine
• Add to BlinkList
• Add to Furl
• Add to reddit
• Add to FARK
• Add to BlogMarks
• Add to Yahoo! My Web
• Add to smarking
• Add to Ma.gnolia
• Add to Segnalo

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.

Post Comment  |  Ask Ben

Post A Comment

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Formatting: <strong>bold</strong> <em>italic<em>
	Remember my information
	Subscribe to entry *
	Send me a copy of this comment (as part of the comment thread)

 

* If you subscribe, any new posts to this thread will be sent to your email address.