Magento Ajax Image uploader with progress bar and lightbox preview
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.
|
|
|
|
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
- 09.06.11: Prestashop Ecommerce module for Despatch Bay Shipping API (1)
- 12.07.11: PayPoint Prestashop module, now with Paycash bundle option (1)
Comments RSS Feed
Very nice and useful component. Does it need a separate admin area within magento?
Go to Top of the page
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.
Go to Top of the page
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.
Go to Top of the page
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.
Go to Top of the page
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?
Go to Top of the page
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?
Go to Top of the page
@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.
Go to Top of the page
New instruction set written, much easier to follow now.
Go to Top of the page
Priced reduced due to popular demand. Fantastic ajax uploader for just $79 / £49, with lighbox preview.
Go to Top of the page
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.
Go to Top of the page
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
Go to Top of the page
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.
Go to Top of the page
Yes, server is running LiteSpeed V5.3. So it’s PHP LSAPI V5.5 we need to run it?
Thanks again for your help.
Go to Top of the page
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+
Go to Top of the page
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.
Go to Top of the page
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
Go to Top of the page
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.
Go to Top of the page
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?
Go to Top of the page
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.
Go to Top of the page
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.
Go to Top of the page
@ 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’])
Go to Top of the page
Any fix for the Litespeed problem in sight?
Thanks!
Go to Top of the page
@Dustin: it would seem the only method currently is to update to LiteSpeed 4.1 RC2
Go to Top of the page
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?
Go to Top of the page
@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.
Go to Top of the page
Hi!
The upload is not working on demo store. It remains on 0%. I´m using Firefox 3.6
Go to Top of the page
@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.
Go to Top of the page
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?
Go to Top of the page
@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.
Go to Top of the page
Hi where do i download the files for this…??
Go to Top of the page
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.
Go to Top of the page
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
Go to Top of the page
It’s all in the installation document.
@chriscom: check the install doc, Step 5. You need to layout the uploader with CSS.
Go to Top of the page
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.
Go to Top of the page
Hello…
Seems like a very nice extn.. can we use this to upload PDF file types..?
Regards,
Sri
Go to Top of the page
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?
Go to Top of the page
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 ….
Go to Top of the page
Hey, I’m not seeing download links for this.. is it still available?
Go to Top of the page
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?
Go to Top of the page