cffileupload's Flash component has been deprecated. For more information, see the list of Deprecated features.
Description
Displays a dialog for uploading multiple files from the user's system. The enhanced dialog includes the following features:
- You can specify the maximum number of files and the maximum file size for the upload.
- A progress bar to visually indicate the overall progress of the file upload task, and another progress bar to indicate the upload progress of each individual file.
- A success or failure message appears for each file upload and the overall upload task.
- At any point during the upload task, you can cancel the upload.
Category
File management tags, Forms tags
Syntax
<cffileupload> addbuttonlabel= "label" align = "center|left|right" bgcolor = "color" clearbuttonlabel = "label" deletebuttonlabel = "label" extensionfilter = "none|jpg,jpeg,png" height= "number of pixels" hideUploadButton = "true|false" maxfileselect = "number of files" maxuploadsize = "file size in mega bytes" name = "File uploader name" oncomplete = "JavaScript function name" onerror = "JavaScript function name" onUploadComplete = "JavaScript function name" progressbar = "true|false" stoponerror = "true|false" style = "style specification" title = "Title panel name" uploadbuttonlabel = "label" url = "URL" width = "number of pixels" wmode = "window|opaque|transparent" </cffileupload>
cfscript equivalent of the syntax
<cfscript>
cffileupload(addbuttonlabel= "label" , align = "center|left|right" , bgcolor = "color" , clearbuttonlabel = "label" , deletebuttonlabel = "label" , extensionfilter = "none|jpg,jpeg,png"
height= "number of pixels" , hideUploadButton = "true|false" , maxfileselect = "number of files" , maxuploadsize = "file size in mega bytes" , name = "File uploader name" , oncomplete = "JavaScript function name" , onerror = "JavaScript function name" , onUploadComplete = "JavaScript function name" , progressbar = "true|false" , stoponerror = "true|false" , style = "style specification" , title = "Title panel name" , uploadbuttonlabel = "label" , url = "URL" , width = "number of pixels" , wmode = "window|opaque|transparent" )
</cfscript>
Note: You can specify this tag's attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute names as structure keys. |
See also
History
ColdFusion 9: Added this tag.
Attributes
Attribute |
Req/Opt |
Default |
Description |
|---|---|---|---|
addbuttonlabel |
Optional |
Add Files |
Label of the Add button. |
align |
Optional |
left |
Specifies the default alignment.
|
bgcolor |
Optional |
|
The background color for the file upload control. A hexadecimal value without "#" prefixed or a recognized color name, for example red. |
clearbuttonlabel |
Optional |
Clear All |
Label of the Clear button |
deletebuttonlabel |
Optional |
Delete |
Label of the Delete button |
extensionfilter |
Optional |
none |
Use this attribute to specify the type of file that you will allow to be uploaded. For example, to let only image files to be uploaded, you can specify file extensions such as .jpg, .jpeg, or .png. |
height |
Optional |
300 |
Height of the file upload control, in pixels. |
hideUploadButton |
Optional |
false |
A Boolean value that specifies if the Upload button should appear in the file upload dialog:
|
maxfileselect |
Optional |
|
The maximum number of files allowed for upload. |
maxuploadsize |
Optional |
10MB |
The maximum file size, in Megabytes, allowed for upload in an operation.ColdFusion throws an error if the value of the attribute maxuploadsize exceeds the throttle/ post data size settings specified in the ColdFusion Administrator. |
name |
Optional |
|
Name of the file upload component. |
onComplete |
Optional |
|
The JavaScript function to run when a file has finished uploading.By default, ColdFusion passes a JavaScript object as a parameter to this function with the following properties:
|
onError |
Optional |
|
The JavaScript function to run if the uploading of a file fails. The error can be a network error or server-side error. By default, ColdFusion passes a JavaScript object as a parameter to this function with the following properties:
|
| onUploadComplete | Optional | The JavaScript function to run after uploading all the files. | |
progressbar |
Optional |
true |
Whether to display a progress bar while the files upload:
|
stoponerror |
Optional |
true |
Specifies whether to ignore the exceptions for this operation.
|
style |
Optional |
|
A CSS style specification that defines layout styles. |
title |
Optional |
|
Title for the upload dialog. |
uploadbuttonlabel |
Optional |
Upload |
Label of the Upload button. |
url |
Optional |
|
The URL to the server where the files are uploaded. |
width |
Optional |
420 |
Width of the file upload control, in pixels. |
wmode |
Optional |
window |
Specifies the absolute positioning and layering capabilities in your browser:
|
Usage
Use this tag to create a SWF file-based file upload control that lets a user upload multiple files to a server. To upload files to the server, define a server-side template. The template that you define reads the upload request and uploads the selected files to the server.
Enhancements made in ColdFusion 9.0.1
In ColdFusion 9.0.1, the fileupload control passes the session information implicitly to the target page if session management is turned on either in Application.cfc or Application.cfm.Assume that fileupload control is defined without a URL attribute. In this case, if the user chooses to upload data using the upload button, the control comes back to the same page. Users can check for form.fieldnames to perform the upload as shown in the following example:Upload.cfm
<cfif isdefined("form.FIELDNAMES")>
<cffile action = "upload" destination = "#ExpandPath('.')#" nameconflict="makeunique">
</cfif>
<cffileupload name="myuploader">
In this case, url defaults to CGI.script_name.
To maintain sessions between the fileupload control and the URL, users must turn on session management. You can do this by setting the this.sessionmanagement=true in Application.cfc. The setting ensures that CFID and CFtoken are passed as part of the URL if Enable J2EE Session Variables (ColdFusion Administrator > Server Settings > Memory Variables) is not selected. If it is selected, then JsessionID is passed as part of the URL.
Supported Styles
The following are the supported styles:
Style |
Description |
|---|---|
headercolors |
Format: color; colors of the band at the top of the DateChooser control. Specify two values, separated by a comma. For a solid band, use the same color for both values. The default value is ##E6EEEE,##FFFFFF. |
textcolor |
Color of text. Can be a hexadecimal value or a named color. For a hexadecimal value, use the form"##xxxxxx", where x = 0-9 or A-F; use two number signs or none. |
titletextalign |
Aligns the title text. The recognized values are left, right, and center. The default value is right. |
titletextcolor |
Color of the title text. |
bgcolor |
The background color for the file upload control. A hexadecimal value without "#" prefixed or a recognized color name, for example red. |
rollovercolor |
Displays values on mouse-over. |
selectcolor |
Background color for a selected item. Can be a hexadecimal value or a named color. |
Example
<h3>Instructions</h3>
<p>Create a folder Upload in your C: drive
<br>Try uploading files using the file upload component and check if the files have been appropriately saved in the Upload folder.</p>
<script>
var foo = function(result)
{
alert(ColdFusion.JSON.encode(result));
}
</script>
<cffileupload
url="uploadFiles.cfm"
progressbar="true"
name="myupload"
addButtonLabel = "Add File"
clearButtonlabel = "Clear it"
hideUploadButton = "true"
width=600
height=400
title = "File Upload"
maxuploadsize="30"
extensionfilter="*.jpg, *.png, *.flv, *.txt"
BGCOLOR="##FFFFFF"
MAXFILESELECT=10
UPLOADBUTTONLABEL="Upload now"/>
uploadfiles.cfm is given below:
<cffile action="upload" destination="#expandpath('./upload')#" nameconflict="makeunique"> <cfoutput>#serializeJSON({STATUS=200,MESSAGE='Passed'})#</cfoutput>
This example sends user-specified files to the server-side template - uploadfiles.cfm. The template file that you define can use the "upload" or "uploadall" action defined in the cffile tag.
Note: The filefield attribute of the upload action is optional. |
Use the destination attribute in the cffile tag to define the location to save the files. For the uploadfiles.cfm code, see cffile action = "uploadAll".
Sign in to your account