File manipulation client side with the Flash player with Flex 4 and Coldfusion

by 1:44 AM 27 comments
Ever wanted to load an image into your web application instantly? Well now you can. Well you have been able to for a little while actually, it was introduced with Flash player 10 and Mick Chambers has a good article on getting started with reading and writing files from withing the Flash player.

What you need for the demo: Flash 10 and Windows.
What I needed: Coldfusion ( I'll assume the same can be done in .NET/PHP ect ), the updates to Flexbuilder 3.3 SDK or Flex 4 ( I'm using Flex 4 Gumbo Max pre beta edition ) and that's it.

I don't know what the issue is but I just can't get the file.load() methods to work on OSX or my Ubuntu partition. If you know why or how to fix this please let me know.

This code should be reasonably easy to follow but here is a quick break down.

Using the new Flash file reference methods load a file into the Flash player as a byteArray ( binary ). At this stage my demo is only JPG but the AS3 core library also has a PNG library. I set the image data to the byteArray so we can preview the size of the image and how it will look once its been converted.
Clicking the resize button converts the byteArray to bitMapData and based on the value of the HSlider, work out a scaling factor and send this to the Matrix.

Then create a new bitMapData and draw the old data with the new Matrix transform. There are many additional things that can be applied to the data check out the references for the rest.

Finally convert the bitMapData back to JPG format and re-assign that to the data property of the image.

Once it's converted you can save it back to your local file system without the server ever seeing the data or knowing what file you loaded. It has no performance impact on the server and uses no bandwidth or traffic.

As the result is binary as a byteArray we can also send this back to Coldfusion and save it directly as a .jpg The nice thing is that the image sent back to the server is the new size and simply needs to be written to disk as we all know that server side image resizing/manipulation can be resource heavy.

Application?
OK it's a nice feature but what can I use it for? Say you have a real-estate web site and you have many agents needing to upload images. Now they can do all the resizing/manipulation locally which in general is going to be reducing ( but could be enlarging ) the size of the images within the application removing the need for either a thick client side app ( Photoshop/Fireworks/Paint etc ) or the server side manipulation saving traffic, server load and upload time.

Source view: Source View

Full screen app: Full Screen Resize



Sources used:
Mike Chambers Blog
AS3 core library
Andres Alderson
Adobe Flex RFeferences
House of Fusion Flex mailing list

I like having a working demo that you can try for yourself saving back to my server is enabled and you can browse to the saved images. I clean this up every few hours with a scheduled task.

I don't yet have a need for this in our current applications...yet but I think it can be very usefull. Sure the code needs some work and I'd like to work out why it's not working in OSX/*nix but I think its a good proof of concept/starting point.

Be aware that trying to resize a large/high quality image will impact browser performance for the duration of the conversion. Also there is no error checking if you try load a non jpg into the browser its not going to work. And while the controls are a little rough they still give a good indication of what can be accomplished.

Paul Kukiel

Developer

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

