Upload Multiple Files using DropzoneJS in Rails

You can see example here.

1. Installation

Step 1: Add to your Gemfile

gem 'dropzonejs-rails'

 

Step 2: Config for usage

On application.js 

//= require dropzone

On application.css

*= require dropzone/basic
*= require dropzone/dropzone

 

2. Add a form element with the class "dropzone" in View

<%= form_tag upload_photo_path, class: "dropzone", id: "upload-dropzone" do %>

  <div class="fallback">

    <%= file_field_tag "image" %>

  </div>

<% end %>

 

3. Configuration for dropzone object in JS

Dropzone.autoDiscover = false;

var headlineDropzone = new Dropzone("#upload-dropzone", {

  url: "/upload_photo", // You can override url of form in here.

  maxFilesize: 5, // in MB

  parallelUploads: 2,

  acceptedFiles:'.jpg, .png, .jpeg, .gif', // type of files

  init: function(){

    this.on('addedfile', function(file) {

      // Called when a file is added to the list.

    });

    this.on('sending', function(file, xhr, formData) {

      // Called just before each file is sent.

    });

    this.on('success', function(file, json) {

      // Called when file uploaded successfully.

    });

  }

});

 

4. Add "upload_photo" action in Controller

This action will be called when you add or crop files to form.

def upload_photo

  // photo = Photo.create(:image => params[:image])
  // ... 
  // ... your code 
  // render :json => { :status => photo.valid? }

end

 

Read more: Upload Image to S3 using Carrierwave on Rails

 

5. Add remove or cancel files upload

Add Dropzone option: 

addRemoveLinks: true

Beside, if you want to trigger remove files and cancel upload files, you can use:

headlineDropzone.removeFile(headlineDropzone.files);

 

6. Reference