title: jQuery: open file upload window after click on div
body: <p>I use (Css 2.1 And Jquery) to style file inputs</p>
  
  <p>It Work Fine And every thing work fine to now</p>
  
  <p>Here's example i'm talking about</p>
  
  <p><a href="http://www.shbkat.com/careers.html" rel="nofollow">Input File Demo</a></p>
  
  <p>If you are using Firefox Every thing Work fine</p>
  
  <p>But when Using Chrome  <strong>Can't select file from first time</strong> <code>My Problem</code> </p>
  
  <p>To select file in this demo Its Beside <strong>Cv</strong></p>
  
  <p>Here's My JQuery Code</p>
  
  <pre><code>(function($){
                $.fn.SafyForm = function(){
                     $(".safy_input_file").live("click", function(){
                                       var obj = $(this) ;
                                       obj.prev("input[type=file]").click() ;
                                       obj.prev("input[type=file]").change(function(){
                                           var txt = $(this).val();
                                           obj.children("span").text(txt) ;
                                       });
                     }) ;
                     return this.each(function(){
                           if($(this).is("input[type=file]"))
                                  {
                                    $(this).hide().after('&lt;div class="safy_input_file"&gt;&lt;span&gt; [ .docx &amp; .doc &amp; .pdf &amp; .rar ] &lt;/span&gt;&lt;label&gt;اختار ملف&lt;/label&gt;&lt;/div&gt;')
                                  }
                     }) ;
                }
          })(jQuery);
  
          $(document).ready(function(){
                $('input[type=file]').SafyForm() ;
          }) ;
  </code></pre>
  
  <p><strong>Code After update</strong></p>
  
  <pre><code>(function($){
                $.fn.SafyForm = function(){
                     $(".safy_input_file").live("click",function(){
                                       var obj = $(this) ;
                                       obj.prev("input[type=file]").click() ;
  
                     }) ;
  
                     $("input[type=file]").change(function(){
                              var txt = $(this).val();
                              var safyobj = $(this).next('.safy_input_file') ;
                              safyobj.children("span").text(txt) ;
                     });
  
                     return this.each(function(){
                           if($(this).is("input[type=file]"))
                                  {
                                    $(this).hide().after('&lt;div class="safy_input_file"&gt;&lt;span&gt; [ .docx &amp; .doc &amp; .pdf &amp; .rar ] &lt;/span&gt;&lt;label&gt;اختار ملف&lt;/label&gt;&lt;/div&gt;')
                                  }
                     }) ;
                }
          })(jQuery);
  
          $(document).ready(function(){
                $('input[type=file]').SafyForm() ;
          }) ;
  </code></pre>