22
Jul
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 ! *


148 comments »

  1. Lolek said,
    December 18, 2010 @ 12:02 pm

    Hi, i have some fix for running on a Linux/Unix server (where path is case sensitive):
    1. rename folder from “zendAmf” to “zendamf”
    2. open in this folder file zendamf/server.php and edit function require_once() on 3rd line, change path from “library/Zend/Amf/server.php” to “library/Zend/Amf/Server.php”
    Nice project, thx. :-)

  2. Gerhard said,
    January 16, 2011 @ 6:55 pm

    What a nice and useful script. Very nice.

  3. Tony said,
    February 23, 2011 @ 11:47 pm

    Nice work but it says file uploaded but i cant find the file

  4. kri said,
    March 5, 2011 @ 4:19 pm

    Hello, really nice uploader. Is there anyone who tried and maybe succeed to make uploads directly to amazon s3 bucket? I am not flash developer, but I really want to make it work. Main idea.. for each image get amazon policy data from private server and then upload two image sizes to amazon – resized and original. It is interesting, but maybe hard to develop. :)

  5. Vale said,
    March 6, 2011 @ 12:22 pm

    thanks!!! very useful

  6. mehmet said,
    May 10, 2011 @ 11:38 am

    Is it possible to resize the image with the variable taken from input text?

  7. Keto said,
    May 12, 2011 @ 3:02 am

    Greeat script. It took me a while to get it to work inside Joomla, but well worth it.

    I now need to figure out how to send an email w/ the pictures attached when all of the files have finished uploading. Anyone got any ideas for me?

    Cheers,

    Kato

  8. Keto said,
    May 12, 2011 @ 5:24 pm

    Update: I put the code for sending an email right after “status=1″; at the bottom of the receive script. Now I get an email when someone uploads photos. :)

  9. Keto said,
    May 12, 2011 @ 9:24 pm

    Ooops, here we go again. This does not appear to work in Chrome, but works fine in IE9.

    Anyone know of a fix for this?

  10. joet said,
    May 18, 2011 @ 5:49 am

    Chrome 12/Vista seems to be fine with it.

    Is there a switch for single/multi upload? I love the preview and upload progress bar and the layout of the multi but would like to use it for single file download only.

  11. stephan said,
    May 19, 2011 @ 10:37 pm

    Dear Ady,
    your flash picture-upload-script is a blast – thanks a lot for that!!!!
    I have used Version 1.0 and implemented it successfully (i don’t need multi-pic-support and i could not get version 2.5 working)
    The only issue i have is that 400 / 600px in with is too less for my pupose and i have exactly no knowlegde about flash.
    Is there any option for you to compile the imgUpload.swf for me using 1200px width in both cases?
    It goes without saying that i would pay for this!
    Cheers
    Stephan

  12. Jae said,
    May 28, 2011 @ 7:46 pm

    Hi Ady,

    I was wondering if it’s possible to use this multiple file uploader with the Yii (PHP) framework.
    I have managed to get it working using no framework but the Yii framework uses the MVC approach.
    The controller and views will have to reference the receiveFile.php file but im afraid this is where I am stuck.

    So you have any tips or info that can help…

    Thanks in advance.

  13. mkafly said,
    June 6, 2011 @ 7:45 pm

    The status stuck at “Sending Files…”
    Error #2032: Stream Error.
    This turned out to be a Flash problem.

    Put this into .htaccess in your server to fix…

    SecFilterEngine Off
    SecFilterScanPOST Off

  14. Brenno said,
    June 14, 2011 @ 9:39 pm

    Hey, i liked! I want to translate for portuguese(brazil) for u.

    I want to do this to say THANK YOU!

    Brazil!

  15. Brenno said,
    June 16, 2011 @ 3:57 pm

    how can i do this for u?

  16. onur said,
    June 22, 2011 @ 1:33 am

    thank you very much. You are professyonel coder

  17. telmessos said,
    June 26, 2011 @ 10:53 pm

    is it possible to limit the number of pictures on this script? for example, not more than 10 pictures allowed?

  18. telmessos said,
    July 3, 2011 @ 10:41 pm

    Is it not possible to make this file transparent? Or possibly give a parameter to set Bgcolor?

  19. telmessos said,
    July 5, 2011 @ 9:58 pm

    I want to translate it completely to Turkish. But have no idea where the text labels are coming from :( Anyone can help?

  20. Codd said,
    July 14, 2011 @ 1:41 am

    I tried to use it for my website but everytime i click on upload it says “error uploading” :S
    I tried to replace the $image_path = realpath(APPATH ‘../uploads’) but still the same. :(
    i also gave the permission 777 for ‘uploads’ folder.
    How can i make that work?
    Can anyone just send me your recievefile.php then i can get the differences.
    my mail is cranium__@hotmail.com
    thanks in advance :)
    btw this uploader worked on my local.

  21. Codd said,
    July 14, 2011 @ 10:51 pm

    I solved the problem. The main reason of getting error is my hosting doesnt allow to execute the swf files. I gave the permissions then it worked.

  22. MICHEAL said,
    August 16, 2011 @ 10:34 pm

    HI,

    HOW TO INCREASE THE UPLOADED IMAGES’ DIMENSIONS? Do we have to change the swfobject.js file?
    appreciate for your help!

  23. Robbert Jongkind said,
    August 29, 2011 @ 12:25 pm

    Hi,

    I was wondering if you would like to customize your script for me (to the dutch language). Of course i will pay you for this ! Hope you can contact me on info@jk.nl or phone +31 72 5616039 asap. Thanks !

    Robbert Jongkind
    JK Webdesign

  24. Robbert Jongkind said,
    September 2, 2011 @ 3:57 pm

    Hi,

    I could still use your assistance. Feel free to send me an email with your telephonenumber so i can contact you.

    Kind regards,

    Robbert

  25. Palmy said,
    September 13, 2011 @ 1:02 pm

    Hi Ady,

    you’re doing great job with your project. I edited the fileReceive.php file and connected it with mysql. My single problem is that I’m still getting message “Error uploading files.” but files are successfully uploaded and resized. I have no idea what am I doing wrong…

    Thank you for any help

  26. Barnes said,
    September 16, 2011 @ 5:36 pm

    Hi, I find your component the best on the net. However, I simply need to limit the size and file count. Also, I need to do more action in my PHP after loading your component, it does not allow me to execute any php afterwards. Any help here?

  27. atik said,
    November 19, 2011 @ 11:30 am

    It was very useful,thanks a lot for sharing such a brilliant thing.can you help me with random or dynamic directory for uploading images,i tried but it always gives error. A response will be greatly appreciated.

  28. willockss said,
    November 26, 2011 @ 10:36 pm

    Can someone please help me with this. I need to make it in C#. Please i really need this help.
    Thank you so much

  29. Senpiet said,
    January 3, 2012 @ 6:19 pm

    Hello,

    Very great and brilliant job indeed. Thanks for this!

    Is anyone experiencing the same issue with the “rotate” function when the picture’s size is greater than 4mb? Have you managed to solve it?

    Also, when we upload a bunch of pictures, is there any way to reset the applet?

    Best

    Pierre

  30. Mahendra said,
    February 16, 2012 @ 8:50 am

    Hi it is great but in addition to rotate can we have a slider with leftside and right side button

  31. sumon said,
    March 13, 2012 @ 6:04 pm

    Very nice example. I need this is black background but SWF in white background. How can I do that in black background

  32. Travelfrog said,
    March 23, 2012 @ 5:27 pm

    Great work.

    I have this working OK and uploading images to a new folder name bzp11.

    However, I am having trouble passing an id variable via the URL of the index page so that the receiveFile.php can change the folder name each time.

    So if id is 11 then upload from production/index.php?id=11 to folder bzp11

    If id is 15, I want to upload from production/index.php?id=15 to folder bzp15

  33. ALEX said,
    March 31, 2012 @ 5:25 pm

    Nice Share ..

  34. archyp said,
    April 6, 2012 @ 6:20 pm

    What’s the best way to go about changing the color of the object from grey to something else?

  35. patankar said,
    April 16, 2012 @ 9:34 pm

    hi,
    its really rocking scripts … love it
    can any one guide me how can upload “pdf + image” files both.
    Please Guide me

  36. saif said,
    April 19, 2012 @ 4:33 am

    How to use this with asp.net

    please help

  37. Luk said,
    May 1, 2012 @ 10:03 pm

    Hello,
    your uploading script looks very well!
    Is there also the possibility that it can read a still existing directory on the server?
    So that it can show the content of an existing directory und give the chance to delete former uploaded files?

    Thanks for your answer!

    Lukas

  38. HTML5 said,
    May 11, 2012 @ 12:09 am

    What a great script, this is probably the best Image uploader that I have found. I will defo give this a mention on my blog. Great stuff.

  39. June 12, 2012 @ 2:50 am

    what a materpeace u have going on here

  40. drew said,
    October 21, 2012 @ 8:27 am

    i tried your uploader.. it works in xampp but when i have uploaded it on webhost and when you click browse it does not open the file locator.. help pls

  41. Kyle said,
    January 21, 2013 @ 4:11 am

    I really like this uploader. I want to use it to upload images into a gallery I made using simple php, a table, and a sql database. I don’t know squat about flash. Is there a good tutorial you can recommend or can you write a simple tutorial showing what needs to be changed in your uploader to make it work for anyone? This is way over my head but I’d really like to use it. Thanks!

  42. January 21, 2013 @ 8:44 am

    Thanks For Your Precious Work ..

    I Want to ask you following two questions:

    1. Is this Work is opensource and free ??

    2. Can We Use it on our website free of charge ?

    3. Can We Modify it ?

    4. Is it Licensed Under MIT-GPL act ?

    Please Reply ASAP.

    Coz I am going to use it in my website( Still Under Construction ).

    Thanks.

  43. php said,
    April 8, 2013 @ 10:24 am

    Hi: brilliant job. Thanks for this!
    i only want to send two php variable to send receiver file how can i ?? please Help

  44. May 8, 2013 @ 7:12 am

    Generally I do not learn post on blogs, however I would like to
    say that this write-up very pressured me to take a look at and
    do so! Your writing style has been surprised
    me. Thanks, very great article.

  45. mahesh said,
    June 4, 2013 @ 11:53 am

    NOT WORK IN ie

  46. syarif said,
    September 7, 2013 @ 1:55 pm

    i found error

    http://localhost/imgUpload/production/receiveFile.php 404 (Not Found)

    because i’m using difference port

    http://localhost:89/imgUpload/production/receiveFile.php

  47. Anderson said,
    October 14, 2013 @ 8:35 pm

    I try to send a image in your demo, but does not work.
    The first image is 6MB and second 2.5MB

    What is the problem ?

    Thanks

  48. nitin said,
    November 18, 2013 @ 1:23 pm

    Can u please tell me how to put restriction on uploaded image size ..

Leave a Comment

 

»
  1. November 11, 2009 @ 2:21 pm

    [...] Creditos: Ady Levy – Matéria: article [...]

  2. June 8, 2010 @ 3:35 am

    [...] 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 [...]

  3. March 29, 2011 @ 10:37 pm

    [...] 2 is up, check out : Multiple files uploader with client side resize Posted in Flash Demos, as3, [...]