Workaround Firefox and IE not showing file selection dialog

swisspol · Nov 7, 2014 · bf2c9a1 · bf2c9a1
1 parent 15caa9c
commit bf2c9a1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
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,