0

I am trying to open file browser window for input type file, triggering on change on select box option. But it is not working. Any idea what is wrong and how to get it work? FWIW I tried to get an idea from http://jsfiddle.net/afxDC and that is for text field.

UPDATE:- I found this code works on FF 28.0, but not on chrome 33.0.1750.152 and Safari Version 7.0.3 (9537.75.14). So need to get it work on those browsers too

<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
    <style type="text/css">
      input[type=file] {
        display:block;
        height:0;
        width:0;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <select id="media-selector">
          <option value=""></option>
          <option value="image">Add image</option>
          <option value="video">Add video</option>
      </select>
      <input type="file"/>
    </div>
    <script type="text/javascript">
      $("#media-selector").change(function() {
        $(this).parents(".item")
          .find('input[type=file]')
          .trigger('click');
      });
    </script>
  </body>
</html>
JVK
  • 3,782
  • 8
  • 43
  • 67

1 Answers1

0

Here is one solution - http://jsfiddle.net/afxDC/33/

jQuery - 

$('#media-selector').change(function () {
    $(this).closest('.item')
        .find('input[type=file]')
        .trigger('click');
});

HTML

<div class="item">
    <select id="media-selector">
        <option value=""></option>
        <option value="image">Add image</option>
        <option value="video">Add video</option>
    </select>
    <input type="file" />
</div>
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • did it work for you? I visited your jsfiddle too, but I did not find it working. – JVK Apr 10 '14 at 20:11
  • It is working for me just fine using FF as the browser. Changing the drop-down opens the file browser. – Jay Blanchard Apr 10 '14 at 20:12
  • I am using chrome Version 33.0.1750.152, and it does not work for me. – JVK Apr 10 '14 at 20:13
  • I never checked my solution on FF, I found, even my code works on FF. So the challenge to get it work on Chrome. – JVK Apr 10 '14 at 20:14
  • I just tested in Chrome and it works fine. Version 34.0.1847.116, but I'm sure that this would work with earlier versions too. Have you tried any other browsers? I have tested in IE, Chrome, FF and Safari - all work. – Jay Blanchard Apr 10 '14 at 20:15
  • Tried on safari Version 7.0.3 (9537.75.14) , and there too it did not work. – JVK Apr 10 '14 at 20:17
  • Are you seeing any errors in your console or other messages that will provide a clue? – Jay Blanchard Apr 10 '14 at 20:19
  • Here is some more info, but some appears to be out-dated: http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input – Jay Blanchard Apr 10 '14 at 20:21
  • Thanks, I tried that as well. But that too did not work. Please note, here if I change select box to text field and then trigger click event on it, then it works. So it is not about style of the file-input field, rather how I can use select box instead input field. As you can see http://jsfiddle.net/afxDC works perfectly. But changing to select box stops working. – JVK Apr 10 '14 at 20:31
  • No, it doesn't work perfectly because it places the file name in the text box that is selected. – Jay Blanchard Apr 10 '14 at 20:33
  • in jsfiddle.net/afxDC, ignore the second part where it puts file path in the text field. I updated it , pl. check http://jsfiddle.net/afxDC/35/ – JVK Apr 10 '14 at 20:35
  • You may have to create something that "looks" like a select box but acts like an input. One thing for sure is that cross-browser / cross-platform is not guaranteed behavior where this is concerned. I found this - http://stiankarlsen.me/blog/fake-jquery-select-list/ which you can modify for what you're trying to do. – Jay Blanchard Apr 10 '14 at 20:38
  • Thanks for the help Jay. I may have to re-visit my design then. But it is weird that it works perfectly for text field but not for select box :( – JVK Apr 10 '14 at 20:40
  • Yeah, it is weird but then again - this is the Interwebs! – Jay Blanchard Apr 10 '14 at 20:41