9

I realized that there isn't a solution using jQuery-File-Upload and Carrierwave or Dragonfly to make ability on one page when create post to adding multiple images. I've two models one Post with many Images. I'd like to upload image immediately after added and have option to cancel it before save whole new Post. My code is not working so I didn't paste it here, maybe someone has example, whether this concept is at all feasible with jQuery-File-Upload? If no maybe is other way to save multiple photos and keep bootstrap view? I found nice examples which would represent a similar to the expected functionality but with Upladify: FormFly or only with Carrierwave and nested_form: carrierwave-nested_form. On jQuery-File-Upload git wiki is tutorial how to use it only with one model in Rails.

I would like to get something like this: enter image description here

roza
  • 585
  • 1
  • 9
  • 30
  • 1
    I am having the same issue with a very similar app like yours. This question here may give you some hint: http://stackoverflow.com/questions/9357607/rails-3-jquery-file-upload-nested-model – John Powel Feb 14 '13 at 20:56

2 Answers2

11

The chief problem with all of this is the question "How can one create an association with an object that does not exist?". Well, you can't. What you can do is the next best thing, outsmart it. I will show you just how to do that, in 3 easy steps. I am intentionally not posting any code, as the process itself should be fairly clear, and applicable to a variety of approaches (not just limited to jQuery-File-Upload and Carrierwave or Dragonfly).

Step 1

Setup each portion of the relationship as normal, independently. Use a scaffold (or whatever) to generate a new post. Right below the form for the post, implement your photo upload solution as normal. I would use each object's own controllers and partials, as normal, to prevent this stuff from indelibly mixing together. Do not worry about the relationship association code just yet.

Step 2

Add your relationship code to your models. Do not worry that the interface does not properly associate them, yet.

Step 3 (the fun part)

Now, to tie it all together. We have images being created, but they don't belong to any posts. We also have posts being created without any of their images. We need some way to complete this association. The solution is fairly simple. You need to create a hidden text field in the posts form to contain the IDs of the images that are to be associated to the post. Then, your image creation response, add the ID of the new image to the text field at the same time you add the new image to the page. Similarly, in the post controller, simply loop over the IDs from the hidden field and associate the target object(s) prior to saving. You will probably want to add similar logic to the cancel button, like removing the ID from the array when the image is removed from the page. You may also want to add a scheduled task to clean up image past a certain age that are not associated with a post, to remove any clutter from abandoned forms.

Brad Werth
  • 17,411
  • 10
  • 63
  • 88
  • I don't get it that much… When you defin some image model nested in another (let's say here, the post), they all get created at the same time. JQfileUpload is not exactly fired the same way as it call the url for every files uploaded; but wouldn't it be possible get through it (jsut call the url once with many files sent via the form for a single post model to be created), meaning getting back to a 'normal' rails nested model behaviour ? – Ben Feb 14 '13 at 14:01
  • This specifically addresses asynchronous image uploading. If your process does not require this, then yes, a traditional nested implementation would have some advantages (although, still, some potential downsides, as well). – Brad Werth Feb 14 '13 at 15:50
  • Yeah sure, but what if i want to create a post with attached images, all at the same time ? – Ben Feb 14 '13 at 18:04
  • I'm not sure I'm following you... If this question/answer doesn't address your issue, perhaps you would have the best luck creating an new question with your specific concerns. – Brad Werth Feb 14 '13 at 20:20
  • The logic explained here is very clear but I think it is a little bit more than "simple" to solve this. By **create a hidden text field in the posts form to contain the IDs of the images that are to be associated to the post** do you mean: `<%= hidden_field_tag :post_id, @post.id %>` ? – John Powel Feb 14 '13 at 20:59
  • Well, close, but it should be a new arbitrarily-named attribute that does not currently exist, like `image_ids`, or something, but yes, probably a hidden field tag. – Brad Werth Feb 14 '13 at 21:21
3

I found a small example uploading multible images with JqueryFileUpload in rails with carrierwave.

I currently worked on a better solution to relize multible file uploads with JqueryFileUpload but this topic is not so easy.

In this example

Generate a post scaffold with body:string when you set up a instance of a new post object in the pictures_controller new action you can implement a form for a post in the pictures/new view. 

<%= form_for(@post) do |f| %>
  <div class="field">
    <%= f.label :body %><br />
    <%= f.text_field :body %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>
bulleric
  • 2,077
  • 6
  • 21
  • 36
  • I saw this example but for me it doesn't correspond with parent Post model. Thanks for new conception. – roza Sep 10 '12 at 14:30
  • 2
    Hi roza i forked the bootsrap-uploader repo to show you how i solve it. check it out https://github.com/bulleric/bootstrap_uploader. You need to create a post then you can upload images in the posts show view (posts/1) importand is you need a valid post id. if you want to upload pictures on the same time you must save the post first. you cant save a relation wich is not saved in the database. in my application i create a upload scaffold wich is only to save the pictures. when the upload is complete i call a confirm method wich saves the post_id in the pictures. – bulleric Sep 10 '12 at 15:42
  • Ok I thought so, although in [FormFly](https://github.com/rdetert/FormFly) this is done like asynchronously, may with jQuery-File-Upload adding pictures in the same step is impossible or maybe the solution is too difficult. I know how to add photos after created post in the next step, in one page this is whole impasse. I leave yet question still opened but thank you for your contribution. – roza Sep 10 '12 at 16:16