I'm using plupload library in my app. I'm able to click "Choose file" button and add files using Chrome and Firefox, but with IE8 when I click on 'Choose files' button nothing happens.
Here is my JS implementation
var url = webAPIHost.toLowerCase().replace("api/", "") + 'FileUpload/FileHandler';
var total_uploads = 0;
var uploaded = 0;
uploaderExpense = new plupload.Uploader({
runtimes: 'html5,html4',
browse_button: 'pickfiles', // you can pass in id...
container: document.getElementById('fileupload'), // ... or DOM Element itself
url: url,
flash_swf_url: '../js/Moxie.swf',
silverlight_xap_url: '../js/Moxie.xap',
multipart_params: {
"expenseDetailID": "",
"fileID": ""
},
drop_element: 'dropzone',
filters: {
max_file_size: '10mb',
mime_types: [
{title: "Image files",extensions: "jpg,gif,png"},
{title: "Zip files",extensions: "zip"}
]
},
init: {
PostInit: function() {
document.getElementById('filelist').innerHTML = '';
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
var filename = "";
if ($.browser.msie && parseInt($.browser.version, 10) <= 9) {
filename = file.name;
}
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '" class="uploadListItem"><span class="bf-delete-image" id="del' + file.id + '">X</span>' + filename + '<b></b></div>';
if (!$.browser.msie || parseInt($.browser.version, 10) >= 10) {
for (var i = 0; i < files.length; i++) {
showImagePreview(files[i]);
}
}
});
$('#isAttachedToDocWrap').hide();
},
FilesRemoved: function(up, file) {
if (up.files.length == 0) {
$('#isAttachedToDocWrap').show();
}
},
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
Error: function(up, err) {
}
}
});
Here is HTML sections
<div id="filelist"></div>
<div id="fileupload" style="position: relative;">
<input type="button" id="pickfiles" value="Choose File" style="width: 100px; position: relative; z-index: 1;">
<div id="html5_18n9h5j961i36ravev1b7t1vm23_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; overflow: hidden; z-index: 0;"><input id="html5_18n9h5j961i36ravev1b7t1vm23" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,image/gif,image/png,application/zip"></div>
</div>
As you can see 'plupload library' created the div html5 container, which means the code is there but IE doesn't show it or open the file dialog. I don't know why?
Uploader library has an example page which works fine on IE. This means something not correct with the implementation
I can't put my hand on what is wrong here.