← Back to Upcase

Strategies to upload multiple files and preview in form (rails 4)

for a rails 4 application I’m trying to implement multiple image upload. My goal is to attach multiple images to a place model besides other attributes (name, geographical features, tags, …) within it’s form. Hence it’s not that classical “galery example”-thing…

It’s fairly simple using carrierwave properly set up. I use postgresql with an array column, the images become selected via a file_field like so

# place form
  .row
    .col-xs-6.offset-xs-3
      = f.file_field :images, multiple: true, accept: 'image/jpeg, image/jpg, image/gif, image/png'

# place model
class Place < ActiveRecord::Base
  mount_uploaders :images, ImageUploader
  ...

But - since the app should be mobile-friendly - things get a little complicated now. I want users to be able to upload multiple images they take with the camera application of their mobile phones in the same moment they insert . The standard file_field-approach fails here since we do not want to use some sort of file explorer system in this context but rather have a convenient user experience. After reading several hours on how I might accomplish that task jQuery file upload seems to do the trick - in general. Ideally users would have the opportunity to subsequently add photos via a button within the place form like in the demo shown on that example page. Considering this I have several questions, I hope the following order makes sense:

  1. Would it be beneficial to switch the whole setup to rather use a
    seperate Image model following a 1-n association between place and
    images?
  2. This setup would make it easier to remove images from places
    later, right?
  3. How do the images finally become uploaded via my form-global submit button? Do I have
    to nest the image resources and accept nested attributes in my place
    controller handling image creation and association there?
  4. How would the form document have to look like in order to show those nice little 64x64 px thumbnails before uploading (I assume these become processed client-wise)?

Allright, lots of questions, I hope somebody gained some experience with that stuff! Thanks in advance,
Andi