cffileupload

Description

Displays a dialog for uploading multiple files from the user's system.

History

ColdFusion 9: Added this tag.

Syntax

<cffileupload 
    addbuttonlabel= "label" 
    align = 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>

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.

Attributes

Attribute	Description	Required	Default
addbuttonlabel	Label of the Add button.	Optional	Add Files
align	Specifies the default alignment. The following values are valid: center left right	Optional	left
bgcolor	The background color for the file upload control. A hexadecimal value without “#” prefixed or a recognized color name, for example red.	Optional
clearbuttonlabel	Label of the Clear button	Optional	Clear All
deletebuttonlabel	Label of the Delete button	Optional	Delete
extensionfilter	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. If set to none, files are uploaded without any extension filter.	Optional	none
height	Height of the file upload control, in pixels.	Optional	300
hideUploadButton	A Boolean value that specifies if the Upload button should appear in the file upload dialog: true false	Optional	false
maxfileselect	The maximum number of files allowed for upload.	Optional
maxuploadsize	The maximum file size, in Megabytes, allowed for upload in an operation.	Optional	10MB
name	Name of the file upload component.	Optional
onComplete	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:STATUS - numeric value that is based on the HTTP status code MESSAGE - Passed or Failed FILENAME - Name of the file selected for upload You can also pass the JavaScript object by creating a struct with parameters "status" and "message" and call serializeJSON() on the JavaScript object.	Optional
onError	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:STATUS - numeric value that is based on the HTTP status code MESSAGE - Passed or Failed FILENAME - Name of the file selected for upload You can also pass the JavaScript object by creating a struct with parameters "status" and "message" and call serializeJSON() on the JavaScript object.	Optional
onUploadComplete	The JavaScript function to run after uploading all the files.	Optional
progressbar	Whether to display a progress bar while the files upload:true false	Optional	true
stoponerror	Specifies whether to ignore the exceptions for this operation. true - Stops uploading and displays an appropriate error. false - Continues uploading and displays an appropriate error.	Optional	true
style	A CSS style specification that defines layout styles.	Optional
title	Title for the upload dialog.	Optional
uploadbuttonlabel	Label of the Upload button.	Optional	Upload
url	The URL to the server where the files are uploaded.	Required
width	Width of the file upload control, in pixels.	Optional	420
wmode	Specifies the absolute positioning and layering capabilities in your browser: window: Plays the media player in its own rectangular window on a web page opaque: Hides everything behind the media player on the web page transparent: Lets the background of the web page show through the transparent portions of the media player	Optional	window

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.

Example

<h3>Instructions</h3> 
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> 
 
<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"/>

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".

cfmldocs