26

Fileupload for osCommerce

multimixer | work | Thursday March 8 2012

Fileupload for osCommerce is an addon that will let store visitors to upload files for any products or services of the store. This can be very useful in case the store sell printed items such as business cards, postcards, calendars etc, for cases where products can be customized using uploaded files, for example t-shirts or any other promotional items where customers could upload their logo, and of course for anything you could think off, store owners know always better.

The addon allow files to be uploaded for each product directly from the product information page. Lets  see how it work on the front side first, then we can check the admin features. Impatient readers can see the addon in action right away

1. The front side: What store visitors see

Store visitors get first in touch with the fileupload feature on the product information page. The upload section follows the ui-widget theme that the store use, so there should be no special styling necessary: it will adapt your ui-widget theme automatically.

The file upload section on the product information page

The upload happens in real time that mean, while people are on the product information page. All they need to do is to click on the “add files” button and watch the files uploading.

The system creates a small thumbnail of the uploaded file automatically, in case it is an image, or use a placeholder image in case it is an other file type, such as .pdf, .doc or anything else. The size of the thumbnail is adjustable of course and the placeholder image can be anything of your choice. Please note that the system create real thumbnails, that mean smaller versions of the original file and does not just resize the file, that could be problematic in case of really huge files

Product information page with previews of the uploaded files

At that point the files are already on the server in a special “temporary” folder. Store visitors can delete the files easily or add comments to each file.

Uploaded files stay visible on the page product information page up to the moment the product is added to the cart. That mean that people can navigate to other products and that the system will “remember” what they have uploaded for each product. Once the product is in the cart, the uploads section get empty again, so that store visitors can upload an other set of files for the same product.

On the shopping cart page, uploaded files are listed just beside each product using the same small thumbnails or placeholder images.

Uploaded files on the shopping cart page

Store visitors have the option to update their comments to the files within the shopping cart page. It’s possible also to get a preview of the file, upon click on the image the file appear in a fancybox pop up. This is possible of course only for images.

Preview uploaded files on the shopping cart page

Uploaded files appear again on the checkout confirmation page with the same thumbnails. Also available the file preview in a fancybox pop up

Uploaded files on checkout confirmation page

File preview on checkout confirmation

After the order is completed, the store customer can see his files on the order history page of his account

Uploaded files on order history page

2. The administration side

On the admin side there are 2 ways to get and manage the files uploaded by the store customers. First way is via the order details page, this is the page in admin where you can preview any other order information, update the order status etc.

Here you will see small thumbnails of the files your store clients did upload just under the product name

Uploaded files preview on the order details page

In case there are any files uploaded, there will be a link just on the right side of the product name. Clicking on it will cause a new window to pop up including more details: The filename, file size, a thumbnail in case it is an image and 2 buttons where you can either download the file to your computer or delete the file. The delete action gives you 2 options as explained below.

Upload details on the order details page in adminYou can of course preview any image in detail by clicking on it

Preview any uploaded file in detail

Second way to manage the uploaded files is via a new special “get files” page in admin. This page you can access from the customers menu tab on the left.

On this page you will get a complete overview of all uploaded files. The table provide information about customer name, order id, product name, file name, file size, comments to the upload and exact date and time of uploading.

A new page in admin to manage the uploaded files

On the right side there ae 2 buttons available, the one to download the file to your own computer and the other one to delete the file.

The delete action gives you 2 options, so you can delete the file only or the file and the database entry. Deleting the file only will delete the file from your server, while deleting the database entry too, will delete any reference to the file. It may be useful to delete just the files from the server once you have them on your computer to free space and to keep the database entries for your records

Delete action with option to keep the recordsAt the bottom of the page, there are 3 more buttons for a mass deletion of files. So you can delete

  • all files from the temporary folder, hat are files that visitors uploaded before adding anything to the cart
  • all files from the cart folder, that are files for products added to the cart before checkout completion. It happens often that people add items to the cart but don’t checkout right away. osCommerce remember that items, and the fileupload addon will remember the uploaded files till you delete them
  • all files attached to an order, hat are the same files that you see on the table above. Here you have again the option to delete just the file or the database entry too

mass delete uploaded files by category

For each category you can decide how many days back you want to delete the files. So you could delete temporary files of 1 day back, files of products in cart 1 week back and files attached to orders 6 minths back, just to free some space

See the addon in action and feel free to upload files, add products to the cart and go through the checkout

Please note that for the preview the maximum file size is set to 250kb, you can upload only 3files per product and allowed file types are .jpg, .png and .gif

The addon will be available to download soon. I would appreciate any comments or suggestions about what else would be nice and useful to be included

Cheers

Front page image for this article (the donkey cartoon) is taken from liss-kompendium.de

Click +1 to recommend this to your friends when they search.
Tags: ,

multimixer

follow multimixer on Twitter

Follow me on twitter. I'm not tweeting all day long and guaranteed no spam and no advertising.

If you like what you read and if you think it will help you in your online business, then please consider a donation.

