Solved

Flex 3 Upload a Bytearray as a JPEG upload to a server via HTTP Post

Posted on 2009-07-11
4
9,702 Views
Last Modified: 2013-11-11
I have a Flex application that allows users to build simple slides, a la Powerpoint, by entering text, uploading images and selecting from a clip art library. At the end of the process, I'm writing the contents of the canvas object to a ByteArray and would like to upload it to an ASP.net webserver. I have scripts on the server that accept user uploads via FileReference, for uploading backgrounds and images, but am running into a wall trying to upload the final image. What I need is something like what happens with the filereference class, but with internal data, rather than the user picking a file. What would be ideal would be direct access to the data and filename vars in place of the browse() method, but that's not supported that I can see.

I have somewhat of a hack working (code below), where I base64 encode the bytearray and send it as the value of a POST var. I can handle this on the ASP end, but I'm thinking there's probably a cleaner way to do this built into flex that I'm missing. I need to send several other variables along with the image, so doing a binary transfer won't really work.

Is there something I'm missing or a simpler way to do this?
//write the canvas to a bitmap
var finalBitmap:BitmapData = new BitmapData(MainCanvas.width,MainCanvas.height);
finalBitmap.draw(MainCanvas);
				
// write the bitmap to a bytearray
var jpgEncoder:JPEGEncoder = new JPEGEncoder();
var imgArray:ByteArray = jpgEncoder.encode(finalBitmap);
				
trace("Arr len: " + imgArray.length);
				
// encode the array for web transfer
var imgEncoder:Base64Encoder = new Base64Encoder();
imgArray.position = 0;
imgEncoder.encodeBytes(imgArray);
				
// set up the variables for the POST
var uploadVars:URLVariables = new URLVariables();
uploadVars.user_name = "Test+File";
uploadVars.final_file = imgEncoder.flush();
 
// prep the request
imgUploadRequest = new URLRequest(FILE_UPLOAD_URL);
imgUploadRequest.method = URLRequestMethod.POST;
imgUploadRequest.data = uploadVars;
				
// and send it, setting up listeners for results. TODO -- Add a timeout listener
imgUploader = new URLLoader();
imgUploader.dataFormat = URLLoaderDataFormat.VARIABLES;
imgUploader.addEventListener(ProgressEvent.PROGRESS, UploadFinal_progress);
imgUploader.addEventListener(Event.COMPLETE, UploadFinal_complete);
 //imgUploader.addEventListener(IOErrorEvent.IO_ERROR, UploadFinal_Error); imgUploader.load(imgUploadRequest);

Open in new window

0
Comment
Question by:Baxter68
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 19

Accepted Solution

by:
Jones911 earned 500 total points
ID: 24832081
You can use a form post to accomplish this.  I can't find a ASP example but there is a php example:  http://blog.kukiel.net/2009/03/sending-binary-from-flash-10-to-php.html
0
 

Author Comment

by:Baxter68
ID: 24832132
That may be the best way to do it. That sample is doing exactly my current code does. Base64encode the bytearray and send it as a post var along with others.

I was thinking there might be a "cleaner" way to do it, like a built-in flash object I was missing, but that might be the way to go, thanks!
0
 
LVL 19

Expert Comment

by:Jones911
ID: 24832137
You could very well setup WebOrb for .NET and send it over AMF but that may be too much work and this solution might be easier.  Here is the link to webOrb anyway:  http://www.themidnightcoders.com/products/weborb-for-net/overview.html
0
 

Author Closing Comment

by:Baxter68
ID: 31602476
Thanks for that, I think I'll stick to the passing as base64 text way. The WebOrb is a good tip, I'll have to look at that for future stuff. Thanks for the assistance!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question