Rails - File upload with Javascript/HTML
<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>