Progress indicator or gif/image displayed when client uploads file

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!--bof Add to Cart Box -->

<?php

if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {

  // do nothing

} else {

?>

            <?php

    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');

            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {

              // hide the quantity box and default to 1

              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);

            } else {

              // show the quantity box

    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);

            }

    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);

  ?>

            <?php if ($display_qty != '' or $display_button != '') { ?>
    </span>
    <div align="center">
    <?php
      echo $display_qty;
      ?>

      <div onclick="ShowDiv()">

      <?
      echo $display_button;
            ?><div id="cartAdd" style="display:none;"><br />Uploading files...<br />please wait<i class="fa fa-circle-o-notch fa-spin" style="font-size:48px;color:red"></i> </div><a href="javascript:ShowDiv()"></a> 
          </div>
          </div>

<script language="javascript">
function ShowDiv()
{
document.getElementById("cartAdd").style.display = '';
}
</script>

</div>

<span class="style2">

This is the code with gif. Both scenarios work in chrome, but not in explorer.

<?php
      echo $display_qty;
      ?>

      <div onclick="ShowDiv()">

      <?
      echo $display_button;
            ?><div id="cartAdd" style="display:none;"><br />Uploading files...<br />please wait<img border="0" src="/images/loading_bar.gif" width="220" height="64"> </div><a href="javascript:ShowDiv()"></a> 
          </div>
          </div>

<script language="javascript">
function ShowDiv()
{
document.getElementById("cartAdd").style.display = '';
}
</script>

Thank you. Please reply back if you find the solution for internet explorer

I accept files in any size up to 75mb. But I'm having the same issue with smalle or large files. The difference is small files upload fast, so it's just a couple of seconds of wait time, so it's not noticeable that gif is not playing, while large files can take much longer. Waiting on larger files, and having gif animation not move give users an impresison that it's not uploading, so they might be encouraged to click away, refresh, or leave the page. I did my best to add notes and instrustion below "add to cart" button, but people are used to seeing some loading progress bar, or some sort of animation after they click, and often ignore the written instruction.

I'm starting to think it's because it's wrapped in a div tag with on click function. Maybe there should be a whole different approach?

Yes. I wish someone would develop a plugin like the one available for opencart that can be seen here https://a3printing.co.uk/a3-photo-prints.php

That's a whole new discussion. If we can resolve this matter first, I'd be very happy.

Dalmen:

That's a whole new discussion. If we can resolve this matter first, I'd be very happy.

As would I