2009
client side image resize flash cs4 – filereference.data
Hi,
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.
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
Amazing work!!! I’m just doing a project with the same feature here… thanks!!!
I’m curious, is this doable with cs3? flash player 9.
naa,
it’s a new feature only possible with flash player 10, and thus only available with cs4 (it won’t compile with cs3)
the thing you can do with cs3 is to upload the whole image (full size) to the server and then download it from the server to manipulate it.
ic, thanks for the clue… ge…
to test the demo on my host, do i have to alter anything? or just upload the production folder to the server? any permissions to set??
just upload the production and set 777 permissions to the upload folder.
Any tip how can i send the image to an imageContainer movie clip? Im new at actionscript document and as3 so im having a hard time to learn complicated codes.
Thanks. great work.
BIG thanks from Russia!!!!! This is so cool!!!!!!!
im always lost after the file browsing.. can u add comments for what the codes are for or can this be doable at flash document and not from .as file? Im done with the image editing and tinting, also with saving… all i need is the file browsing and uploading to finish my project. Im having a hard time with .as files coz of weird errors like static movie clip or something.
Thanks.
Hello, I testing this script on my website but a message “Error!” when upload pictures :-( 777 permissions are setting. Where is the problem ? Thanks, its possible to email me ?
Well to add possibility multiupload photos ;)
hi
everything worked great except for the upload function. when I press upload it says “Upload Failed” what am i doing wrong?
please check this line in the html file :
flashvars.path = “http://www.adylevy.com/demo/imgUpload”;
it should point to the location of the receiveFile.php file.
if you still have problems , let me know and i’ll try to help.
Superb! This is something I’m looking at to do with a current project I’m working on.
Oh, could I ask you to delete the photo I uploaded? I did it just a few minutes ago. Thanks!
any idea on how to use this with django ?
thanks .
don’t really know what django is ..
django is a really good web framework. its way better than php. Check out http://www.djangoproject.com. Also can you add anti-aliasing (image smoothing to this) the resized image needs to look better. But how do you this outside of flash, I dont want to deal with flash. I just want to save the image and add it to my database for reuse. What does the flash send to receive.html ? Thanks.
This is great! I have been searching high and low for something to resize my clients images. The Java implentations work ok, but that just caused more confusion as none of my clients had Java installed anyways!
Good job!
Very nice indeed. Just what I needed.
Things I am adding:
1) have a loarder indicator while the image uploads.
2) have a predetermined 3 size selector for the clint to upload.
3) have a selectable border/frame that will cache with the image
4) image smoothing on/off functionality
Chat soon.
SkyL4rk
Dear all,
How can i publish this in my ASP website?
I have downloaded the Php file & changed to asp.
But i could not do it.
Please anybody can help?
Hi people, is the maximum upload size dictated by PHP.ini memory_limit value?
Thanks
Jonny
Hi, I get the error – “upload failed” in fact upload succeeded. So now I’m curious – is this an error? Or I’m I doing something wrong – the reduced file show up on my server
Hey, very good implementation. I’m very impressed with what you have done.
Do you know if non-image files (text files, swfs, flvs) can be transfer to a server via the load method? I’m having a terrible time with the filereference.upload method [none of the servers I've done testing have responded well]. I was thinking on customizing your great application and leave it open to upload a wider sort of file types.
yeah, it’s possible to transfer files via that method to the server , but you will lose the progress event of the filereference.upload method,
(it’s on my todo list to implement chunck transfer method for the multiple file uploader in the future)
Hi! How about a spanish translation? If you give me the instructions I can translate it for you
Thanks and good work!
Would it be particularly difficult to extend this to support multiple files? e.g. the user selects ten files, the script loads, resizes and uploads each one in turn and keeps a count of how far it is through the list for a progress bar showing how many have been uploaded?
I’ve done a lot of development in PHP but not done any flash development and I’m finding it hard going!
@Ian – take a look at : http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
So sorry I missed that! Looks great – shame about the need to send all the photos in one chunk without anyway of having a progress bar. Ideally, I’d want to be able to upload very large numbers of photos (~1000) at a time, and I’m not sure it will be so great for that. I’ll keep checking though, as you seem to be making amazing progress – thanks for your efforts and for sharing so openly
I really love like your image uploader, looks good, easy to use, easy to install…
I would like to convert it to dutch though but was not able toe find the Remove text inside the imageStrip.
If someone could reply that be great.
Keep up the great work!!
@Jeroen – am working on a simple way to translate the component to different languages ,
will upload a new version soon.
Tout d’abord merci pour votre programme.
Il fonctionnait à merveille mais depuis hier soir plus moyen d’envoyer la moindre photo sur mon serveur, mon site est hébergé chez 1and1 je leur ai téléphoné mais sans résultat, la personne que j’ai eu n’a même pas dénié m’écouter.
par avance merci du nécessaire fait
PS le message renvoyé lors de l’envoi d’une image est (((( error ! ))))
Is it possible to preserve EXIF data from a jpeg image after resizing? Or to extract it before the resizing and send it to the server along with the upload?
Hey im working whith a projekt, and i wonder how to change the alpha value of the image , with an slider in flash CS4 ?
Does anybody knows the code for that ?
I trying to upload the file on my local machine but it shows me ERROR .Please let me know
what could be cause?
or any setting which is requires to function this script well??
Please assist me if naybody knows..
Great Job ;)
Hye everybody!
I have a small question : Can i upload automatically the image after the visitor click on browse? I don’t want the client click on the upload button. Is there a solution? Thanks a lot and excuse me for my bad english
hi everybody
can you help me to answer my two questions?
firstly, i can find out where the rotate function is
and secondly, why i can upload the image to a folder in my local disk
thanks for any help.
hi everybody
can you help me to answer my two questions?
firstly, i can’t find out where the rotate function is
and secondly, why can’t i upload the image to a folder in my local disk
thanks for any help.
This Component is amazing finally i reached this place after search for months. Thanks to Google God and Flex blog examples i found the link there. I was in need of this component desprately. Thanks to you.
I have one query. Its in Flash how the same can be used in Flex. I am new bee to flex
Nicely Done!!!
LMAO (uploads folder)
TNX (for the code) lol
Does this keep the transparency in gif’s and png’s applied?
Hi. Tools like this are still rare, but very useful.
I found that your tool is not easy maintainable. Probably you have decided to be intended as ready for use tool.
I need some more functionalities that I can put by myself, but as I can see especially the javascript was probably pass through a minificator and what is bad for maintainability – through obfuscator.
Can you provide the real javascript file with normal looking code, with nice and understandable names, so I can change it? I need just the js file.
Thanks for your efforts and your time :)
Miro.