ColdFusion MultiUploader (CFMU)

07/31/2008 | CFMU, Flex, ColdFusion | 33 Comments

When Flex 2 came out there was a lot of buzz on how programmer friendly it was. At the time I thought it sounds great but what current problems of mine would it solve. I then came across an article by Ryan Favro titled Multiple file upload with Flex and ColdFusion. I saw a real problem being solved by Flex and I thought it was a fantastic program. The big problem is at the time I did not know how to use Flex so I could not really customize the component. Fast forward a couple years and I becoming pretty handy with Flex. The first thing I have decided to release is a mutliple file uploader. The uploader component which I am calling cfmu (I know really original) for the time being should be available in the next couple days. In the meantime I could really use a couple people to test it so drop me a note if you can. The first version of this component will be customizable via a xml settings file. After I get this up and working I plan to build in some runtime css so you can style the whole component via stylesheet. The cool thing for cfers out there not really into Flex you can just drop the cfmu folder in your project root and use the following code. Here is a quick screen shot of the index test page that comes in the download. I have learned so much creating a bunch of small components like this and the first series will walk you through this component so you can understand how I created it. Also if you have not read the article by Ryan that I linked to above you should really check it out.

This entry was posted on July 31, 2008 at 10:40 AM and has received 5222 views. Comments 33 | Print this entry.

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

#1 by Jamie on 7/31/08 - 10:44 AM

Sweeeeeet
#2 by todd sharp on 7/31/08 - 10:44 AM

I haven't had a chance to test the version you sent yet, but why not allow for any custom filter (instead of just images). That would be really handy.
#3 by Dan Vega on 7/31/08 - 10:47 AM

@Todd, Great minds think a like! That is in the plans and will be in the next release.
#4 by Ben Nadel on 7/31/08 - 12:58 PM

Dan, that looks really badass. Nice job.
#5 by Johan on 8/1/08 - 1:09 AM

Looks nice Dan.

Interested in if/how you are handling security between Flex/CF.

Some suggestions (you may have implemented these already):

- allow setting for max file size that can be uploaded

- I assume Remove allows removing multiple files that are selected in grid

- Cancel button that stops upload, useful if you have selected a lot of files and want to terminate uploading
#6 by Dan Vega on 8/1/08 - 9:15 AM

@Johan - There really are no security concerns on the server end. As far CF is concerned it is just waiting for someone to call that method and pass some form parameters. On the flex side all you are doing is creating a form post using the URLRequest class. Great suggestion and I think I will use all of them, thanks!
#7 by Jose on 8/1/08 - 10:37 AM

Nice! Instead of "ImageFilter" why not create a "FileFilter" attribute so the user can specify list of allowable file extensions (ie: .pdf,.gif,.txt)?
#8 by Dan Vega on 8/1/08 - 10:47 AM

Jose - Check out the next post!
#9 by Johan on 8/1/08 - 4:35 PM

Dan - security - I've always wondered about that, guess I need to test it. The concern being that if you know the url of the handler and the required form fields what stops someone from uploading using their own form?
#10 by Dan Vega on 8/1/08 - 4:38 PM

I see what your saying. In that sense any component method that you expose as remote is vulnerable to this type of threat. I guess to bypass this I could always pass a keyphrase from the uploader to the component method and unless the right keyphrase is passed then the upload will not work. What are your thoughts on that.
#11 by Adrian Lynch on 8/1/08 - 4:41 PM

Ermmmm, maybe it's just me, but you didn't mention this was on riaforge.org did you?

cfmu.riaforge.org

Awesome job dude!
#12 by Dan Vega on 8/1/08 - 4:42 PM

Ya I am sorry, it was not when I released this post but I got it up this morning!
#13 by Johans on 8/1/08 - 6:00 PM

