Multiple image upload Rails

Question

I have been stuck on a problem for three weeks now, and although I have tried everyday to find an answer to my problem, I haven't found anything that I have been able to make work. If anyone could help me, I would be very, very grateful.

I have built a basic blog in Rails that allows an admin user to publish articles using a form, containing a title text_field, body text_area, and file_field for an image, which uses Paperclip. All very simple and easy and no problems there. However, I have been trying to alter the form to allow an admin user to upload multiple images as part of a new article, but have been unable to find a way to do this.

I need a solution that will allow me to achieve multiple image upload functionality in a form. I have tried many gems and many tutorials, but have been unable to integrate anything into my app without completely breaking it. Can any one help me get out of this dead end I've found myself in for the last three weeks? Do you have any clear tutorials or solutions that will help me overcome this problem?

Thank you very much to anyone that can help me.

Answer 1

Your question is quite broad, without any schema or anything so I'll try to help you as much as possible given that.

If it's a blog, you might have a post model. You could have a photo model, with a reference to the post model. If you add paperclip to your photo model, then you can save multiple photos.

There are multiple ways to do this. The first one I think of is using nested forms with a gem like cocoon.

The second I think of is using a dropzone, which would upload the photos using Ajax.

Answer 2

By default PaperClip allows you to upload one attachment. However, a clean way I've found to work around this is to create another model which would wrap around the images.

class Article < AR::Base
   has_many :images
   accepts_nested_attributes_for :images
end

class Image < AR::Base
   belongs_to :article
   has_attached_file :filename, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/missing.png"
   validates_attachment_content_type :filename, content_type: /\Aimage\/.*\Z/
end

Don't forget to run a migration to create the images table:

rails generate model image article:references

and

rails generate paperclip image filename

Then in your articles/form, where you initially had the field to upload the image, you would have

<%= f.fields_for :images do |p| %>
  <%= p.label :filename %><br>
  <%= p.file_field :filename%>
<% end %>

In your articles_controller#article_params, along with the current params, you would have, params.require(:article).permit(..., images_attributes: [:filename])

Afterwards, allowing the uploads of multiple images would therefore only require the basic knowledge of nested forms. To set a default number of file_fields, in your ArticlesController#new after initializing your @article you would have

def new
  @article = Article.new
  2.times{ @article.images.build}
end

With this setup, when you navigate to your new_articles route, you should see your article ready to upload 2 images. To learn more about how to use NestedForms to do even more, you should see Ryan Bates tutorial. This approach provides a cleaner interface, as the other approaches, I guess, would require some sort of hack.

Let me know if I'm able to help or further clarifications required.