Kéo thả upload ảnh trong rails sử dụng dropzonejs-rails

Dropzone là một thư viện javascript cho phép upload nhiều ảnh bằng kéo thả, hoặc chọn ảnh từ thư mục.Bài viết này sẽ hướng dẫn từng bước cách sử dụng thư viện dropzone trong rails với gem carrierwave

Cách cài đặt

Thêm vào trong Gemfile gem carrierwave hỗ trợ upload files từ Ruby applications và gem dropzonejs-rails rồi bundle install

gem 'dropzonejs-rails'
gem 'carrierwave'

Thêm vào application.js

//= require dropzone

Thêm vào application.css

*= require dropzone/dropzone

Carrierwave generate uploader

rails g uploader picture

Sau khi generate sẽ tạo ra filepicture_uploader.rb trong thư mục uploaders. Có thể tham khảo cách sử dụng carrierwave tại đây carrierwave

Generate model Image

rails g model Image file_name:string

class Image < ApplicationRecord
  mount_uploader :file_name, PictureUploader
end

Generate ImageController

rails generate controller images

class ImagesController < ApplicationController
  def index
  end
  
  def create
    @image = Image.new(file_name: params[:file])
    if @image.save
      render json: { message: "success", fileID: @image.id }, :status => 200
    else
      render json: { error: @image.errors.full_messages.join(',')}, :status => 400
    end
  end
  
  private
  def image_params
    params.require(:image).permit(:avatar)
  end
end

Thêm trong routes file

resources :images, only: [:index, :create]
root "images#index"

View

Trong file /images/index.html.erb tạo div có chứa class dropzone. Đây là class bắt buộc để dùng với dropzone

<div class="dropzone" id="image-upload"></div>

Javascripte

<script>
  $(document).ready(function(){
    Dropzone.autoDiscover = false;
    var dropzone = new Dropzone ("#image-upload", {
      paramName: "image[avatar]",
      addRemoveLinks: true,
      url: "/images",
      headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
      }
    });
  });
</script>

Đây là màn hình upload ảnhVí dụ trên chỉ là cơ bản về cách sử dụng dropzone. Tìm hiểu thêm về các option, các function dropzone có thể xem trên trang web của dropzone http://www.dropzonejs.com/