client side image resize flash cs4 – filereference.data

well in the latest version of flash (cs4) there are some improvment to the actionscript classes, with some security changes.
i noticed that there are no sources for client side image manipulation tools that uses this great feature.

i did came accross a brilliant work of someone (i don’t remember where it was :( … ) that used the filereference.data to play mp3 files with some nice mainipulations to the audio from the user hard-drive, i’ll try to find a reference for it soon…

anywayz , i wrote a nice demo that loads an image from the user harddrive , show a preview of the image (scaled to max_height and max_width) , have a rotate option, and upload option that encodes the file to a 90% quality jpg which reduce the image size dramaticly , that way a normal image, that has been take with a camera (around 3-4 megs) will be uploaded as a 80k – 100k jpg file.
that will save alot of time , and eliminates the need for a server side image resizing (wasted server time & disk space)
more, you can use the script to add color transform manipulation to the image (b/w etc…),
cropping features, (maybe content awareness – image retargeting ).

attached is the fla (cs4), actionscript classes, php source files.

still things that i intend doing , upload precentage bar, and status msgs (jpg encoding / image scaling / uploading …)

if you want to use the code, and improve it be my guest. but let me know and it will be nice if you leave some credit.

client side image resize cs4

the demo : Client side image resize demo

package : Client side image resize Source

Important !!

version 2 is up, check out : Multiple files uploader with client side resize

Posted in as3, Flash Demos, php


  1. Angl said,
    November 29, 2010 @ 3:10 pm

    You open the file “main.as” and “imgUpload.fla” in Adobe Flash. Change _MAX_WIDTH and _MAX_HEIGHT to the output size you need (in “main.as”), then change to “imgUpload.fla” and export movie. Replace the old file “imgUpload.fla” in production-swf folder with the new one (that you have just exported). Voila. :)

  2. CristianP said,
    December 6, 2010 @ 4:09 am

    Is not working, i get error again and again, i just change the path in the as class and in php file, what can it be? permission 777 to uploads, dont know wht to do

  3. cristian said,
    December 29, 2010 @ 11:03 am

    Great!Good job :)

    By the way, if you add “_bitmap.smoothing = true;” after line 169, the generated image will look much better! Congrats, amazing source.

  4. Justin said,
    January 12, 2011 @ 1:42 am

    I found a solution to my problem and I thought I might share since it took my a while to find an answer.

    I added this to the reciveFile.php
    //////////////Torwards the bottom of the page……
    if(move_uploaded_file($_FILES[‘Filedata’][‘tmp_name’], $target_path)) {
    echo “status=1&filepath=$target_path&size=”.$_FILES[‘Filedata’][‘size’];
    /////////// I put this…….. and it fixed my problem
    if(!chmod($target_path, 0755))
    echo “status=0&msg=Error”;

    I love this script and it’s been a big help… Thanks again Ady

  5. Ty said,
    February 17, 2011 @ 6:36 pm

    Thanks much for this — it worked quickly. But please: you must make your PHP code more secure! People are downloading this and dropping it on their servers, after all.

    For instance, your code doesn’t check the file that’s uploaded to ensure it’s an image. I could upload any PHP file I choose and have immediate control over most of the content on your web server!

    Here are my edits to the (single-file-upload) PHP file “reciveFile.php”:

  6. frank said,
    February 23, 2011 @ 10:48 pm

    Im new to this put is there a way to open this in flex to debug it ?

  7. Pla said,
    May 4, 2011 @ 10:59 am

    This image uploader (single image) has been very helpful for me to find a solution I was looking for many days. I need a little alteration to the main.as to give me an image output with fixed dimentions. For instance, I need an image out put of 100x100pixels (widthxheight) irrespective of input size and proportionate resizing. How can I achieve this? (I am aware that the output image may be awkward). – Thank you in advance.

  8. Rich said,
    July 10, 2011 @ 2:49 am

    Thanks for the excellent and simple script.

    RE: Ty’s message on 17th Feb

    It would be safer to check the ‘type’ array value for the content-type rather than assuming the files have appropriate extension names. Checking file extension alone relies in the fact the server is correctly configured to parse .whatever extensions in the intended manner. e.g. it is easy to setup Apache to parse .htm files as .php, in the same way a server could be misconfigured to parse .jpg files as shell scripts.

    I would simply check the content type to start with “image/” and ignore/delete any files that don’t match.

  9. alden said,
    February 21, 2012 @ 8:25 am

    how do i add a comment to the image that i am uploading…… pls reply…

  10. Confused Ynah said,
    January 22, 2013 @ 4:33 pm

    hi im having a problem in uploading.. it always say error.. i’ve already edited flash vars and permissions.. what am i missing? :(

  11. Rakan said,
    June 23, 2013 @ 2:43 pm

    i want something that could be used with JSF 1.2 As an image compression code … can anyone please help ?

  12. valery said,
    July 5, 2013 @ 10:20 pm

    mee too !!! hi im having a problem in uploading.. it always say error.. i’ve already edited flash vars and permissions.. what am i missing? :(

Leave a Comment