Multiple File Uploads sử dụng Dropzone trong Ruby on Rails

Trong bài viết này, chúng ta sẽ đi tìm hiểu cách upload nhiều file trong ứng dụng Ruby on Rails sử dụng một thư viện javascript là Dropzone.

Dropzone là một thư viện javascript cho phép upload nhiều file thông qua Ajax, cho phép drag and drop file hoặc thư mục trên các trình duyệt khác nhau. Bài viết này hướng dẫn thực hiện upload nhiều ảnh trực tiếp tới Paperclip sử dụng Dropzone.

1. Khởi tạo Rails app
Tạo ứng dụng rails từ console

rails new dropzone-rails

Để xử lý các file hình ảnh tải lên, chúng ta sẽ sử dụng gem Paperclip để lưu trữ file tới databases. Thêm paperclip, dropzonejs-rails gem vào gemfile và thực hiện bundle install để cài đặt.

Gemfile
...
gem 'paperclip', '~> 4.2.0'
gem 'dropzonejs-rails', '~> 0.4.16'
...

Sau khi đã thêm dropzone tới gemfile để có thể sử dụng Dropzone chúng ta cần require dropzone.css và dropzone.min.js tới file application.css và application.js của ứng dụng.

// application.css
...
*= require_self
*= require bootstrap
*= require dropzone
*= require_tree .
...

// application.js
 ...
//= require jquery
//= require jquery_ujs
//= require dropzone.min
//= require turbolinks
//= require_tree .
 ...

2. Tạo model xử lý file và config dropzone
Trước tiên tạo modle Upload để xử lý file hình ảnh tải lên sử dụng rails generator

rails g model Upload

Sau đó add file đính kèm paperclip tới model Upload

rails g paperclip Upload image

Update model Upload cùng validate

// upload.rb
class Upload < ActiveRecord::Base
    has_attached_file :image, :styles => { :medium => "300x300>",:thumb => "100x100>" }
    validates_attachment :avatar, :content_type => /Aimage/.*/
end

Bước tiếp theo chúng ta tạo controller uploads cùng action new để tuơng tác với người dùng và lưu trữ ảnh người dùng upload tới database. Và add resources uploads tới routes file.

class UploadsController < ApplicationController
  def new
    @upload = Upload.new
  end

  def create
    @upload = Upload.create(upload_params)
    if @upload.save
      render json: { message: "success" }, status: 200
    else
      render json: { error: @upload.errors.full_messages.join(',')}, status: 400
    end     
  end

  private
  
  def upload_params
    params.require(:upload).permit(:image)
  end
end

// routers.rb
DropzoneRails::Application.routes.draw do
  root "uploads#new"
  resources :uploads
end

Theo mặc định Dropzone sẽ tìm tất cả các form chứa class "dropzone" và tự động assign nó vào form để tạo ra input cho việc upload file. Chúng ta sẽ update view cùng với class "dropzone"

// new.html.erb

<%= form_for(@upload, html: { multipart: true, class: "dropzone"}) do |f|  %>
  <div class="fallback">
    <%= f.file_field :image %><br>
    <%= f.submit "Upload" %>
  </div>
<% end %>

Bây giờ khi khởi chạy ứng dụng, chúng ta sẽ thấy page sau

Bạn có thể drap file hình ảnh nhưng sẽ sinh ra lỗi. Bời vì tên của file param mặc định là file, trong khi đó trong controller đang sử dụng image vì vậy cần override tên param sử dụng javascipt

// upload.js

$(document).ready(function(){
  Dropzone.autoDiscover = false;
  $("#new_upload").dropzone({
    maxFilesize: 1,
    paramName: "upload[image]",
    addRemoveLinks: true
  }); 
});

Bây giờ chúng ta có thể upload file bằng cách drop