Dan - security - an option with CF is to use cflogin/cfloginuser and set a role, then test for the role in the upload handler. To use cflogin/cfloginuser you pass form fields j_username and j_password from your Flex app. I'm not sure how secure that is either so will have to do some testing.
#14 by Johan on 8/1/08 - 6:21 PM

Security - I tested an as expected the j_username and j_password info is pretty easy to get at. I think if security is an issue then you could use this but only allow uploads after the user had logged in - so they would need an account. A more secure approach is something like Amazon S3 uses where you sign each request using a public and private key and request payload details. The signature is verified on the server.

Of course if the handler moves files after upload then chances of a user guessing path and trying to execute a file is harder. Also will pay to check file extensions on the server, not just the flex client.
#15 by Johan on 8/1/08 - 6:55 PM

Security - thinking about this some more - if you use cflogin/cfloginuser and require a user to sign in before they can upload then you can secure the upload hander method (cfc) using the roles attribute.
#16 by Johan on 8/1/08 - 6:59 PM

I should have mentioned - by signing in first and establishing the role you do not then need to pass the j_username and j_password fields with the upload. The role is maintained by a cookie (or session if you choose that option).
#17 by Johan on 8/1/08 - 7:47 PM

Another feature suggestion - add radio options for file name conflicts: Skip, Overwrite, Make Unique and pass that to your cffile tag - that way I can easily re-upload a file.
#18 by Dan Vega on 8/1/08 - 9:57 PM

I think you have some good ideas on security but I am going to leave that up to the user to define. As far as the radio button, I don't think you would want to do this for every file but that might be a good option to set in the xml file
#19 by RyanTJ on 8/5/08 - 1:21 PM

The security of the handler concerns me also. Granted we can implement our own but the supplied example should be best practice. I would also use the same config file on the cfc to limit uploaded file types. You need to do the checking after upload (cffile.ServerFileExt) rather than the "accept" attribute since that can be faked out. the server. A security key between flex and the handler is good but you are giving the source so not we'd figure it out.
#20 by Dan Vega on 8/6/08 - 1:04 PM

I understand, security should always be a concern. I have a couple thoughts on your comment. First off what about just checking the referer in the method, you would have to hard core this on a per usage basis but this would limit anyone from calling it. Also checking the upload extension is a good idea. The component in the download is really just an example and my thought behind this was someone would already have a component in place to handle this. The source may come one day, I am still working on gettting it up and running
#21 by Johan on 8/6/08 - 6:23 PM

@Ryan - security the easiest solution is to use cflogin/cfloginuser

@Dan - another suggestion is that the server could (should?) confirm to the client the upload has in fact completed with the file saved on the server.

For example the UI could display a tick/cross next to each item based on server response or only remove items that upload correctly from the list.

On a different note: it would be nice to consider reducing network traffic/time for uploads. The XStandard editor does this by zipping files and then chunking them into packets. On the server side you count and reassemble the packets and unzip to recover the file. As far as I know there is a ZIP library for AS.
#22 by Johan on 8/11/08 - 8:01 PM

@Ryan - on further investigation cflogin/cfloginuser only works nicely with MSIE and not Firefox, Safari or Opera.

In my test case I login from my Flex app via AMF and then pass "roles" back to the CF methods.

MSIE will pass the cookies set by CF back with file upload (http not AMF) and CF can then tie the upload request to the appropriate cfloginunser session and associated role/s.

However the other browsers will not send the cookie so CF does not link the request to a user session/roles and the CFC authentication fails.

A solution is to pass the j_username and j_password fields with the http request and use cflogin/cfloginuser in say your onRequestStart() method - but it's not nice sending the username/password with each request.

Probably a better solution is to pass a validation key value (made up of the file details and logged in user details value) in a field with the upload and verify that before handling upload.
#23 by Johan on 8/23/08 - 4:55 PM

@Ryan - further to using cflogin/cfloginuser

You can get it to work across all browsers by appending the JSESSIONID value to the URL:

_uploadURL.url = "uploader.cfc&method=upload" + "&jsessionid=" + _sessionID;

