DragonFly attachment and BackBone.js

Question

I'm trying to attach an image to a model using BackBone.js, in Rails all works as expected.

But with BackBone.js I don't get how to attach an image and for example show it in the show template.

as you'll see in the Gist I get None of the functions registered with #<Dragonfly::Analyser:0x000000028e2d60> were able to deal with the method call format(<Dragonfly::TempObject data="img2.jpg" >). You may need to register one that can.

this is the form I use in BB.js template:

<form id="new_album" enctype="multipart/form-data">
  <input type="text" name="name" id="new_album_name">
  <input type="file" name="cover_image" id="new_album_cover_image" >
  <input type="submit" value="Add">
</form>

and this is what I get: https://gist.github.com/4105311

here is the complete repo on GitHub: https://github.com/enricostano/FullstackAlbum

EDIT

adding remotipart gem and changing the form like that

<form id="new_album" method="post" enctype="multipart/form-data" data-remote="true" data-type="json">
  <input type="text" name="name" id="new_album_name">
  <input type="file" name="cover_image" id="new_album_cover_image" >
  <input type="submit" value="Add">
</form>

I get now this Rails log

Started POST "/api/albums" for 127.0.0.1 at 2012-11-19 11:06:20 +0100
Processing by AlbumsController#create as JSON
  Parameters: {"name"=>"caricati", "cover_image"=>"img2.jpg", "album"=>{"cover_image"=>"img2.jpg", "name"=>"caricati"}}
   (0.1ms) begin transaction
None of the functions registered with #<Dragonfly::Analyser:0x0000000265c550> were able to deal with the method call format(<Dragonfly::TempObject data="img2.jpg" >). You may need to register one that can.
  SQL (0.5ms) INSERT INTO "albums" ("cover_image_uid", "created_at", "name", "updated_at") VALUES (?, ?, ?, ?) [["cover_image_uid", "2012/11/19/11_06_20_434_file"], ["created_at", Mon, 19 Nov 2012 10:06:20 UTC +00:00], ["name", "caricati"], ["updated_at", Mon, 19 Nov 2012 10:06:20 UTC +00:00]]
   (256.8ms) commit transaction
Completed 201 Created in 303ms (Views: 1.8ms | ActiveRecord: 257.4ms)
cache: [POST /] invalidate, pass


Started POST "/" for 127.0.0.1 at 2012-11-19 11:06:20 +0100
Processing by AlbumsController#index as JSON
  Parameters: {"cover_image"=>#<ActionDispatch::Http::UploadedFile:0x007f95e878c1b8 @original_filename="img2.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"cover_image\"; filename=\"img2.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/tmp/RackMultipart20121119-5822-hq8kbi>>, "name"=>"caricati", "remotipart_submitted"=>"true", "X-Requested-With"=>"IFrame", "X-Http-Accept"=>"application/json, text/javascript, */*; q=0.01"}
WARNING: Can't verify CSRF token authenticity
  Album Load (0.2ms) SELECT "albums".* FROM "albums"
Completed 200 OK in 2ms (Views: 1.0ms | ActiveRecord: 0.2ms)

When I upload a file DragonFly create in the filesystem 2 files: 12_37_59_129_file and 12_37_59_129_file.meta

the first one (that should be the file I've uploaded) contains the name of the file I've just upload.

score 0 · Answer 1 · answered Nov 18 '12 at 23:52

0

It looks like the actual file data is not being submitted because you are using AJAX via Backbone instead of the regular form submission. If you want to submit file data in this way you should either look at using something like the FileReader API or the iframe approach to simulating AJAX.

answered Nov 18 '12 at 23:52

Andrew Hubbs

9,338
9
48
71

hi @andrew, could I simply avoid AJAX? I just need to POST directly to Rails. – enricostn Nov 19 '12 at 00:54
Yes, but that would still mean you need to go outside the confines of `Backbone.sync` to do so. Also, the result would be a full page redirect from the server side (something you are probably trying to avoid since you are using `Backbone`). – Andrew Hubbs Nov 19 '12 at 03:56
ok, I will try something like [remotipart](https://github.com/JangoSteve/remotipart) gem. any hint? – enricostn Nov 19 '12 at 08:47
this SO question is related but I don't get how to adapt to my case http://stackoverflow.com/questions/6500379/file-upload-with-backbone I don't use Rails views, but only BakBone.js templates... – enricostn Nov 19 '12 at 09:52

DragonFly attachment and BackBone.js

1 Answers1