Rails - File upload with Javascript/HTML

Question

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 http://railscasts.com/episodes/396-importing-csv-and-excel?autoplay=true and got through it.

My View file - index.html.erb looks like this -

<%= form_tag import_users_path, multipart: true do %>
Import a file
<%= file_field_tag :file %>
<%= submit_tag "Submit" %>
<% end %>

*_controllers.rb looks like this

class UsersController < 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

Now I want to add styling to the file upload button using Javascript/Bootstrap. I changed the index.html.erb to the following -

<%= form_tag import_users_path, multipart: true do %>
<span class="fileUpload btn btn-primary"> Upload
    <input id="uploadBtn" type="file" class="upload" />
</span>
<%= submit_tag "Submit">
<% end %>

and now assets/javascripts/*.js looks like this -

document.getElementById("uploadBtn").onchange = function() {
document.getElementById("uploadFile").value = this.value;
};

This is not working because the uploaded file is not being parsed as ':file' is not assigned anything.

How can I apply CSS and javascript styling to 'file_field_tag'?

oreoluwa · Accepted Answer · 2016-07-03 22:58:35Z

1

You should be able to add css styling to the tag the same way you could use for your form helpers as such:

file_field_tag :file, class: 'whatever-class'
While using your hand-written file input, I think you're not getting a value in your controller because you didn't name your field, fix should be simple as:

<input id="uploadBtn" type="file" class="upload" name='file' />
I know you can upload file via AJAX/JS but I don't think the process is that straight-forward as I think you'd need to do some custom form serializations using FormData and other stuff like that. Not totally confident that I'm right though!

answered Jul 3, 2016 at 22:58

oreoluwa

5,6532 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Divya Jose Over a year ago

I tried it however it did not work. It did not pick my css stylesheet. It doesnot throw any error when I include my css file but it just doesnot apply the css styling defined inside .css

Collectives™ on Stack Overflow

Rails - File upload with Javascript/HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related