when using file upload how can I display loading message/page?

[focus360]

I have a whole category of products that requires my customers to select there own picture for upload then click add to cart.

This all works fine i.e the file gets uploaded, i can get to the file etc.

The problem is when you click add the website takes along time (dependant on size of file) to move to the next page (the shopping cart).

I want to increase useability and I am looking at away of displaying some sort of loading screen or message while the image is being loaded.

i am assuming I will need to use some sort of javascript code on the add to cart button that will have to be used on all my products by editing the add to cart button template. However ideally I would only require it on the 1 category of products that uses the upload file attribute.

Anyone any advice. I appreciate its a bit complex. But someone must have some ideas?

Thank you

[DrByte]

About 2 months ago someone was talking about ways to set up an upload progress-meter so one could monitor the uploads. I don't recall the outcome of the research

[focus360]

Ive just been taking a look at progress bars for image uploads, and this would be ideal for my website. I definitely WILL have one on my site in the future.
However I am just looking for a quick fix to get my site up and running.

e.g. IF there is a file upload field. Then on clicking the add to cart button a message will appear "PLEASE WAIT TO BE REDIRECTED TO THE NEXT PAGE - YOUR IMAGE IS CURRENTLY UPLOADING - THIS MAY TAKE UPTO A MINUTE etc"

Obviously the alternative would to display a short bit of text next to file upload button (this would seem like the quickest fix!). So perhaps I will do this, then the quicker I can get on with trying to build this progress bar (or trying to find someone else to).

[enigma777]

I see that this posts dates back to 2006. Any progress on implementing a progressbar for uploaded files in the last 4 years?

[kavlito]

My site makes custom printed products with the customers images. We use the File Upload Attribute for them to upload their images along with the order.

I've been toying with this for a while, however I don't really have any coding skills... just researching and borrowing code... but syntax... don't know it.

Anyway, originally I thought of the elaborate pop up progress upload meter... then i thought, K.I.S.S. So I thought it would be much simpler to just have the Add to Cart icon change to an animated gif indicating 'Uploading Photos' when clicked.

I created the gif, and researched the jscript code and found this:

<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("img").src=a;
    }
</script>
<div id="main_img">
    <img id="img" src="sourceimage.gif"  onclick='changeImage("changetoimage.gif");'>
</div> 

So, I created a test page to see if it would work: http://photoballoons.co/cart/test.php. It did!

Now, how do I incorporate that into tpl_product_info_display.php? This is where I run into the problem because I don't know coding that well... especially mixing PHP & HTML. I tried borrowing syntax and conventions by studying the PHP files and how the code is mixed, but can't figure it out. This is what I came up with:

Around line 170 in /includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php you have this:

<div id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
            ?>
          </div>

which I attempted to change to this:

<div id="cartAdd">
    <?php
      echo $display_qty;
      echo '<img id="img" src="' . $display_button; . '"  onclick='changeImage("images/button_uploading_photos.gif");'>'?>
      </div>

with no luck. All I get is a blank product info page. I've tried many variances on it, but no luck.

Anybody have any clues? I'm sure this would be very useful to many people.

Thanks in advance.

[kavlito]

...forgot to add that I put the jscript tags:

<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("img").src=a;
    }
</script> 

...at the beginning of the tpl_product_info_display.php file.

[kavlito]

Made some progress. Around line 170, I changed my code to this:

<div id="cartAdd">
    <?php
      echo $display_qty;?>
      <img id="img" src="<? echo $display_button; ?>" onclick='changeImage("images/button_uploading_photos.gif");'>
      </div>

I no longer get a blank product info page. And the Add to Cart button is now showing. However, the Quantity box disappeared and part of the code is appearing after the Add to Cart button.

What should look like this:



Now looks like this:



If anybody can help with the coding, it would be greatly appreciated.

(Again, this is what I'm hoping to achieve - click the Add to Cart button on this test page: http://photoballoons.co/cart/test.php)

[howb]

Great thinking, as I've been trying to find a progress bar mod, but there doesn't seem to be any out there. I will have a look at implementing it and see if I have any luck

[Congerman]

Great thinking, as I've been trying to find a progress bar mod, but there doesn't seem to be any out there. I will have a look at implementing it and see if I have any luck

Any joy with this?