2009
multiple files uploader with preview on client side
Hi,
well it took a month but i’ve added some features to the image uploader,
so now it support multiple file upload , it still doesn’t have any progress bar as adobe decided to add the security feature (bug ?!) that allows uploading or downloading data from the server only triggered by a mouse click,
ok .. so the upload button supplies the click, but then after the first chunk is uploaded it should (and i read alot about it ..) continue the next chunk as it was triggered by the same click, but no no, it throws Error #2176 !!!
i sat hours trying to break this devil but nada …
so at the end, i packed all of the files in one post being sent to the server all at once to pass the damn bug!
the jpg encoding still needs some tweeking as it causes the computer to freeze for a second,
for now i added only a rotate function to the image, but you can add as much features as you want as you can download the source files.
feel free to comment and request features.
Source : multiple files uploader with preview on client side
Demo : multiple files uploader with preview on client side
update : v2.01 is out (29/9/09)
First i’d like to thank you all for the suggestions, requests and support for the work,
thanks to Swen for the french translation of the uploader , you can download the fla file here with the original v2.0 files here
i came across a great fix for adobe’s JPEGEncoder class , making it async – by Derrick Grigg ,
so i’ve implemented it in my uploader, so now it’s faster and has better performance.
plus some minor bug fixes.
i’ll try to implement xml language file so it will be easier to translate it to any language,
and will implement a better javascript support + hopefully i’ll have time to create uploading preloader …
ENJOY!
* if you find this script usefull, help spread the word , use your favorite social bookmark tool to tell the rest ! *
140 comments »
Leave a Comment
-
[...] Creditos: Ady Levy – Matéria: article [...]
-
[...] Thema erledigt. Falls es mal irgendjemandem weiter hilft: Benutzt habe ich Version 2.1/ des Client Side Resize Skripts von adylevy.com. Hier muss leider die swf-Datei komplett neu [...]
-
[...] 2 is up, check out : Multiple files uploader with client side resize Posted in Flash Demos, as3, [...]
Thanks for that – just what I wanted! Was just going to go with your old version, but this looks like it’s perfect!
Thanks! Thanks! Thanks!
This is awesome! Works like a charm!
Muchas Gracias!!
I’m having a problem when uploading more files. I don’t know if it’s the size or the number of files, but with 2 files it works, with 3 files it stops at “Preparing files…” (does not freeze or use any CPU, but it doesn’t do anything after this). The images are about 2M (from a camera).
Hello!
I’want to translate your uploader in French, everything is done but I’cant find where are the label “Rotate”, please can you explain me where is it?
Thanks!
Hi!
Well thanks for the translate,
when your work is done, send me the files and i’ll share it with others along with the original version.
the label rotate is placed in the imgBox.as file in the Classes\image folder, line 52 :
var myMenu:Array = new Array( { label:’Rotate’, _function:eventRotateHit } );
Good luck !
This is sweet! But your source files are downloaded as a .rar :( I am operating on a mac, anyway to have a .zip option?
Ady,
Love what you’ve done here, please help me commercially deploy the work on a large real estate portal!
Hi there, great work on the version 2! Love it!
Btw, I ran into some problems while test using in on my website. The status stuck at “Sending Files…” and just idle. I did change the settings on the uploads folder into 777. May I know what other problems I might run into? Thanks. =)
It won’t let me extract the file :S
Hmm.. could you check the download file for this please, the .rar shows one file NirvanixBinaryUploader.as
doesn’t want to extract. where as the previous version came in a different format and was easy to use. Any chance of the same thing here? as this program is exactly what i’ve been looking for
Thanks
Jonny
Great job Ady! This works great.
Can you please tell me what type of licensing you have placed the code under? I would like to customize it and use it on my real estate site.
Thanks!
Thanks,
everything i publish here can be used under Attribution share alike license (http://creativecommons.org/licenses/by-sa/3.0/)
it would be nice to have a credit somewhere on that site.
Enjoy.
Hi
Like your uploader a lot.
Will this version still resize before uploading like the single file version does?
Thanks
Joris
Ady,
This is a great start for a project I have. I ended up rewriting quite a bit, but couldn’t have gotten started without this. I am going to be using this for a commercial project, so could you get in touch with me to as my project doesn’t precisely conform to the Attribution share alike license.
Thanks,
G
Ady,
This seems to be very close to what I’m looking for. I’m using Uploadify (uploadify.com) for regular uploading, but I want to add the ability to capture a webcam image and upload it. The problem seems to be with the ByteArray. I have it set to capture the cam image, just need to get it uploaded. If you think you might be able to help, please email me. Thanks!
jlee42 [at] gmail [dot] com
Hi Ady and Co!
Thanks a lot for this super great script.
I have a question. I’m trying to generate a little .air with this beauty application.
But when I try to publish it (Flash CS4) to AIR (1.1) i have un error: flash.net:FileReference.load() does not exist!!!!!
We can’t do a FileReference.load() in an AIR application?
i try also with flex builder 3 and it’s the same problem.
Could you help me? your code is greate and i would like to use it with AIR
thanks a lot
Hi, Great work!
I want to use it in asp.net project. Do you have some demo about .net? Thanks
Why id dosn’t open bmp files?
hmm..
i’ll add it to my todo list :)
Hi Ady,
The script is really great, thanks for it. About a progress bar – I think you can take a look at other open source flash upload plugins,like uploadify.com or swfupload.org for an idea to fix this issue. They seem to be showing a progreess of multiple files.
And one more feature request – it would be useful to make it possible to configure image size in JavaScript code without the need to recompile flash. And even better is to make a select combobox of sizes (e.g. small, medium, large) specified in JS configuration
Thanks for your efforts!
hi,
it took me some time to find this out:
The script didn’t work for me because you’re using short opening tags in PHP like <? and <?=. Please don't do that, it just causes trouble.
Except from that, your script works perfectly well. Thanks for that!
greetings
Micha
Hey vadim,
Thanks for the tips, i would show the progress bar if it was an easy task (well its not that hard actually),
the thing is that other open source uploaders use the filereference.upload method which dispatches the progress event,
creating a jpg out of the original image forces me to use a different upload method which lacks (Damn adobe!) the progress event, so in order to imitate it one need to upload the file in lets say 10 chunks to show 10 level progress bar ..
meaning work on the client and the server side.
about your javascript tips, i’ll consider it for the next version.
Cheers!
Hello, thank you very very much!
sorry for my english,
Tell please and as under condition of successful loading to clear all turn of loading. And that turns out that at file addition, old into turns are loaded repeatedly. And if files inconveniently is more 3 that to press Remove.
@nayre – I think i understood :)
will try to fix that on the next version.
Hello from Russia!
Can I quote a post in your blog with the link to you?
@Polprav – of course.
Great little app!
Just have some small requests that perhaps you want to implement.
1. An extra Combobox (dropdown) where you can select the max size for the pictures. (This is how it looked in my modified version: http://img39.imageshack.us/img39/1246/examplei.png)
2. Add functionality to pass the EXIF data in the source image to the resized image.
3. Add a progress bar for when the pictures are uploaded. (Look at this page on how to do it: http://active.tutsplus.com/tutorials/actionscript/creating-a-reusable-flash-uploader-with-actionscript-3-0-and-php/)
@Emil
Thanks for the support :)
i’m working on an improved version that will handle mp3 files (with preview),
image upload progress bar and some customizable variables.
(as for the 3rd request – it’s complicated doing it without filerefernce object as i’m changing the bytearray data – should be done in a diff way.)
wait for it ..
You are my savior man. this is just what i’ve been looking for. Thanx a lot.
This exactly what I´ve been looking for!
I just need a little help:
i suppose I have to edit some lines in the “index.php” file.
Fo example the line “$path=” or
“flashvars.path =” ?
But what do have to write in there?
It would be awesome if you could give me tip what I have to edit and waht i have to fill in
to get this app working!
Thanks a lot and sorry for my english ;)
Leon
Nice work – but, if I put for example 10 images made by 12Mpix camera script will almost crash. I think its not good idea to load images and previews simultaneously.
Thanks a lot for this app, it´s exactly what i need; well almost exactly. I hope you can help me with this:
How can I limit the number of images for uploadin, what if I only want to give chance to upload ‘n’ images to the user.
Thanks for your help. My best regards
Sorry for my English.
hmm…have the same issue as someone above, it works great from the flash ide, but just stalls on ‘sending image’ when deployed… any thoughts on what I missed? Thanks!
Ady,
Awesome app!
I’m looking to deploy this on a site I’m creating (of course I’ll give you props and a link!), but I’ll need this to also upload the original image as well as two sizes of thumbnails (users are submitting very large images to be printed). I’ve delved into a little actionscript in the past…could you at least point me in the right direction on how to accomplish the triple-size image upload from each image? Thanks!
Cory
@Cory – Thanks !
the whole idea of this app is to upload small sized images to the server, to save bandwidth (and of course – the whole image preview and rotating …)
i’d suggest that you’ll handle the image resizing on the server side if you want the original image.
means – don’t resize the images before uploading them, and use a server side script to resize the images.
Ady.
Ady,
Thanks for the response. I of course tried things the way you said for my first attempt. I’m on a shared server for hosting and I only have access to 32M for php script memory. This isnt enough for resizing the large images I get. Imagemagick and GD in php both throw memory allocation exceeded errors when I try to resize these large images. But I want to be able to show the users a thumbnail, hence the need for client-side resizing.
Hi Ady,
Nice work. Could you give me an advice, how to limit images count in ‘gridPresenter’ to one? I like your v2 uploader but need it for only one image. Thanks
Update:
I’ve successfully modified the code to upload both a thumbnail and the original. BUT, it only works on smaller images for some reason. On larger images I get an error 2015 Invalid BitmapData….any ideas?
Hi there,
I’ve been trying to download the files several times now, but I can’t seem to open the AS3 version of your uploader. I constantly get an error: Unexpected file format. (Using Flash CS3)
Looks to me it’s an AS3 file, written in CS4?
Can someone please save it as a CS3 file, or is that impossible?
Thanks in advance!
Frits
tweeted it. added 2 network. thx ady :)
So far the script looks great but I have a problem. I’m having trouble getting the file up to my server. I get “”Error #2032: Stream Error.” any ideas?
hi ady, that is u uploader in Portuguese-Brazilian.
source: http://www.fish.jpa.com.br/ex/solucoes/imgUploadv201-ptBR.rar
tks dude
Hi,
I have seen your code. it is very helpful and great. Can you also provide this for asp.net in any language hence this can prove its importance for .net users also
Please inform on my email id
I intent to use your flash uploader on my website, but I need it resizes images on the client side at max 1600px.
Can someone help me ? I have never programmed with ActionScript and I do not have any compiler yet…
Thank you
I really like the concept. I’m using a Java resizer for now, but I really wish to go the Flash way instead. The only problem with Flash is the VERY poor resizing quality. Both PHP and Java ways to resize images use a bicubic filter that renders the image perfect, but flash uses nothing like this and renders it all pixelized. Can’t display such images on my sites. Do you know any way of adding a render filter so that the resized image is not so much pixelized? It looks like when people used to change the attribute in HTML back in 1990′s. Waiting for your reply. Nice work tough, I really like the concept, just needs more quality in the resized image.
Its a good work! Thanks!
hi ady…..lovely script ……i just want a help…since i haven’t worked on action script
before so i need to understand it better….could u just tell me where u have put the resizing code??…..so that i may understand the working better….. n also i have a query….do the resizing of the images are fixed to a particular ratio…or we can set it to vary by giving
the user a choice to choose from different sizes he wants the pic to be resize in. If yes please help me for this ….it would be a grt help if u guide me hw n whr to put the size choices…….thanks …..waiting for ur quick responce…
hi ady …..m still waiting for your responce…..please i want the to know how i can let the user to choose from the standard resolutions:
640×480
1024×768
1600×1200
1280×800
before the actual resizing of the image…..please help me…please
Hey Ady,
Thanks a lot for sharing this man… Still haven’t integrated it, but the demo works just wonderfully :)
cheers