CF_FlashUpload is a quick solution to replace ordinary <input type="File"> This custom tag also adds below functionalities: 1. Filter file that can be uploaded. The filtering is done by file extension. 2. Limit maximum size of file that can be uploaded 3. Progress bar showing the progress of uploading process.
Can <input type="File"> do above functions? No. Are those functions requested by you and your clients? Yes, they are!
Features
- Easy to use!
- Simple operation for user. Just like ordinary file upload field
- Multi-platform. Works on all Macromedia Flash Player 8 supported platform.
- No Java applet to install, no "unknown" ActiveX to install.
Instead this tag uses a world-leading Flash Player 8 from Macromedia
- Small footprint. Only 36KB.
- Ability to filter allowed files to upload by extensions.
- Ability to limit maximum uploaded file size. .
- Progress bar. Show the progress of upload process in real-time, not just a simple animation.
- Event callback. Track the status of upload from JavaScript.
Ability to trigger the upload process from JavaScript too...
- Plain CF custom tag. Shared hosting friendly.
Just copy this custom tag in your ColdFusion working directory, and you're set
Requirements
Supported ColdFusion Server:
- ColdFusion 5
- ColdFusion MX 6, 6.1
- ColdFusion MX 7
on all operating systems
Supported browsers: All browsers having Macromedia Flash Player 8. The custom tag will trigger the browser to download the player if it's not installed yet. Click here for more information to download Macromedia Flash Player
Notes for Macintosh and Opera users: Due to bug in Flash Player 8, some functions may not work with those platforms. See limitation below.
Limitation: Due to limitation in Flash, HTML, Webserver and Macromedia ColdFusion, below restrictions apply: 1. FlashUpload CAN NOT be included in the <form>. Instead put this tag outside the form, and do the upload using JavaScript (if ShowUploadButton is set to false) Check this file: example_2.cfm on how to achieve this. 2. The uploaded formfield always use the name: "Filedata". So the "Action" URL must handle this "form.Filedata" variable. 3. MaximumFileSize is also limited by Flash, ColdFusion and webserver configuration. Please consult ColdFusion and your webserver documentation to allow large file upload (Eg: 64MB or more) 4. OS and browser issues - Opera 8 does not yet support Flash 8 ExternalInterface call. Therefor the upload process MUST be triggered inside cf_flashupload. It can't be called from Javascript function. - Macintosh. Flash Player 8 for Macintosh has a known IO error bug. The temporary workaround is to put a blank line after uploading files.
We encourage downloading the evaluation version first, install and test it in your environment. Click here to download the free evaluation version
Usage
| <cf_FlashUpload |
Name=" The name of this object, required" |
| |
Action="URL of script that will handle the uploaded file, required" |
| |
Style="limited CSS-style to customize FlashUpload user interface. Optional" |
| |
RedirectTo="URL that will be redirected to upon upload completeion. Optional" |
| |
ShowUploadButton="true/false. Show the upload button in FlashUpload object. Optional, default=true" |
| |
MaxFileSize="Maximum file size allowed for upload in bytes. Optional, default=0=unlimited" |
| |
FileFilter="List of title and file extensions allowed for upload. Optional, default=all files" |
| |
OnProgress="Name of JavaScript function that will handle events send from FlashUpload. Optional"> |
Explanation: 1. Style CF_FlashUpload allow limited CSS-style to be applied to this tag. Those are: color and border-color. Other style will be ignored. For example: <cf_flashupload style="color:#000000; border-color:#cc0000". Don't forget to use the "#"
2. MaximumFileSize The maximum uploaded file size in bytes. See limitation #3 above
3. FileFilter Is a comma delinmited list of title and file extensions allowed to be uploaded. Each extensions is separated by ; For example: To allow MS Word file -> FileFilter="Microsoft Word Files,*.doc;*.rtf" To allow Images -> FileFilter="Images,*.jpg;*.gif;*.png;*.bmp" To allow MS Word, MS Excel, and PDF upload -> FileFilter="Word,*.doc;*.rtf,Excel,*.xls;*.csv,PDF,*.pdf" (Note the "," and ";")
4. OnProgress CF_FlashUpload allow JavaScript functions to handle event send by the object. For example: <cf_FlashUpload OnProgess="WhatIsIt"> In the HTML, you will have to add a JavaScript function named "WhatIsIt" with one parameter <script language="JavaScript"> function WhatIsIt(iFlashUploadStatus) { if (iFlashUploadStatus==1) alert("Upload completed"); else if (iFlashUploadStatus==-1) alert("Upload canceled"); else if (iFlashUploadStatus==-2) alert("Upload Fail: IO error"); else if (iFlashUploadStatus==-2) alert("Upload Fail: Security error"); else if (iFlashUploadStatus==-4) alert("Upload Fail: HTTP Eeror");
if (iFlashUploadStatus==2) document.body.style.cursor="wait"; // uploading else document.body.style.cursor=""; } </script>
5. Triggering upload process from JavaScript To start uploading triggered by JavaScript, call this function: objFlash.FlashUpload_DoUpload() With objFlash is the FlashUpload object in your HTML.
To get this objFlash, you can use this code snippet: if(navigator.appName.indexOf("Microsoft") != -1) objFlash = window.#form.FlashUploadName#; else objFlash = window.document.#form.FlashUploadName#;
6. FlashUpload functions that can be called from JavaScript are: FlashUpload_DoUpload -> to start file upload, as explained above FlashUpload_GetFileName -> to get the uploaded filename FlashUpload_GetStatus -> to get the last status of FlashUpload 1 = upload completed 0 = upload hasn't been enabled. File not selected -1 = upload canceled -2 = upload fail because of IO error -3 = upload fail because of security error -4 = upload fail because of HTTP error
|