Blueimp File Upload nothing happening in IE 8

Question

I am using the blueimp file upload plugin on a project and am running into some difficulties with IE8, mainly that nothing is happening!

My setup is as close as possible to the plugins demo settings - files are included in the same order, html structure varies only very slightly, css is identical etc.

In other browsers + ie9 everything works as expected, but in ie8 it's as though the button to add an image has nothing attached to it.

If I upload in ie9 then switch document type to ie8 using dev tools, the image is retrieved from the server successfully.

It's hard for me to show the full code as the document is unfortunately quite convoluted however the page is located here: http://www.yoursplash.co.uk/index.php?route=product/product&product_id=108

and this is pretty much everything that is related to the file upload:

these are the files i am including in this order to get the plugin to work

<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
<script src="catalog/view/javascript/jquery/blueimp/jquery.iframe-transport.js"></script>
<script src="catalog/view/javascript/jquery/blueimp/jquery.fileupload.js"></script>
<script src="catalog/view/javascript/jquery/blueimp/jquery.fileupload-fp.js"></script>
<script src="catalog/view/javascript/jquery/blueimp/jquery.fileupload-ui.js"></script>
<script src="catalog/view/javascript/jquery/blueimp/jquery.fileupload-jui.js"></script>

This is my own implementation of the plugin

'use strict';
$(document).on('ready', function () { 
    $.ajax({
        url: '/index.php?route=product/userimage&usetype=get',
        dataType: 'json',
        context: $('#fileupload')[0]
    }).done(function (result) {
        $(this).fileupload('option', 'done').call(this, null, {result: result});
        if ($('#filesContainer > .template-download').length > 0)
        {
          $('a[href="#user-upload"]').removeClass('selected').siblings('a[href="#user-photos"]').addClass('selected');
          $('#user-upload').hide().siblings('#user-photos').fadeIn(); 
        };
    });
});

$('#fileupload').fileupload(
{
  url: '/index.php?route=product/userimage&usetype=put',
  type: 'POST',
  maxFileSize: 5000000,
  fileInput  : '#imgUp',
  acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
  process: [
      {
          action: 'load',
          fileTypes: /^image\/(gif|jpeg|png)$/,
          maxFileSize: 5000000 // 20MB
      }
  ],
  filesContainer: '#filesContainer'
})
.bind('fileuploadadded', function (e, data)
{
  $('a[href="#user-upload"]').removeClass('selected').siblings('a[href="#user-photos"]').addClass('selected');
  $('#user-upload').hide().siblings('#user-photos').fadeIn();
})
.bind('fileuploadcompleted', function (e, data) 
{ 
  return $('#filesContainer .uploadedImage').draggable({ containment : 'document', revert : true, appendTo : 'body', helper: function(e,ui){ return $('<img/>',{ src : $(e.target).data('src')}).css('width','150px'); } }).tooltip({ tooltipClass : 'image-gallery-tooltip' , position : { at: 'bottom center'} });
});

this is the HTML of my implementation of the plugin

 <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
          <!-- Redirect browsers with JavaScript disabled to the origin page -->
          <noscript><input type="hidden" name="redirect" value="http://blueimp.github.com/jQuery-File-Upload/"></noscript>
          <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
          <div class="row fileupload-buttonbar">
              <div class="span7" style="height:30px;">
                  <p style="float:left;display:block;width:480px;margin-right:10px;padding:5px;">Select images from your computer and once uploaded you may use them in your design</p>
                  <!-- The fileinput-button span is used to style the file input field as button -->
                  <span class="btn btn-success fileinput-button">
                      <i class="icon-plus icon-white"></i>
                      <span>Add images..</span>
                      <input type="file" name="files[]" id="imgUp" multipart>
                  </span>
              </div>
              <!-- The global progress information -->
              <div class="span5 fileupload-progress fade">
                  <!-- The global progress bar -->
                  <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                      <div class="bar" style="width:0%;"></div>
                  </div>
                  <!-- The extended global progress information -->
                  <div class="progress-extended">&nbsp;</div>
              </div>
          </div>
          <!-- The loading indicator is shown during file processing -->
          <div class="fileupload-loading"></div>
      </form>

Any assistance would be greatfully received - I'm close to tearing my hair out with this one because there doesnt seem to be any good reason for it not to work!

Answer 1

For anyone experiencing the same issues as I had when I was working on this, the problem was not related specifically to the BlueImp File Uploader but a security feature of IE < 9, which disallows programmatic 'clicks' on file upload buttons.

The actual cause of the problem was that I had hidden the form input so that I could present my own styled 'button' and triggered the click on the input using jQuery - my solution was to instead set the form inputs' opacity to 0 using CSS, and then position it over my 'pretty' button using absolute positioning.