DropzoneJSとCarrierwaveを使って複数のファイルをアップロードする

6730 ワード
Rails Rails テキストリンク

Githubページ
DropzoneJS：https://github.com/ncuesta/dropzonejs-rails
Carrierwave：https://github.com/carrierwaveuploader/carrierwave

DropzoneJSとは何


DropzoneJSはAJAXで複数のファイルをアップロードすることを可能にするJavaScriptライブラリです。さらに、このライブラリはアップロードされた画像のドラッグアンドドロップファイルとプレビュー機能もサポートします。

インストール

Gemfileに次のgemを追加します。

gem "dropzonejs-rails"
gem "carrierwave"

コマンドを実行します。

bundle install

ファイルapp/assets/javascripts/application.jsに次の行を追加します。

//= require dropzone

ファイルapp/assets/javascripts/application.cssに次の行を追加します。

*= require dropzone/dropzone

Pictureアップローダを作成します。

rails g uploader picture

モデルImageを生成します。

rails g model image file_name:string

ファイルapp/models/image.rb：

image.rb
class Image < ApplicationRecord
  mount_uploader :file_name, PictureUploader
end

次に、コントローラapp/controllers/images_controller.rbを作成します

images_controller.rb
class ImagesController < ApplicationController
  skip_before_action :verify_authenticity_token
  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
end

それからroutes.rbに次の内容を追加します。

routes.rb
Rails.application.routes.draw do
  resources :images, only: [:index, :create]
  root "images#index"
end

次はビューを作成します。ファイルapp/views/avatars/index.html.erbに以下のような内容を作成します。

index.html.erb
<h1>My Images</h1>
<%= form_for(Image.new, html: {multipart: true, class: "dropzone"}) do |f|  %>
  <div class="fallback">
    <%= f.file_field :file_name, multiple: true %>
  </div>
<% end %>

<script>
  $(function() {
    // disable auto discover
    Dropzone.autoDiscover = false;

    $(".dropzone").dropzone({
      maxFilesize: 1,
      addRemoveLinks: true
    });
  });
</script>

結果

Dropzoneのevent

ここで提供されているdropzoneイベントのリストを参照することができます。

Dropzone設定

ここで設定できるコンフィグレーションの一覧を参照することができます。

まとめ

この記事では、Dropzoneをインストールして使用するための基本的な手順を説明します。みんなの仕事に役に立つと嬉しいです。

NestJS-起動
BOJ:217ケーブル