Workaround Firefox and IE not showing file selection dialog

swisspol · swisspol · commit bf2c9a170d1b · 2014-11-07T11:42:36.000+09:00
diff --git a/GCDWebUploader/GCDWebUploader.bundle/index.html b/GCDWebUploader/GCDWebUploader.bundle/index.html
@@ -65,7 +65,7 @@ <h1>%header%</h1>
       <div id="alerts"></div>
       
       <div class="btn-toolbar">
-        <button type="button" class="btn btn-primary fileinput-button">
+        <button type="button" class="btn btn-primary fileinput-button" id="upload-file">
           <span class="glyphicon glyphicon-upload"></span> Upload Files&hellip;
           <input id="fileupload" type="file" name="files[]" multiple>
         </button>
diff --git a/GCDWebUploader/GCDWebUploader.bundle/js/index.js b/GCDWebUploader/GCDWebUploader.bundle/js/index.js
@@ -178,6 +178,17 @@ function _reload(path) {
 
 $(document).ready(function() {
   
+  // Workaround Firefox and IE not showing file selection dialog when clicking on "upload-file" <button>
+  // Making it a <div> instead also works but then it the button doesn't work anymore with tab selection or accessibility
+  $("#upload-file").click(function(event) {
+    $("#fileupload").click();
+  });
+  
+  // Prevent event bubbling when using workaround above
+  $("#fileupload").click(function(event) {
+    event.stopPropagation();
+  });
+  
   $("#fileupload").fileupload({
     dropZone: $(document),
     pasteZone: null,
