voodish logo
tweet rss book of faces Linked In

Magento Ajax Image uploader with progress bar and lightbox preview

Magento Ajax Image Uploader

Ever wanted to extend the Magento uploader function with a progress bar and pop-up lightbox? Tested and working on Magento 1.3x and 1.4x, this image uploader adds feedback to the user on how their file is doing during upload, and once uploaded will give them the chance to preview the uploaded file with a lightbox.

Sorry this module has now been discontinued

Screenshots:

progress_bar_ajax_uploader_magento.png Photo Uploaded -Ajax image uploader for Magento preview_ajax_uploader_magento.png cart_ajax_uploader_magento.jpg

Live Demo:
LIVE DEMO LINK

Click the link above and upload an image using the “Add File” button.
During upload, there is a progress bar and cancel button, once the file has uploaded, there is a lightbox preview / close and cancel button.
The Add to cart button will now send the data to the cart without the need to upload the file again. This file will show up in the admin area as usual.

Readme

This Magento uploader requires absolute CSS positioning of the Add File and Cancel buttons, it also requires editing of 1 core file, which is fully explained in the documentation.
This image uploader will work on most, if not all servers including Lightspeed servers, using the latest kernel update. The uploader can work with multiple image uploads as shown in the Live Demo. Tried and tested on Magento 1.3x, 1.4x

Supported File formats include: PNG, GIF, JPEG

For any queries regarding this uploader for Magento, please do not hesitate to leave a note below:.

Related Articles

Comments RSS Feed

2 Trackbacks/Pingbacks

  1. Pingback: Multiple Image uploads in Magento, Voodish Articles. on September 1, 2010
  2. Pingback: Free Magento Ajax Image uploader with progress bar and lightbox preview | Plugin Pimp on March 23, 2011

