I am currently facing an issue with selecting PDF files in Internet Explorer. The process works smoothly in Google Chrome, but I encounter a problem when trying to select PDFs in IE.
Specifically, when I attempt to select a PDF for the first time in Internet Explorer, nothing happens - the file is not selected. However, if I try to select another PDF (not the first one), it works without any issues. After that initial hiccup, everything functions correctly and I can select PDFs as intended.
If you would like to see the full example and experience the issue yourself, please visit: http://jsfiddle.net/j5yeq/3/ (please test this in Internet Explorer).
Here is a snippet of my HTML code:
<div class="gallery">
<div class="label" style="margin:0;">
<span class="field">PDFS:</span>
<input type="file" name="pdfs[]" class="j_galleryp" multiple="multiple" accept="application/pdf" />
<div class="j_gfalsep">Select as many PDFs as you'd like</div>
<img src="img/upload.png" class="j_gsendp" alt="Upload Cover" title="Upload Cover" style="margin:0 0 10px 10px;" />
<div class="label" id="test"></div>
</div>
</div>
This is the jQuery script used:
$('.j_gsendp').click(function(){
$('.j_galleryp').click().change(function(){
var allFiles = this.files;
var numFiles = this.files.length;
$('.j_gfalsep').animate({width:'500'}, 500, function(){
$(this).html('You selected <strong>'+ numFiles +'</strong> files.');
for(var i = 0; i<numFiles; i++) {
var file = allFiles[i],
name = file.name;
$('#test').append('<div class="message">Give a title to pdf <strong>'+name+':</strong></div><span>Title for pdf '+name+':</span><input type="text" name="title[]" value=""/><br><br>');
}
});
this.val('');
});
});
});