Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 :)

like image 700
anand Avatar asked Oct 03 '11 12:10

anand


People also ask

How do I upload multiple images in rails?

A file can be uploaded to server in two ways, one we can send the image as base64 string as plain text and another one is using multipart/form-data . The first one is the worst idea as it sends the entire image as plain text.


1 Answers

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.

like image 101
Florian Avatar answered Sep 28 '22 15:09

Florian