title: Rails - File upload with Javascript/HTML
body: <p>I am trying to upload a file and parse it to rails. I also want to put the content of the file in a sortable table. I followed <a href="http://railscasts.com/episodes/396-importing-csv-and-excel?autoplay=true" rel="nofollow">http://railscasts.com/episodes/396-importing-csv-and-excel?autoplay=true</a> and got through it.</p>
  
  <p>My View file - index.html.erb looks like this -</p>
  
  <pre><code>&lt;%= form_tag import_users_path, multipart: true do %&gt;
  Import a file
  &lt;%= file_field_tag :file %&gt;
  &lt;%= submit_tag "Submit" %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>*_controllers.rb looks like this </p>
  
  <pre><code>class UsersController &lt; ApplicationController
   def index
    @users = User.order(params[:sort])
   end 
  
   def show
    @user = User.find(params[:id])
   end
  
   def import
    User.import(params[:file])
    redirect_to action: 'index'
   end
  end
  </code></pre>
  
  <p>Now I want to add styling to the file upload button using Javascript/Bootstrap. I changed the index.html.erb to the following - </p>
  
  <pre><code>&lt;%= form_tag import_users_path, multipart: true do %&gt;
  &lt;span class="fileUpload btn btn-primary"&gt; Upload
      &lt;input id="uploadBtn" type="file" class="upload" /&gt;
  &lt;/span&gt;
  &lt;%= submit_tag "Submit"&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>and now assets/javascripts/*.js looks like this - </p>
  
  <pre><code>document.getElementById("uploadBtn").onchange = function() {
  document.getElementById("uploadFile").value = this.value;
  };
  </code></pre>
  
  <p>This is not working because the uploaded file is not being parsed as ':file' is not assigned anything. </p>
  
  <p>How can I apply CSS and javascript styling to 'file_field_tag'? </p>