CF_FlashMultiUpload is a quick solution to replace multiple ordinary <input type="File"> This tag prevents clients going back and forth uploading single file. Instead this allows clients to upload multiple file at once, in a single submit.
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 each and total file that can be uploaded 3. Limit maximum number of files that can be uploaded 4. 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!
Note: The original source code for FlashMultiUpload.swf is not distributed and it's not intended for sale. Contact us if you want to customize this custom tag further.
Feature
- Easy to use!
- Simple operation for user. Just like adding multiple files, with visible grid showing all selected files to upload
- 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 80KB.
- Ability to filter allowed files to upload by extensions.
- Ability to limit maximum uploaded file size each and in total.
- Ability to limit number of file that can be uploaded
- 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
Usage
| <cf_FlashMultiUpload |
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" |
| |
MaxFile="Maximum number of file allowed for upload |
| |
MaxFileSize="Maximum each file size allowed for upload in bytes. Optional, default=0=unlimited" |
| |
MaxFileSizeTotal="Maximum total 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"> |
Limitation: Due to limitation in Flash, HTML, Webserver and Macromedia ColdFusion, below restrictions apply: 1. FlashMultiUpload 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)
We encourage downloading the evaluation version first, install and test it in your environment. Click here to download the free evaluation version
Explanation: 1. Style CF_FlashMultiUpload allow limited CSS-style to be applied to this tag. Those are: color and border-color. Other style will be ignored. For example: <cf_flashmultiupload style="color:#000000; border-color:#cc0000". Don't forget to use the "#"
2. MaximumFileSize and MaximumFileSizeTotal 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_FlashMultiUpload 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 FlashMultiUpload 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. FlashMultiUpload functions that can be called from JavaScript are: FlashUpload_DoUpload -> to start file upload, as explained above FlashUpload_GetXMLResult -> to get the XML result of each file status 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
7. The XML result is in below format: <Files> <File> <Name>Original uploaded filename</Name> <Size>File size in bytes</Size> <Status>Upload status 1,0,-1,-2,-3,-4 as described above</Status> </File> <File> <Name>Original uploaded filename</Name> <Size>File size in bytes</Size> <Status>Upload status 1,0,-1,-2,-3,-4 as described above</Status> </File> ... and so on </Files> You have to parse the XML to retrieve all uploaded files. Please see upload_2_data.cfm to see how XML parsing can be done easily with only several lines.
|