More Flex File Upload with Coldfusion

Salim

The Multiple File Upload Example can work with any server side technology that can handle Multpart/form-data such as ASP,PHP,JSP,CFM etc.. The example has a file called upload.cfm this file could be replaced with what ever flavour of technology you like. In the case of JAVA you could create a servlet or bean to do this job. Turning to the flex code you need to change where the flex front end points. The file FlexFileUpload_cb.as in the example has a variable called uploadDestination this is where you change the upload destination. Change it then compile the application.

Dan,

Thanks for trying out the example, with that out of the way let me shed some light on your comments.

1. Creating an itemRenderer with a image preview of the files such as creating a thumbnail currently is not possible with the FileReference api. The reason for this is that for security reasons Flash Player does not reveal the path to the local data to display the image. The workaround would be to be to transport the files to the server, process them into thumbnails and return them back to Flash Player. In case that sounds like an actual plan, I wouldn't recommend it as it would be very slow and inefficient to say the least.

2. The test vars are scoped and in fact the all the data passed to the server are scoped in CF speak to the URL scope. If you modify the MultiFileUpload.as class you can change the scope to the FORM scope. Watch below:

The current setting:
--------------------------------------------------------------------
_uploadURL = new URLRequest;
_uploadURL.url = _url;
_uploadURL.method = "GET";
_uploadURL.data = _variables;
_uploadURL.contentType = "multipart/form-data";
--------------------------------------------------------------------

The new setting:
--------------------------------------------------------------------
_uploadURL = new URLRequest;
_uploadURL.url = _url;
_uploadURL.method = "POST";
_uploadURL.data = _variables;
_uploadURL.contentType = "multipart/form-data";
--------------------------------------------------------------------

When you create a new URLRequest object it has a property called method. You can set it to either "POST" or "GET", you may have noticed that the URLRequest object acts in the same manner of the HTML form tag properties.

3. Lastly I'm confident that adding metadata to the uploaded files would have to be handled on the server side post upload. As Flash Player just is not equipped to handle such task. You could however pass the metadata values from Flash Player to the server in your URLRequest object's 'data' property.

I would suspect that once Adobe release's Apollo we will have the ability to interact with the operating system's file system in less restrictive ways. When Apollo is available in the Adobe Labs i'll update this example to reflect any new fileIO capabilities added.

I would like to capture the filenames and submit them to the database so that I can related the filenames to a messageid. How would I do this if the multifileupload is inside my form? I would like to pass the filenames to remoteobject for insert using my CFC.

Thank you so much for this great work. I just need to learn how to integrated into my form submit. If you could help, that would be great!

Don


<mx:FormItem id="FI_FileUpload">
      <mx:Panel width="652" height="200" layout="absolute" title="File Upload">

<mx:DataGrid id="filesDG" left="0" right="0" bottom="30" top="5"/>
<mx:ProgressBar id="progressbar" labelPlacement="center" trackHeight="15" left="0" right="0" bottom="5" height="20"/>

   <mx:ControlBar>
   
    <mx:Spacer width="100%"/>
    <mx:HBox>
    <mx:Button label="Browse For Files" id="browseBTN"/>
    <mx:Button label="Upload" id="upload_btn"/>
    <mx:Button label="Remove" id="delButton"/>
    <mx:Button label="Clear All" id="clearButton"/>
    </mx:HBox>
   
</mx:ControlBar>

   </mx:Panel>   
   </mx:FormItem>
   <mx:FormItem id="FI_BTN_send">
      <mx:Button label="Send" id="BTN_Send" enabled="true" labelPlacement="right"/>
   </mx:FormItem>

Thanks Ryan. Look forward to it!
I need a single/multiple file upload for a Flex/CF app I'm building at NASA. Just need a way to attach file(s) to a message and within the message, include a link to the uploaded document(s). I didn't want to have to use a cfform to incorporate file upload, but I may have to in the interim. I found some examples of flash file upload, but they don't appear to work inside a flash cfform (only in html forms). I'd prefer to go straight to a Flex form since I also need the RichTextEditor.
I appreciate you taking the time to expand this project. Sounds great!

"The workaround would be to be to transport the files to the server, process them into thumbnails and return them back to Flash Player. In case that sounds like an actual plan, I wouldn't recommend it as it would be very slow and inefficient to say the least."

that wouldnt be that bad. jpg thumbnails are rendered very fast and could be shot right back to the player. a couple seconds of lag wouldnt be very significant, especially considering you may be watching the second file upload while the first thumbnail is coming in. this would be an amazing feature and is somewhat expected, no? the thumbs could be put into a grid, or atleast made very small in the table next to each filename.

secondly, did you squash the bugs in the new version youre working on? for example, error out one file in the script by whichever means and try and use the interface...

thirdly, how about a progress bar for each individual file? perhaps by colorizing the row progressively?

Ryan, I was working on the multi file upload flex feature and it worked perfectly, however I wanted to do a little add-on to the upload.cfm file and had a little issue.

All I want to do is after the check for the approp file ext is completed, perform a cfquery...such as:
<cfif filecheck eq false>
..your delete action...
<cfelse> <cfset image = "#File.ServerFile#">
<cfquery name="foo" database="bar">
INSERT INTO images
(imagename)
VALUES ('#image#')
</cfquery>
</cfif>

The problem I am having is, while it's uploading just fine, the db is not being updated at all...do you know any reason why this might be?

Thanks Ryan, I really appreciate your app here, and all your other input you offer on your blog.
Cheer!

CEV

I have some questions about J2EE,can you help me,and give me your contact info,thanks.

I am badly stuck in implemeting the multiple file upload functionality. My application is already running on JBOSS and uses J2EE technology.

Any help is appreciated, if any one has a source working for J2EE and can send it to my mail id sakvk@yahoo.com, would be of gr8 help to me.

Hoping for some reply.

Regards,
Sarika

HI Rayn,
Many thank for the article. Would you mind to advice me how to pass the dynamic parameter to update in database while the file are uploaded. I am new to flex.

I have a list of meeting.Want to upload the files and updated the database according to meetingid.

(http://localhost/MultiFileUpload/FlexFileUpload.cf...

When I make a change in FlexFileUpload_cb.as as
postVariables.meetingid= Application.application.parameters.meetingID;

and added this in upload.cfm
<cfquery name="namelist" datasource="meetingdb">
INSERT INTO documentList(docTitle, pagefile, meetingID)
VALUES('#File.ServerFile#','uploadedFiles/#File.ServerFile#','#meetingID#')
</cfquery>

the infomation is not imputing into database.

Thanks

Try NeedForNews.com, a new comprehensive news aggregator.
http://needfornews.com/top_search.php
http://vidslib.com/

http://realwebnews.com/
http://stocknewssite.com
http://newssiteworld.com
http://newssiteguide.com
http://newssitedirect.com
http://reportsiteworld.com

http://www.shopofbrides.com
http://www.chinese-brands.com