Rails 3.2 HTML5 multiple file upload, Carrierwave and no Javascript - ruby-on-rails-3

Question

Currently using Rails 3.2 and Carrierwave.
I have multiple files setup, but it requires multiple file fields but I only want one file field. I will provide this as the default if the browser does not support the HTML5 multiple property.
Controller
def new
#ad = Ad.new
5.times { #ad.images.build } // provides multiple file fields in the view.
end
def create
ad = Ad.new(params[:ad])
user = User.find(session[:user_id])
if user.ads << ad
flash[:notice] = "Ad successfully saved."
redirect_to ad_listing_path(ad.id, ad.slug)
else
render :new, :alert => "Ad was not saved."
end
end
View
<%= f.fields_for :images do |a| %>
<% if a.object.new_record? %>
<%= a.file_field :image, :multiple => true %><br>
<% end %>
<% end %>
If 5.times { #ad.images.build } is providing my multiple fields, what is the proper way to display 1 file field that accepts multiple?

Answer 1

This seems to be a popular issue with no good answers, so I'm going to completely answer it here. Before I start I will mention that the code is available at https://github.com/mdchaney/multi, but follow along to see how to do this in the easiest way possible.
Before we go there, in HTML 5 a file input field can have the "multiple" attribute set. If it's set, the result is the same as having multiple file inputs of the same name. In Rails, setting "multiple: true" for the file input field built by the form builder will cause it to upload as an array of files.
<%= f.file_field :files, :multiple => true %>
becomes
<input id="model_files" multiple="multiple" name="model[files][]" type="file" />
where "model" is the name of your model. This input control will (in Chrome, at least) have a label of "Choose Files" instead of "Choose File".
CarrierWave cannot deal with this natively. It uses a single text field to store information about a single file, and some internal logic to determine where that file (and possibly its derivatives) are stored. It would be possible to hack it to put information for multiple files in a single text field, choosing an encoding with a set delimiter. This would require a lot of work and hacking on CarrierWave.
I don't care to hack CarrierWave, though, so the issue turns into the fact that having multiple files attached to one item is actually a one to many relationship, or in Rails terms a "has_many". So it's possible to add the files from the file input field to multiple attached records using a simple attribute writer.
With that, I present the simplest way to do this that uses an HTML 5 file input field with the multiple attribute set. There are ways to do it with jQuery and flash, but I am presenting this to show specifically how to do it with straight HTML 5.
In our sample, we will have a simple model for "uploads", each of which will have a name and any number of linked files, which will be stored in another model called linked_files (making it easy, right?). The linked_file will hold the original filename, provided content type, and of course the field for CarrierWave to store its information.
Let's create the scaffold for uploads and then just the model for linked_files:
rails g scaffold Upload name:string
rails g model LinkedFile upload:references filename:string mime_type:string file:string
With that done, we can set limits if we wish on the fields and add the "not null" constraint:
class CreateUploads < ActiveRecord::Migration
def change
create_table :uploads do |t|
t.string :name, limit: 100, null: false
t.timestamps
end
end
end
class CreateLinkedFiles < ActiveRecord::Migration
def change
create_table :linked_files do |t|
t.references :upload, null: false
t.string :filename, limit: 255, null: false
t.string :mime_type, limit: 255, null: false
t.string :file, limit: 255, null: false
t.timestamps
end
add_index :linked_files, :upload_id
end
end
Now, let's fix up the Upload model by adding a new attribute writer called "files":
class Upload < ActiveRecord::Base
has_many :linked_files, inverse_of: :upload, dependent: :destroy
accepts_nested_attributes_for :linked_files, reject_if: :all_blank, allow_destroy: true
validates_associated :linked_files
attr_accessible :name, :files, :linked_files_attributes
def files=(raw_files)
raw_files.each do |raw_file|
self.linked_files.build({filename: raw_file.original_filename, mime_type: raw_file.content_type, file: raw_file})
end
end
validates :name, presence: true, length: { maximum: 100 }
end
Most of that is the normal declarations for the Rails model. The only real addition here is the "files=" method, which takes a set of uploaded files in an array and creates a "linked_file" for each one.
We need a CarrierWave uploader:
class FileUploader < CarrierWave::Uploader::Base
storage :file
def store_dir
"uploads/#{model.class.to_s.underscore}/#{model.id}/#{mounted_as}"
end
end
This is the simplest uploader possible, you may wish to restrict the type of file uploaded or whatever. Now, the LinkedFile model:
class LinkedFile < ActiveRecord::Base
mount_uploader :file, FileUploader
belongs_to :upload, inverse_of: :linked_files
attr_accessible :file, :filename, :mime_type, :file_cache, :remove_file
validates :filename, presence: true, length: { maximum: 255 }
validates :mime_type, presence: true, length: { maximum: 255 }
end
And that has nothing special, only added :file_cache and :remove_file as accessible attributes for the file uploader.
We are now done except for the views. We really only have to change the form, but we'll also change the "show" to allow access to the uploaded files. Here's the _form.html.erb file:
<%= form_for(#upload, { multipart: true }) do |f| %>
<% if #upload.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#upload.errors.count, "error") %> prohibited this upload from being saved:</h2>
<ul>
<% #upload.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<% if f.object.linked_files.size == 0 -%>
<div class="field">
<%= f.label :files %><br />
<%= f.file_field :files, :multiple => true %>
</div>
<% else -%>
<fieldset>
<legend>Linked Files</legend>
<%= f.fields_for :linked_files do |lff| -%>
<div class="field">
<%= lff.label :filename %><br />
<%= lff.text_field :filename %>
</div>
<div class="field">
<%= lff.label :mime_type %><br />
<%= lff.text_field :mime_type %>
</div>
<div class="field">
<%= lff.label :file, 'File (replaces current selection)' %><br />
<%= lff.file_field :file %>
<%= lff.hidden_field :file_cache %>
</div>
<div class="field">
<%= lff.check_box :_destroy %>
Remove this file
</div>
<hr />
<% end -%>
</fieldset>
<% end -%>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I have added two sections of code. If the #upload object has no "linked_files" associated with it, I simply show the multiple file input. Otherwise, I show each linked_file with all its information. It would be possible to add a "files" method to Upload and handle it that way, but doing so would lose the mime type across requests.
You can easily test this as the upload "name" is a required field. Start a server and go to http://127.0.0.1:3000/uploads to see the application. Click the "new" link, choose some files and hit "Create Upload" without providing a name. The next page will show all of your files now waiting. When you add a name everything is saved. Let's modify the "show" action to show the linked_files:
<p id="notice"><%= notice %></p>
<p>
<b>Name:</b>
<%= #upload.name %>
</p>
<p>
<b>Files:</b><br />
</p>
<table>
<thead><tr><th>Original Filename</th><th>Content Type</th><th>Link</th></tr></thead>
<tbody>
<% #upload.linked_files.each do |linked_file| -%>
<tr>
<td><%= linked_file.filename %></td>
<td><%= linked_file.mime_type %></td>
<td><%= link_to linked_file.file.url, linked_file.file.url %></td>
</tr>
<% end -%>
</tbody>
</table>
<%= link_to 'Edit', edit_upload_path(#upload) %> |
<%= link_to 'Back', uploads_path %>
In this I've simply added a header for "Files" and a table which shows all of them and provides a link for viewing. Nothing fancy, but it works.
If I were making this into a real application I would probably also provide a list of files or minimally a count of files on the uploads index page, also.
So that's it. Again, the entire test app is available at github if you want to download it, but I have put the entirety of my Rails generating statements and changes in this post.

Answer 2

Multiple uploads for one file field isn't really supported by HTML. You can get around it with some JavaScript plugins. Two that come to mind:
Uploadify
jQuery File Upload

Answer 3

Unfortunately, CarrierWave does not support the HTML5 multiple attribute (yet).
https://github.com/carrierwaveuploader/carrierwave/issues/984