Multiple File Upload with CFFILE

Multiple File Upload with CFFILE
(Page 1 of 3 )

Introduction

If you are designing any sort of web site, at some point you are going to need a way of uploading documents, images or anything else to your site. ColdFusion easily handles the task with the CFFILE tag. Before you get started, however you should check to see if your hosting company allows you to use that tag.

I will start off with some of the basic CFFILE syntax then work into multiple file uploads and end up with a very versatile system for doing file uploads that you will be able to use in many applications and allow you to enter the information into a database if needed.

The Basics

Let's start out with the basics. I am going to create one page that has both the client form for selecting the files that need to be uploaded and the ColdFusion action part that actually does all of the work to upload the files. I am going to assume that everything from now on is going to be within body tags so you can set up your site however you want. Here is the start:

<cfif isdefined("form.upload")>
  <!--- The Action Area --->

<cfelse>
  <!--- The Client Side Area --->

</cfif>

Now that you have that part we can start with the fun stuff. We want to do a form that can upload a file. For this we need a couple of attributes set for the form:

ACTION - needs to point back to the same file

METHOD - post

ENCTYPE - "multipart/form-data" - this is very important, won't work without it.

So let's go ahead and create a very simple file upload form:

<form action="FileUpload.cfm" enctype="multipart/form-data" method="post"> <input type="File" name="file1" /><br /> <input type="Submit" name="Upload" value="Upload" /></form>

You will notice that for the input box for the file name, I specified "file". This tells the browser to show the Browse button next to the field so you can browse your directories for the correct file. Then you need to also add an input box so that the form can be submitted. You have to give it the same name you are trying to check for in the CFIF statement that separates the action area from the client area.

So now you have the basic form, let's work on the action. The tag CFFILE does it all for you. The action attribute we will be using is Upload (logically named I think). So here are the attributes we need to have the CFFILE working properly:

ACTION - Upload

DESTINATION - Needs to be the absolute path name of the directory on web server. You cannot use your domain name (i.e. http://www.yahoo.com/files).

NAMECONFLICT - I chose to overwrite, which means if there is a file with the same name in the directory you are uploading to, the new file will overwrite the old file. If you chose "MakeUnique" the web server would rename the file to a new name.

FILEFIELD - the name of the form field that is holding the name of the file (in the client form).

<cffile action="UPLOAD"
        destination="c:cfusionmxwwwroottestfiles"
        nameconflict="OVERWRITE"
        filefield="file1">

That's it! If you want basic functionality, you are all set. Go back to your web site and have fun. But the title of the article is MULTIPLE file upload (emphasis on multiple). So stick with me to see the really good stuff.

blog comments powered by Disqus