By Peter Bell

Flex CRUD - How do YOU Handle File Uploads as part of an admin form?

Posted At : May 6, 2007 12:44 PM | Posted By : Peter Bell
Related Categories: Flex, Design Patterns
I want to be able to use a fairly generic flex app for listing, adding, editing and deleting (say) Users. So, if I want to add a new user with first name, last name date of birth and Resume (a pdf) and photo (a jpg), what do you flex guys typically send back to the server? It almost seems to me like it'd be as easy for you just to do an HTTP POST of form data which already supports file uploads as part of a greater entity.

I guess my questions would be whether doing an http form post (and attaching a file to it) is easy in Flex. Second question would be whether this is the most common approach, and third would be for this kind of use case, how else would you solve the communication between flex and the server? Can you drop a BLOB into an XML packet or even a formal SOAP call? Are there standard approaches for doing this in Flex?

Just to clarify, this use case is distinct from a Flex file upload tool optimized for uploading multiple files that are independent of other data. I'm looking to have a way of uploading a User with first name, last name, DoB, resume and photo and am just wondering the default approach and perhaps any other alternatives . . .

Any input wildly appreciated!

Comments (10) | Print | del.icio.us | Linking Blogs
Comments
[Add Comment]
I had a situation where I wanted to save document(s) to a collection but I wanted it all to be in the same transaction.

Without getting into using a session, I uploaded the file then sent the filecontents back to flex using 'cffile action="readbinary" ...' then Base64Encoded the contents with cfoutput. Now, the flex client will recieve a data_upload_complete event (or something). Once that event fires, the base64Encoded string is in event.data. You can use the mx.utils.Base64Decoder to decode this text and drain() it to a bytearray. Once your VO contains the bytearray, you can send it to the server as normal and it will contain your blob field.

I probably listed the wrong functions/class names but this might put you in the right direction. You can always email me and I will send you an example. I was going to blog about this but... my blog has been dead for too long.

Scotty
# Posted By Scotty Scott | 5/6/07 1:27 PM
@Joe, Thanks for the link. Is it just me or does this approach seem like a step backwards? I want to have a simple "add user" form with FirstName, LastName, DoB, Resume (file) and Photo (file) and if I use a Flex form I need to take all form elements where FieldType <> FileUpload, upload that to some kind of add() method, get the ID back and then "for each form element where FieldType = FielUpload" use some kind of edit() method that was custom written to support Flex specific file upload post requests?

Gotta love that the sample Adobe code is in PHP :-<

I see you can add additional properties using URLRequest.method and URLRequest.data, but I'm guessing you can't include more than one file upload field (as opposed to supporting multiple files in a single field using FIleReferenceList.browse - I mean a separate field for selecting a single resume and a single photo from different locations with different properties).

Just seems a little strange to unbundle something that was already usefully bundled. Maybe I'm just not "thinking in Flex" yet.
# Posted By Peter Bell | 5/6/07 2:13 PM
@Scotty, Wow - I was hoping to find a little easier wy of solving the problem as for larger file sizes uploading, downloading and then re-uploading is a little more than I was planning to do, but I'd love to see what you did and will ping you offline - thanks for the comment!
# Posted By Peter Bell | 5/6/07 2:22 PM
We are handling file uploads and form data submission separately in our admin app.

We are using Flash remoting now for data transfer between client and the server, but we had started at the beginning from HTTP POST/GET requests too, this definitely can be an option for you too.

I can share the screenshot of UI with you offlist and discuss technical implementation.
# Posted By JabbyPanda | 5/7/07 7:14 AM
Hi There,

I'd love to see the screen shot if you don't mind. I'm completely new to Flex and honestly at the moment am looking at this more from a "what should my service layer API be to support flex" than a "how can I finish my flex application", but it won't be long until I have to fire up Flex builder and make some sense out of this, so thanks very much for the offer!

I'll ping you offline.
# Posted By Peter Bell | 5/7/07 7:38 AM
Can stored procedures somehow be used for CRUD? I saw another guy discussing its benefits (outside of a CF context). Been waiting for his next article going into the details.
# Posted By Paul | 2/10/08 2:24 PM
Yep. They can be. And you can generate them - providing your DBA will let you. Terrence Ryans Squidhead does this, I believe. It's just another form of templates based code generation.

As usual, there are strengths and weaknesses.
# Posted By Peter Bell | 2/10/08 4:53 PM
The answer is ByteArray. You can turn any ActionScript object into a ByteArray in one line of code. This can be a complex object containing strings, numbers, and yes, image data. You can upload a ByteArray using URLLoader. It's similar to a BLOB, but I call it BARF (Binary ARray File).
# Posted By Harry B. Garland | 4/15/08 8:34 PM
@Harry,


Thanks for the info - will check it out!
# Posted By Peter Bell | 4/15/08 9:48 PM
[Add Comment]
BlogCFC was created by Raymond Camden. This blog is running version 5.005.