Ruby on Rails 【Rails6.0】dropzoneの利用方法(Bootstrap4.5)


投稿日:2020年09月29日 (火)
Ruby on Rails6.0で画像をアップロードするには「dropzone」を利用すると便利です。
今回はBootstrapで実装していきます。

まずはyarnを使って「dropzone」をインストールします。

yarn add dropzone

2020年9月29日現在では「dropzone@5.7」がインストールされます。

「application.scss」ファイルに以下の記述を追加します。

@import 'dropzone/dist/basic.css';
@import 'dropzone/dist/dropzone.css';


「app\javascript\packs\application.js」ファイルに以下の記述を追加します。

window.Dropzone = require("dropzone")


アクティブストレージのカラムをモデルに追加します。

has_many_attached :photos


コントローラにアップロードとデリートのメソッドを追加します。

  def upload_photo
    @room.photos.attach(params[:file])
    render json: { success: true }
  end

  def delete_photo
    @image = ActiveStorage::Attachment.find(params[:photo_id])
    @image.purge
    redirect_to photo_upload_room_path(@room)
  end


ビューファイルの記述例を載せておきます。

<br/>
<div class="row">
    <div class="col-md-3">
        <%= render 'room_menu' %>
    </div>
    <div class="col-md-9">

        <div class="row">
            <div class="col-sm-9">
                <br/>
                <div class="card text-center">
                    <h4 class="card-header text-center">お部屋の写真 登録</h4>
                    <div class="card-body" style="margin-left: 50px;">
                        <br/>

                        <!--写真アップロードの記述 -->
                        <div class="dropzone" id="myDropzone"  style="height: 200px; width: 600px;" action="/rooms/<%= @room.id %>/upload_photo"></div>

                        <br/>
                        <div class="container" style="margin-left: 20px;">
                            <div class="row">

                                <% @room.photos.each do |photo| %>
        
                                    <div class="col-md-3">
                                        <figure>
                                            <%= image_tag url_for(photo),  style: "width: 100%;" %>
                                        </figure>
                                    
                                        <%= link_to '削除', delete_photo_room_url(photo_id: photo.id, id: @room.id), 
                                                method: :delete,
                                                data: { confirm: "本当に削除してよろしいですか?" },
                                                style: "z-index: 100; margin-top: -15px; margin-bottom: 20px; font-size: 10px;",
                                                class: "btn btn-outline-danger btn-sm"  %>
                                    </div>
        
                                <% end %>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    Dropzone.options.myDropzone = {
        paramName: "file",
        maxFilesize: 2,
        acceptedFiles: "image/*",
        init: function() {
            this.on('complete', function (file) {
                location.reload();
            })
        }
    }
</script>



これで「dropbox」による写真のアップロードができるようになります。
複数の写真も同時にアップロードできます。

dropboxによる写真アップロード実装.png 341KB



ここに書いてある通りにやっても上手く行かないと思います。
なぜならルートの設定やモデルの設定、コントローラの詳細設定を省略しているからです。

詳細は当サイトのプロジェクト「民泊サイトの構築Rails6.0」や「お仕事売買サイトの構築Rails6.0」のプロジェクトで解説していますので参考にしてください。



Rails6.0 Windows MacOSX

動画学習サイトの構築 Rails6.0

  0 (0)

タスク   128

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

民泊サイトの構築 Rails6.0

  0 (0)

タスク   128

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

動画学習サイトの構築 Rails5.0

  0 (0)

タスク   100

1,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

お仕事売買サイトの構築 Rails6.0

  0 (0)

タスク   146

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

民泊サイトの構築 Rails5.0

  0 (0)

タスク   136

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。