Uploading files with Rails, Paperclip, and Backbone

Question

I'm learning Rails by creating a simple imageboard. I want users to be able to upload images to the server and then I will be able to serve them.

I'm using rails-backbone and paperclip.

Here are the related portions:

app/models/image.rb

class Image < ActiveRecord::Base
  attr_accessible :url
  attr_accessible :data
  has_attached_file :data, :styles => { :medium => "300x300>", :thumb => "100x100>" }
end

app/assets/javascripts/backbone/templates/images/submit.jst.ejs

<form id="new-image" name="image" data-remote="true" enctype="multipart/form-data">
  <div class="field">
    <label for="data"> image:</label>
    <input type="file" name="data" id="data">
  </div>

  <div class="actions">
    <input type="submit" value="Create Image" />
  </div>
</form>

app/controllers/images_controller.rb

def create
  @image = Image.new(params[:image])
  respond_to do |format|
    if @image.save
      format.html { redirect_to @image, notice: 'Image was successfully created.' }
      format.json { render json: @image, status: :created, location: @image }
    else
      format.html { render action: "new" }
      format.json { render json: @image.errors, status: :unprocessable_entity }
    end
  end
end

I also ran this migration:

class AddAttachmentDataToImages < ActiveRecord::Migration
  def self.up
    add_attachment :images, :data 
  end

  def self.down
    remove_attachment :images, :data
  end
end

Upon attempting to save a file named "fruits.png", I get this output in the console:

Started POST "/images" for 127.0.0.1 at 2012-10-31 00:55:07 -0700
Processing by ImagesController#create as JSON
  Parameters: {"image"=>{"url"=>nil, "data"=>"C:\\fakepath\\fruits.png"}}
Completed 500 Internal Server Error in 2ms

Paperclip::AdapterRegistry::NoHandlerError (No handler found for "C:\\fakepath\\fruits.png"):
  app/controllers/images_controller.rb:16:in `new'
  app/controllers/images_controller.rb:16:in `create'

Any help would be appreciated! Thanks!

possible dupe: http://stackoverflow.com/questions/10033425/paperclip-exception-paperclipadapterregistrynohandlererror — prusswan, Oct 31 '12 at 08:21
Does appear to be the same error, except it looks like the solution is to tell the form that the form is multipart. My form has enctype="multipart/form-data" so I don't think that is the issue. — Catherine Hwang, Oct 31 '12 at 08:33
another one: http://stackoverflow.com/questions/12336081/nohandlererror-with-rails3-and-paperclip?lq=1 Assuming your problem is not too localized, check your paperclip setup by running other projects that integrate it, like https://github.com/tors/jquery-fileupload-rails-paperclip-example — prusswan, Oct 31 '12 at 08:52
I ran it against the example you provided and it works fine. I don't think it's Paperclip itself--the params field is never getting populated correctly with the file upload. — Catherine Hwang, Oct 31 '12 at 15:56

leafo · Accepted Answer · 2012-11-01T18:03:36.187

1

Rail's UJS doesn't know how to remote submit a form that is multipart. Remove data-remote="true" from the form tag.

If the form is being sent via ajax then chances are it's not being encoded correctly unless you know you are using the FileData API from JavaScript. You can encode multipart forms correctly using XHR Level 2 and FormData. Before you can encode it you must read the file contents in using FileData.

edited Nov 01 '12 at 18:03

answered Oct 31 '12 at 15:45

leafo

1,862
14
18

I did and the problem still persists. – Catherine Hwang Oct 31 '12 at 15:58
Open up the network panel in your inspector and look at the request for the form submission. From there you can verify that it is being sent as multi-part. Look at the headers of the request. If it's being sent via ajax then chances are it's not being encoded correctly unless you know you are using the FileData api from JavaScript. – leafo Oct 31 '12 at 16:30
So it seems like it doesn't matter what I set my form to. The problem is that Backbone.save uses Backbone.sync which uses jQuery.Ajax, which doesn't support file upload. – Catherine Hwang Nov 01 '12 at 07:43

Uploading files with Rails, Paperclip, and Backbone

1 Answers1