0

I have a change event on a file element 'profileSelectedFile' and in Chrome it works fine the first time I select a file (it gets triggered), but if I run it in IE, the change event doesn't get triggered the first time. I have to run it twice before I get a change event to trigger. Is this a bug with IE?

I think IE might have a problem with the element being hidden, Chrome maybe doesn't have that issue.

FYI - I open a modal that shows different upload types (ex. FB, PC, Instagram), if the uploadFromPC button gets clicked I close the modal and open the fileupload window. 

$('#profilePictureUpload').on('click', function() {
  $('#modalContainer').load(scope.enumControllers.getUploadModal, function(response, status, xhr) {
    $('#uploadModal').modal('show');
    $('.uploadFromPc').click(function() {
      $('#uploadModal').on('hidden.bs.modal', function(e) {
        var control = $("#profileSelectedFile");
        control.replaceWith(control = control.clone(true));
        document.getElementById('profileSelectedFile').click();

        $("#profileSelectedFile").change(function() {
          // doesn't get triggered in IE on first file upload event, only second upload triggers this event!
        });
      });
      $('#uploadModal').modal('hide');
    });
  });
});
<input type="file" style="display: none;" id="profileSelectedFile" src="" />
<input type="button" value="Upload a photo" class="btn btn-lg btn-default" id="profilePictureUpload" style="border: 1px solid lightgrey; font-weight: bold">

UPDATE - I tried this code below but it still only triggers the 'someFunction' on the second time I select a file in the fileupload window

var someFunction = function () {
                            // what you actually want to do
                            var i = 0;
                        };

                        if ($.browser.MSIE) {
                            // IE suspends timeouts until after the file dialog closes
                            $input.click(function (event) {
                                setTimeout(function () {
                                    if ($input.val().length > 0) {
                                        someFunction();
                                    }
                                }, 0);
                            });
                        }
                        else {
                            // All other browsers behave
                            $input.change(someFunction);
                        }
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • 1
    No point in using run-able code if you don't include everything needed to run it – Endless Nov 03 '16 at 22:37
  • Possible duplicate of [Jquery: change event to input file on IE](http://stackoverflow.com/questions/2389341/jquery-change-event-to-input-file-on-ie) – Endless Nov 03 '16 at 22:42
  • I tried some answers from the thread provided above but none seem to work very well. Remember the second time I run the fileupload it works in IE, it's just not working the first time – chuckd Nov 03 '16 at 23:16

0 Answers0