56 Comments

  1. Sabin September 9, 2010

    Very nice and useful component. Does it need a separate admin area within magento?

  2. Go to Top of the page

  3. admin September 9, 2010

    This is a 1 of a kind bespoke script, there is no admin interface, it is integrated into the Magento image management system, so that retrieval of images can be carried out in the usual Magento fashion.

  4. Go to Top of the page

  5. Ed November 24, 2010

    Hi. I am interested in this but doesn’t seem to be working in safari. Is there a fix for this? Do you offer support to integrate it? I am willing to pay.

  6. Go to Top of the page

  7. admin November 24, 2010

    Safari does have some serious problems with Ajax - I would recommend building a non-ajax uploader for Safari. I have sent you an e-mail with more details.

  8. Go to Top of the page

  9. suism December 15, 2010

    Will this work with the Dependent Custom Options (http://www.magentocommerce.com/magento-connect/Pektsekye/extension/2964/dependent-custom-options)?

    Will it also works with Magento 1.4.2?

  10. Go to Top of the page

  11. suism December 15, 2010

    Also, on your demo link: http://94.76.233.5/photos-gifts/photo-t-shirts/photo-t-shirts.html

    How do you configure magento to display the different radio buttons for “T-Shirt Sizes” with image for each size?

  12. Go to Top of the page

  13. Danny December 16, 2010

    Hi, still no solution to let it work for Safari? Also I am interested but it needs to work with that.

  14. Go to Top of the page

  15. Danny December 27, 2010

    Hi, will it be possible later on to sent files with Safari?

  16. Go to Top of the page

  17. admin December 29, 2010

    @suism: It should work with that contribution, but as it is a premium contrib. I cannot test this atm
    @suism: This will work on 1.4.2
    @suism: A mixture of Custom options and CSS.

  18. Go to Top of the page

  19. admin January 20, 2011

    New instruction set written, much easier to follow now.

  20. Go to Top of the page

  21. admin March 9, 2011

    Priced reduced due to popular demand. Fantastic ajax uploader for just $79 / £49, with lighbox preview.

  22. Go to Top of the page

  23. admin March 19, 2011

    Now FREE, to give something back to the community.

    Once installed correctly using the supplied installation document, this is a very useful uploader giving feedback to the user whilst uploading.

  24. Go to Top of the page

  25. dangu March 22, 2011

    Very good of you guys to make this available free to the Mage community. Unfortunatly ran into problems installing the script - tried on a production site (backing up of course) however couldnt get the div with upload box to appear.

    Thought it may be a conflict with a dependent custom options script I have running so installed a blank magento to try it on that.

    Had more success as upload box appeared - however couldnt get the ajax to kick in when uploading images/files.

    Only worked with image files less then 5k. Bit tired now! Might try again tomorrow :)

  26. Go to Top of the page

  27. admin March 22, 2011

    Hi Dan,

    Sorry to hear your having a few issues with the up-loader, it is a tricky one to get installed properly.

    1. Are you or your hosting company using LiteSpeed instead of Apache?
    As this will only work on LiteSpeed with the latest patch.

    If not, then it is usually down to permissions.

    2. The first thing to check is the cgi-bin test.
    Navigate to www.YOUR-DOMAIN.com/cgi-bin/upload?test e.g. http://www.18sheep.co.uk/cgi-bin/upload.pl?test
    The script should return “ok” if you get a 404 or anything but “ok” then check that the cgi-bin folder and files within are CHMOD to 755

    3. Check the other folder permissions and paths to your files from the documentation.

    4. If your still having probs. and you’re not using LiteSpeed and can provide temporary access I can take a look over the installation for you – preferably on the generic Magento install.

    Hope this helps.

  28. Go to Top of the page

  29. dangu March 23, 2011

    Yes, server is running LiteSpeed V5.3. So it’s PHP LSAPI V5.5 we need to run it?

    Thanks again for your help.

  30. Go to Top of the page

  31. admin March 23, 2011

    Yes, it will be LiteSpeed killing the feedback and not showing the progress bar… the files may actually be getting uploaded.

    There was a fix on the LiteSpeed forums about five years ago; LiteSpeed 4.1 web server

    Solution
    Ajax Thread: http://www.litespeedtech.com/support/forum/showthread.php?t=770
    Installing 4.1RC2: http://www.litespeedtech.com/support/forum/showthread.php?t=3497

    I really cannot believe this is still in RC.
    Alas I think this will be the only way on a LiteSpeed server.

    As we only use dedicated Apache servers it was never a problem during development, only when one customer wanted to use LiteSpeed shared hosting did we nail it down to LiteSpeed being the problem, I think I will have to update the post now as LiteSpeed doesn’t seem to have moved on in this regard for 5 years+

  32. Go to Top of the page

  33. admin March 25, 2011

    1. The up-loader requires CSS positioning, STEP 5 in the docs
    2. Are you or your host using LiteSpeed instead of Apache? This can prevent the progress bar from working
    3. Your files seem to be getting uploaded but are not moving into the complete folder, this can be down to incorrect paths or the Litespeed issue.

  34. Go to Top of the page

  35. Problemo March 27, 2011

    I done everything what you say in install, but I still have a problem. When you talking about css mody..where i shoud copy css code in my styles.css,some special block

  36. Go to Top of the page

  37. admin April 2, 2011

    No. You should be able to place the CSS in any readable and referenced CSS file, as their are no over rides in effect here.

    I would suggest placing the CSS in the footer of your master CSS file.

  38. Go to Top of the page

  39. Carlos Munhoz April 7, 2011

    Got to know whether this module lets you send multiple files…
    When sending the first image is the button again to load another image until the client finishes sending all images are a photo shop, it would be possible to send zip files as well?

  40. Go to Top of the page

  41. admin April 7, 2011

    Hi Carlos,

    Thanks for the message.

    Yes you can send multiple files, by creating multiple instances of the up-loader from the Magento admin (Custom Options > Upload).

    e.g.: http://94.76.233.5/your-image-on-mugs.html

    It won’t currently send zip files I’m afraid.

  42. Go to Top of the page

  43. Lo Wiga April 9, 2011

    Hi Admin,

    Can you post the source to Preview the uploaded image in the Cart. Now only the line of te attribute is viewed with nu link to the uploaded image.

  44. Go to Top of the page

  45. admin April 9, 2011

    @ Lo Wiga - This uses the standard Magento link to the uploaded image in the cart. To display the actual image you may want to take a peek in:

    app/design/frontend/default/YOUR-THEME/template/checkout/cart/item

    ($_option[’label’])

  46. Go to Top of the page

  47. Dustin April 11, 2011

    Any fix for the Litespeed problem in sight?

    Thanks!

  48. Go to Top of the page

  49. admin April 12, 2011

    @Dustin: it would seem the only method currently is to update to LiteSpeed 4.1 RC2

  50. Go to Top of the page

  51. Carlos Munhoz April 12, 2011

    Hello, I wonder if this mode of transmission of images has the option to send multiple files of unlimited size, use the CTRL key and select several images for example .. is it possible?

  52. Go to Top of the page

  53. Carlos Munhoz April 12, 2011

    But understand that I do not know how many images the client will send us, may be 5, but may be 200, assemble photo albums, he could not choose several images with CTRL down?
    Or send an image to automatically appear a new button to search for files?
    Until it finishes sending all the images?

  54. Go to Top of the page

  55. admin April 12, 2011

    @Carlos, this system would not be able to cater for multiple files in that fashion, however it can cater for a predetermined quantity of uploads based on custom options.

    For your particular purpose, I would suggest using a drop box or a system that would cater for compressed archives.

  56. Go to Top of the page

  57. Carlos Munhoz April 12, 2011

    This system will be able to send compressed files?

  58. Go to Top of the page

  59. Edson April 14, 2011

    Hi!
    The upload is not working on demo store. It remains on 0%. I´m using Firefox 3.6

  60. Go to Top of the page

  61. admin April 14, 2011

    @Edson, strange I’ve just tried Firefox 3.6.16 on Win7 and it’s seems to upload ok.

    See screenie: http://bit.ly/gZWyFK

    Sorry your having problems, not sure what to suggest, other than clearing your cache, closing FF and trying again. Let me know how you get on.

  62. Go to Top of the page

  63. Josh May 10, 2011

    @admin Great extension, thank you. I am running Apache and the uploader only works for jpg images up to 100KB. Large files and other file types remain at 0%, any suggestions? All file types are uploaded correctly. Thanks.

  64. Go to Top of the page

  65. Longboard May 27, 2011

    Has anybody tried it on Magento 1.5.1?

    I’m currently trying it. I see the upload form and image seems to be uploaded (percentage shown in status bar) but there is no further processing or display.
    And there are no JS errors.

    Your experience?

  66. Go to Top of the page

  67. admin May 27, 2011

    @Longboard, whereis your cgi-bin located?

    Are you referencing the cgi-bin location correctly?
    When you have the files in your cgi-bin with the correct permissions, you can test using:

    /cgi-bin/upload.pl?test

    e.g: http://www.18sheep.co.uk/cgi-bin/upload.pl?test

    It should return “ok”

    Also, are you running Apache or Litespeed web server?

    Usually problems occur due to either:

    1. Using Litespeed instead of Apache
    2. Incorrect permissions on cgi-bin
    3. Incorrect paths in files

    Let me know how you get on, thanks.

  68. Go to Top of the page

  69. cindy June 23, 2011

    Hi, how can i get the code?
    thank you

  70. Go to Top of the page

  71. Chris July 18, 2011

    Hi where do i download the files for this…??

    :)

  72. Go to Top of the page

  73. EACMonkey July 19, 2011

    Hi. I’m trying to install on 1.5.1 and I’m getting the same issue Longboard did. So I have checked permissions on cgi-bin and the path specified in conf.uploader. Running the upload.pl?test returns me a 403 Forbidden.

    I’m running Apache on Ubuntu and have chmodded cgi-bin and contents to 777 (tried 755 too).

    Any ideas?
    Thanks.

  74. Go to Top of the page

  75. chriscom July 19, 2011

    just got the upload bar to work the next problem i have is that the file upload box and buton is not in the right place its sitting at the botom of the pae on the left but the image preview is in the right place once uploaded how do i get the upload box to sit in the right place.. view here to see the problem
    http://canvascityprints.com/canvas-prints/photocanvas1.html

  76. Go to Top of the page

  77. davey July 20, 2011

    It’s all in the installation document.

    @chriscom: check the install doc, Step 5. You need to layout the uploader with CSS.

  78. Go to Top of the page

  79. davey July 20, 2011

    If your getting permission errors on your cgi-bin it’s down to Chmod permissions or something your host has setup for cgi-bin files, I’d check with them.

    Everything else has been covered.

  80. Go to Top of the page

  81. chriscom July 20, 2011

    Hi
    Thanks Davey i was mis-reading the docs i take it css needs doin for each page the uploader is on as it has difrent id on each page, if you could help with anther problem when the image is uploaded the butons go but leave the box showing also if i click under the box (where the upload buton was or on the right side of the box it opens the file browser again.. is there a was to disable the butons once a fileis uploaded???

    Thanks

  82. Go to Top of the page

  83. Sri July 26, 2011

    Hello…
    Seems like a very nice extn.. can we use this to upload PDF file types..?

    Regards,
    Sri

  84. Go to Top of the page

  85. rachana August 31, 2011

    hey i am new to this…
    how to insert d same code in any cms page for uploading and displaying image for user??
    plz help asap……

  86. Go to Top of the page

  87. Sharon September 17, 2011

    Hi,
    Does this work on 1.5 and how much do you charge to install it?

  88. Go to Top of the page

  89. barnefoto September 18, 2011

    Hi,

    where can I get this script? Will it work with the latest magento?

  90. Go to Top of the page

  91. Denis Zdelar September 25, 2011

    I try to install your progress bar. The upload starts only first time when I clear all cache (localy and on the server). The script from cgi-bin open a new blank window, and progress bar stand on 0%. Image was uploaded in “uploader_complete” direcory, but not transfered in “complete” directory. In my error log I have error for “true” statement in conf.uploader if isn’t in quotation mark. Do you have any suggestion?

  92. Go to Top of the page

  93. Bruce Clerk October 1, 2011

    I’ve been looking all over for this functionality. Is there a download link in your page that I’m missing? I don’t see the documentation anywhere. Or maybe I’m just being dense ….

  94. Go to Top of the page

  95. Tyler October 11, 2011

    Hey, I’m not seeing download links for this.. is it still available?

  96. Go to Top of the page

  97. Valentina October 11, 2011

    Hello…
    I installed uploader, and for a few days everything work’s. Then the upload progress bar work only for file equal or less than 16k. My hosting provider tells me that they donn’t make any server update. For a larger file progress bar donn’t work but images are uploaded in uploader_upload dir. Have you any suggestion?

  98. Go to Top of the page

  99. Markus November 11, 2011

    Is it possible to use the Uploader without the lightbox preview just with a link to the uploaded file? Also users could upload pdf, zip and tif files too. Is there a chance?

    Kind regards!

  100. Go to Top of the page

  101. Gary November 20, 2011

    I’m not seeing the download links either. Is this still available? I’m very interested in something like this.

  102. Go to Top of the page

  103. lacika December 12, 2011

    Where is the extension?

  104. Go to Top of the page

  105. sanjeev December 19, 2011

    Hi,
    Can you please provide me link to implement image uploader.

    Thank You in advance.
    Sanjeev

  106. Go to Top of the page

  107. Nikolaus January 20, 2012

    Hm, where to download? Can see any link. :-(

  108. Go to Top of the page

  109. Jason February 9, 2012

    How much is your image uploader? And how do I purchase it?

  110. Go to Top of the page

  111. Aditya Mohan March 22, 2012

    Thank you for the post !!

  112. Go to Top of the page

Sorry, comments for this entry are closed at this time.