How to use JQuery-File-Upload to upload multiple images on one page during creating post?

Question

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:

Answer 1

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.

Answer 2

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 %>