To get the value of the JSESSIONID cookie (_sessionID above) I simply pass it back from ColdFusion when the user has logged in.

I tested on MSIE, Firefox, Safari and Opera and works on all.

I also tested using standard CF session to secure the upload and again this worked fine in MSIE but failed in others, so I expect the solution is the same - append the CFID and CFTOKEN cookie values to the URL and then you can use your own session security scheme.
#24 by Bernhard on 11/20/08 - 10:14 AM

Hi Dan,

I really 'd enjoy CFMU but when I hit "Upload" I get the error #2038. It seems the error occours for each file I selected.
And here a very important suggestion:
Is it possible to make every text like the button texts editable via the settings.xml? It would be very handy if german users get german text.
#25 by Bernhard on 11/20/08 - 10:26 AM

Hiho, another clue. It would be very nice, if there'd be a URL parameter to reload the calling template after the uploads are done. This would show the user its new files in his directory.
#26 by Dan Vega on 11/20/08 - 1:18 PM

The 2038 error has something to do with uploading the files and the location of the cfc. Put some error handling in the cfc and make sure its being hit. Also, a reload would not show new files as this is not a file manager, just an uploader. I am working on a full scaled file manager though so I will keep that in mind. I will see what I can do about the settings.
#27 by Bernhard on 11/21/08 - 3:41 AM

Dear Dan,
thank you very much for your answers. With "reload" I just mean to reload the template that opened/included the cfmu template.
See, I have a file manager. In the directory tree I open the cfmu and upload files. At this time after the upload happens nothing, the new files can't be seen because the template doesn't reload after upload. So it would be nice to give cfmu some action to do after the upload has finished.

BTW: Is there any way to buy or get the source of main.swf?

Greetings, thanks in advance
Bernhard
#28 by Mohammad Asim on 1/29/09 - 3:08 AM

Dear Dan,

First of all thanks for such a good uploader. I also get errors same as Bernhard, but I found that any change in settings.xml is not accepting by cfmu. Then, clearing browser cache solves this issue.

I agree with Bernhard that there should be a some option for action to do after the upload has finished. Any simple JS call would be helpful, i.e. _root.formSubmit() etc.

Once again, Thanks a lot :)
#29 by Dan B. on 4/23/09 - 3:13 PM

Great piece of software. I never know how people with successful careers also find time to have sites like this with such useful stuff available... I digress.

Bug: No matter which entry in the list of selected uploads I have highlighted it always removes the one on the top of the list... a small hindrance.
#30 by Dan Vega on 4/23/09 - 3:17 PM

This was a bug, please download the newest version and check out the latest blog entries on it. I totally re wrote it based on some feedback.

2nd - I would hardly call mine a successful career! ha - I guess as long as I can help others though that is a big plus and I am having fun doing it!
#31 by Hammergood on 12/15/10 - 8:02 AM

I have the follwing problem:

MSIE passes the cookies set by CF to the upload-cfc. So all SESSION Variables are available in the upload function.

However the other browsers will not send the cookie and so there is another session (other cfid/cftoken) than outside. How can I access the SESSION Variables oft the correct SESSION in the upload function of the upload-cfc?

Thanks for helping!
#32 by Hammergood on 12/15/10 - 8:03 AM

I have the follwing problem:

MSIE passes the cookies set by CF to the upload-cfc. So all SESSION Variables are available in the upload function.

However the other browsers will not send the cookie and so there is another session (other cfid/cftoken) than outside. How can I access the SESSION Variables oft the correct SESSION in the upload function of the upload-cfc?

Thanks for helping!
#33 by Dan Vega on 1/4/11 - 8:10 AM

You could always pass the information you need in the upload string. It just all depends on what your doing. If you needed to log information about a user, it makes more sense to log a user_id than all of the user info. What are you trying to grab from the session that couldn't be passed in the remote method call string?