Rails: s3_direct_upload - How do I save/use the data response?

Question

I've searched all over SO for an answer, so I'm sure this hasn't been asked before. Please help me, o savior!

I'm trying to use the s3_direct_upload gem to handle uploading files directly to S3, but I just don't know how to see/use/save the data that apparently is given back from the S3 server. I've read the README for s3_direct_upload a dozen times, and it gives some example snippets of JS code but doesn't tell me where that code should go.

I have worked through the first part of the README and set up AWS config and the simple jQuery

jQuery ->
  $("#s3-uploader").S3Uploader()

In my CoffeeScript (which is included in the asset pipeline correctly).

I have this in my view:

<%= s3_uploader_form callback_url: work_path, callback_param: "work[url]", class: "s3-uploader" do %>
    <%= file_field_tag :file, multiple: false %>
<% end %>

<%= form_for(@work) do |f| %>

    <%= f.label :name, "Title" %>
    <%= f.text_field :name %>
    <%= f.label :category, "Category" %>
    <%= f.text_field :category %>
    <br>
    <%= f.submit "Upload", id: "btn-upload-work", class: "btn btn-large btn-warning btn-upload" %>

<% end %>

I want the user to upload a work and fill in some fields. When the user clicks the "Upload" button, a new work should be created with attribute :url equal to the url of the file uploaded, as well as the :name and :category attributes equal to the text inputted by the user. Then the page should redirect to the show page of the submitted work. The README gives this example:

$('#myS3Uploader').bind "s3_upload_complete", (e, content) ->
  $('#someHiddenField').val(content.url)

But I have no idea where to put this bit of code.

This is my controller: (I know the create action needs changes, but I don't know exactly what. I've experimented for several hours with respond_to to no avail.)

def show
    @work = Work.find(params[:id])
end

def new
    @work = Work.new
end

def create
    @work = current_user.works.new(work_params)
    if @work.save
        flash[:success] = "Work successfully submitted!"
        redirect_to @work
    else
        render 'new'
    end
end

private

    def work_params
        params.require(:work).permit(:name, :category, :url)            
    end

Even after reading the README a dozen times, I still don't understand what callback_url really is, what callback_param is, and how to work with them. Even worse, loading this view gives an error - Rails doesn't like the callback_url: work_path portion. I had to change that to work_path(@work) to have it load, but I'm not sure if that's right (since I don't understand callback_url).

From the questions everyone else has asked about s3_direct_upload, it seems that they already know how to use it (the questions are just smaller details). So I'm lost because I can't even get it to work in the first place. I'm a bit new to web frontends, so please bear with me and explain this to me. Thanks so much!

Answer 1

I still don't understand what callback_url really is,

callback_url is the path that it would post to via AJAX after the gem finishes uploading the file to s3. So work_path(@work) should be ok.

$('#myS3Uploader').bind "s3_upload_complete", (e, content) ->
$('#someHiddenField').val(content.url)

But I have no idea where to put this bit of code.

You can place the above code in the same coffeescript file where you put $("#s3-uploader").S3Uploader(). Replace $('#someHiddenField').val(content.url) with alert(content.url). This way if the upload is successful you will get an alert message.

Also paste the following code in the same coffeescript file

$('#myS3Uploader').bind "s3_upload_failed", (e, content) ->
  alert("#{content.filename} failed to upload : #{content.error_thrown}")

The above code would show an alert if there was an error.

If you do not see any of the two after submitting the file, then there is some other issue. I highly recommend using firebug. It is really helpful in debugging client side javascript functions. In firebug net panel you can see if the gem is making a call to the s3 server or not. It will also show any javascript errors in the console panel.