27 comments:

  1. TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at ClientMemoryLoad/onLoadComplete()

    :)

    ReplyDelete
  2. What Operating system? You need Flash 10 and Windows for it to work.

    ReplyDelete
  3. I have to say that this is a really great concept and i would love to see this put into a practical application.

    Awesome work Paul.

    ReplyDelete
  4. What do you mean you need Windows? Is this not cross platform, doesn't work on Mac / Linux?

    Or is it that Flash 10 isn't out for those platforms?

    ReplyDelete
  5. I'm not sure yet. Flash 10 is available for OSX and *nix but either I'm not doing something correct or file loading just dos'nt work in OSX/*nix.

    ReplyDelete
  6. How can I upload this to the server after modifying it if I'm not using ColdFusion? I don't understand what you're doing with the RemoteObject object.

    I can't update the FileReference and use FileReference.upload(). Is there another way around this?

    Dave

    ReplyDelete
  7. If you are not using remote object you could probably convert it to a base64 string and send it via webservice of httpservice.

    As for your 2nd comment its probably because you don't yet have the Flex 3.3 SDK setup.

    ReplyDelete
  8. Is there a bug for this in bugs.adobe.com, because I have the 10,0,22,87 debug player here, on OpenSuSE 64bit (but with 32bit FireFox+plugin), and get the error as in the first comment.
    It is meant to work...

    ReplyDelete
  9. Thanks Tom, It's reassuring to know its not just me either. To be honest I haven't tried looking for a bug mention..... I just looked through all the flash.net.FileReference bugs underflash player and I can't see it mentioned. I hope to put a smaller demo together and raise a bug shortly.

    ReplyDelete
  10. To Dave March:
    There are libraries for using the RemoteObject with PHP-based servers:

    http://livedocs.adobe.com/flex/3/html/help.html?content=data_access_4.html

    ReplyDelete
  11. Hi Paul,
    Are you able to use Design Mode in Flex Builder with your application?
    And, if so, what exactly versions of Flex Builder and Flex SDK are you using?
    I'm tried to get Design Mode working, but got the error:
    "Design mode: Cannot load textLayout_textField.swc (reason: ERROR: Load Verify). It may require classes (such as Adobe AIR components) that are not supported by design mode. Check the Eclipse error log for more details."
    Flex Builder version: 3.0.2
    Flex SDK version: 4.0.0.4904

    ReplyDelete
  12. @Dmitry

    Yes I was able to use design view. This is because I was using Flex Builder 4. The trial has expired now so I'm back to 3 and have not yet attempted to apply the 4.0.x SDK so I am unable to comment on FB3.

    ReplyDelete
  13. Hi Paul,thanks for the script..I wanna ask,are the codes for flex 3 or flex 4?Thanks...

    ReplyDelete
  14. @ handoyo I used FlashBuilder 4 but if u install Flex 3.3 SDK into FlexBuilder 3 it should work. Also you need Flash 10 to make use of these features.

    ReplyDelete
  15. This is my PHP version of your great script:

    http://odvl.ru/projects/freelance/2009/04/12/flash-preupload-image-resize/code/client/bin-release/Main.html

    Source code: http://odvl.ru/projects/freelance/2009/04/12/flash-preupload-image-resize/flash-preupload-image-resize-2009-04-17-23-45.zip

    For communication between PHP and Flash I utilized AMFPHP library.
    Flex SDK 4.0.0.4904
    Adobe Flex Builder 3.0.2

    ReplyDelete
  16. @dfediuk

    Thanks this is really usefull I may have to setup AMFPHP and try this out.

    ReplyDelete
  17. I m unable to view the source file ....please help....n guide me ....
    Thanks in Advance

    ReplyDelete
  18. Thanks I moved servers and forgot to update the "view source" link.

    ReplyDelete
  19. Severity and Description Path Resource Location Creation Time Id
    Design mode: Cannot load applicationupdater_ui.swc (reason: ERROR: Load Verify). It may require classes (such as Adobe AIR components) that are not supported by design mode. Check the Eclipse error log for more details. Test/src SimpleEditor.mxml Unknown 1264057875109 159

    ReplyDelete
  20. Great work!
    Would you also please share the Coldfusion cfc, to save/upload on the server, or any other cfc example.
    Thanks and regrads
    Hamid

    ReplyDelete
  21. @Hamid if you browse to: http://cf9.kukiel.net/demos/FlexImageResizer/srcview/index.html then down the bottom on the left side you can download the source files which includes the cfc.

    ReplyDelete
  22. Hello Mr. Paul is it not possible without flash to make a thumbnail of image at client side and then upload the thumbnail not the whole image

    ReplyDelete
  23. @Parveen Rathi Yes it's possible. I have fixed the code example so you can view the source. From that you will be able to work out how to make a thumbnail.

    ReplyDelete
  24. Hi Paul,
    How did you get this resizer script to send to the server? I could not get that button to work...I am a newbie at this all.
    Thanks,
    Jim

    ReplyDelete
  25. @Anonymous
    Basically it sends a binaryBlob to ColdFusion. The binary is the raw image data.

    ReplyDelete