There is no obligation to do so and all information provided here is free to use.

It will however help to keep this blog alive, free of advertising and full of content.

  • Matt 09/03/2012 at 06:42

    Hi George,

    Very cool mod you are working on there. Clicking the + add files button doesn’t seem to do anything in firefox (latest version). It seems to work in other major browsers perfectly though. Is this based on the option types mod at all?

    Matt

  • multimixer 09/03/2012 at 11:52

    Hi Matt,

    Thank you for the bug report, I will check this, must be something with the jQuery and jQueryUI versions. I guess you are on a windows computer?

    There are still some things to be ironed out, some more options to add and some decisions to take, like for example if the system should “remember” the files for products in the cart when going back to the product info page. System could work like attributes do or in an other way, there are some thoughts about on google+

    No, this is not based on option types or on the attributes system in general even it uses the same method to pass the filedata by adding a chunk to the products id

  • Matt 09/03/2012 at 16:30

    Hi George,

    Yes I am using Win 7 but I will test it later with XP and see if I get the same results. What a cool system and I think it’s great that you are not using the option types mod. Something new, something fresh!

    Matt

  • timmo 09/04/2012 at 18:33

    Hi George,
    Just wondered how far you got with this project, I’m looking for a new shopping cart for my wall art print website, and what you ahve described here seems to fit the bill.

    Cheers

    Timmo.

  • multimixer 20/04/2012 at 13:00

    Hello Timmo

    Well, I hope to have this ready next week. Please feel free to get in touch via email

    • Xito 01/05/2012 at 01:41

      Hello multimixer,

      I’m very interested in this addon, This would be perfect for my photo online print store. Is the addon ready?

      Regards

  • multimixer 03/05/2012 at 14:39

    Hello Xito

    Well yes, the addon is ready, there are just a couple of minnor changes to do. Please feel free to get in touch via email

  • Terence 08/05/2012 at 06:53

    Where can I get this module? I think it’s suitable for me

    I am starting to start a print shop?

  • osc2nuke 21/05/2012 at 22:55

    I think streaming media upload/link is a must have.
    And also an option to re-use an uploaded image/media type for another product.

  • Neil Bird 12/06/2012 at 22:05

    Hi

    Great addon,

    Any chance it could be modified to include other extensions or possibly .zip files?

    Regards

    Neil

  • multimixer 13/06/2012 at 09:42

    @Neil, yes, this is certainly possible, you can include any filetype you want, no issues with this

  • Jon 21/06/2012 at 03:39

    Good day George,

    Great addon, look forward to trying it. We have the multiple quantity feature working, ( in test mode only) once we get this file upload one all we will require is a text field(s) input feature and all will be complete for our Laser Products web store.
    Great work
    Jon

  • Paul 22/06/2012 at 17:25

    Hi George,

    when and where will be this add-on available? It look better than I expected.

  • multimixer 23/06/2012 at 08:30

    Hi Paul

    Well, keeps your expectations low, you’ll have a nice surprise always, thank you for the comment

    Addon will be ready after I find time to finish it, I’m still collecting feedback from the first stores where it is installed and there is already a huge list of additional wishes, all of them make sense I have to say

  • Jeff 10/09/2012 at 19:16

    George,
    I was wondering how this contribution was coming along. We are setting up a store that will have customizable laser engraved and printed images and this would work perfectly.

    Thanks!

  • Dean 21/01/2013 at 18:46

    wow this looks amazing and exactley what i am after. I am in the process of building website for the missis who does personalised mugs and printing.

    When is this addon available please. Any News..

    Thank in advance..

  • multimixer 22/01/2013 at 11:23

    Hello Dean

    The add-on is available and already working on several websites.

    Please feel free to get in touch via email

  • Andres 19/02/2013 at 23:52

    Hello;

    Your addon is explactly what I am looking for my soon to be printing business, where can I download the add on?
    Great work!
    Thank you,

    Andres

  • multimixer 21/02/2013 at 15:32

    Hello Andres

    There is no instant download available for the add-on

    Please feel free to get in touch via email

    George

  • Robert Goth 27/03/2013 at 21:41

    The file upload add on is exactly what I need. Please let me know how I can get it. Thanks…

    Rob

  • multimixer 28/03/2013 at 07:54

    People, if you like that addon and want to have it on your website, please get in touch directly using the contact form: http://multimixer.gr/contact/

  • Chris SMith 19/04/2013 at 19:38

    I would like to download and play with this extension as well. Can I have a copy?
    Thanks
    Chris

  • John 03/04/2014 at 21:42

    Hi George,

    x 2 questions is this compatible with

    http://addons.oscommerce.com/info/6818

    Your image upload is much better but I do need the extra attribute options.
    how much does it cost I will be installing myself.
    Regards
    John

    • multimixer 04/04/2014 at 09:34

      Hi John

      Yes, file upload is compatible with option types, no problem. Still, uploaded files are not “attributes”

      Regards
      George