ruby-on-rails-3image-uploadingdragonfly-gem

multiple image upload with dragonfly


i was trying for multiple image upload with dragonfly in rails3. i searched for some tutorials, but couldn't find any. i found a tutorial for multiple image upload with Carrierwave, but couldnt find luck with dragonfly .. any help please :)


Solution

  • Preface

    Dragonfly itself can be used to manage media for your project in general, similar to paperclip. The question itself boils down to the multiple file upload within a rails application. The some tutorials on this topic available, which can easily be adapted to models using Dragonfly for storing specific files on them. I would suggest you look into those and try to adapt them for your project.

    However, I can present a minimum example which i built for a rails 3.2 app currently in development, which isn't perfect (validation handling for example), but can give you some starting points.

    Example

    Just for reference, the essential idea is taken from here. This example is done with Rails 3.2.x.

    Let's say you have a vacation database, where users may create trip reports on vacations they took. They may leave a small description, as well as some pictures.

    Start out by building a simple ActiveRecord based model for the trips, lets just call it Trip for now:

    class Trip < ActiveRecord::Base
        has_many :trip_images
        attr_accessible :description, :trip_images
    end
    

    As you can see, the model has trip images attached to it via a has_many association. Lets have a quick look at the TripImage model, which uses dragonfly for having the file stored in the content field:

    class TripImage < ActiveRecord::Base
        attr_accessible :content, :trip_id
        belongs_to :trip_id
    
        image_accessor :content
    end
    

    The trip image it self stores the file attachment. You may place any restrains within this model, e.g. file size or mime type.

    Let's create a TripController which has a new and create action (you can generate this via scaffolding if you like, it is by far nothing fancy):

    class TripController < ApplicationController
        def new
            @trip = Trip.new
        end
    
        def create 
            @trip = Trip.new(params[:template])
    
            #create the images from the params
            unless params[:images].nil?
                params[:images].each do |image|
                @trip.trip_images << TripImages.create(:content => image)
            end
            if @trip.save
                [...] 
        end
    end
    

    Nothing special here, with the exception of creating the images from another entry than the params hash. this makes sense when looking at the the file upload field within the new.html.erb template file (or in the partial you use for the fields on the Trip model):

    [...]
    <%= f.file_field :trip_images, :name => 'images[]', :multiple => true %>
    [...]
    

    This should work for the moment, however, there are no limitations for the images on this right now. You can restrict the number of images on the server side via a custom validator on the Trip model:

    class Trip < ActiveRecord::Base
        has_many :trip_images
        attr_accessible :description, :trip_images
        validate :image_count_in_bounds, :on => :create
    
    protected
        def image_count_in_bounds
            return if trip_images.blank?
            errors.add("Only 10 images are allowed!") if trip_images.length > 10
        end
    end
    

    I leave this up to you, but you could also use client side validations on the file field, the general idea would be to check the files upon changing the file field (in CoffeeScript):

    jQuery ->
        $('#file_field_id').change () ->
             #disable the form
             for file in this.files
                 #check each file  
             #enable the form
    

    Summary

    You can build a lot out of existing tutorials, as dragonfly does not behave that differently to other solutions when it comes to just to uploading files. However, if you'd like something fancier, I'd suggest jQuery Fileupload, as many others have before me.

    Anyways, I hope I could provide some insight.