Question

I have a jquery-ui-dialog that contains a <form> which contains a <input type=file>

For some of my users when they click on the button to open the file dialog: it doesn’t appear.

The issue is not browser based since computer that have this issue are able to reproduce it with all their installed browsers:

• chrome
• firefox
• internet explorer

The issue is not OS based since I have seen occurrence of the issue with :

• windows XP
• windows 7
• Kubuntu 11.04

I have installed VMs with those OSes and the file dialog is working perfectly.

So my question is : Anybody has any idea what is going on?

Here’s the “code” :

<meta charset="utf-8">

    <link rel="stylesheet" href="http://matchfwd-statics.s3-website-us-east-1.amazonaws.com/asset_cache/css/e1b34bd841d9.css" type="text/css" media="all"> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'>

    <script>

      $(function() {
         $( "#dialog-form" ).dialog({
           autoOpen: false,
           height: 500,
           width: 550,
           modal: true,
           buttons: {
             "Send": function() {
              $( this ).dialog( "close" );
           },
           Cancel: function() {
             $( this ).dialog( "close" );
           }
           },
           close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
           } });

       $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); });
       });
 </script>
 <div class="demo">

  <div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>
    <form class="main-form" method="post" action="" enctype="multipart/form-data">
        <h3>Fill in some details</h3>
        <span class="title">Your profile will be submitted with your application:</span><br/>
        <div class="holder" style="position:relative;top:12px"><a style="color:#24c2c9;" href="></a></div>
        <br>
        <span class="title">Why would you be the right candidate?</span><br/>
        <div class="holder"><textarea class="" name="description" cols="58" rows="10"> </textarea></div>
        <span class="note"></span>
        <span class="title">Attachments&nbsp;<a href="#" id="add_attachment" class="plus">&nbsp;</a></span>
        <div id="attachments" class="holder"></div>
    </form>
</div>

<button id="create-user">Create new user</button>

<script type="text/javascript">
(function() {
   var counter=1;
   $("#add_attachment").click(function(e){
   e.preventDefault();
   var attachmentString = 'attachment-'+counter
   var inputString = '<input type="file" name="'+attachmentString+'" id="id_'+attachmentString+'" />'
   $(inputString).appendTo("#attachments")
   counter = counter+1
   })})();
 </script>

Answer 1

I just experienced this (OSX, Chrome) and found your question. Because you didn’t find an answer, I decided to do something crazy.

$(“input.file”).live(‘click’, function(element) { element.click() });

… That actually fixes the problem. Note that if you put a ; after the click(), it will give an error saying that the element has no click method.

I do not know why this works. It is the second worst hack I have ever implemented and I’m ashamed of it. Someone, please figure this out so I don’t have to leave this ugly, ugly hack in my code.

Also note that my input had the class ‘file’, so you may need to change the selector to match your needs.