Ruby on Rails | doropzoneの利用 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

Dropzone.jsをRuby on Railsプロジェクトに統合することは、ファイルアップロードのユーザーエクスペリエンスを向上させ、アプリケーション全体の機能性と使いやすさを向上させるために非常に有益です。

Dropzone.jsは、ユーザーエクスペリエンスを向上させるために、ドラッグアンドドロップを使用してファイルをアップロードする方法を提供します。
ユーザーはファイルを選択するだけでなく、ファイルをブラウザウィンドウにドラッグしてアップロードできます。
これにより、使いやすさが向上し、アップロードプロセスがシームレスになります。

Dropzoneをyarnでインストールします。

コマンド
yarn add dropzone@5.5.1

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

記述追 app/javascript/stylesheets/application.scss

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

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

記述追加　app\javascript\packs\application.js(12行目)

window.Dropzone = require("dropzone")

実際に写真をアップロード・削除するには、ルートの設定、コントローラの設定、ビューの設定があります。
一例を書いておきます。

【config/routes.rb】

  resources :reports do
    member do
      delete :delete_photo
      post :upload_photo
    end
  end

【app/controllers/reports_controller.rb】

protect_from_forgery except: [:upload_photo]

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

  def delete_photo
    @image = ActiveStorage::Attachment.find(params[:photo_id])
    @image.purge
    redirect_to edit_report_path(@report, step: 4)
  end

【app/views/reports/_step4.html.erb】

<div class="container mt-4">

    <label for="" class="ttl3">写真をアップロード</label>
    <div class="control">
        <div class="m-b-20">
            <div class="dropzone" id="myDropzone"  style="height: 200px;" action="/reports/<%= @report.id %>/upload_photo"></div>
        </div>

        <div class="row">
            <% @report.photos.each do |photo| %>
                <div class="col-4">
                    <div class="card mt-2">
                        <%= image_tag url_for(photo), class: "card-img-top"  %>
                        <div class="card-body">               
                            <p class="card-text">
                                <%= link_to '削除', delete_photo_report_url(photo_id: photo.id, id: @report.id, step: @step), 
                                    method: :delete,
                                    data: { confirm: "削除して本当によろしいですか?" },
                                    class: "btn btn-outline-danger btn-sm",
                                    style: "z-index: 100;"
                                %>
                            </p>
    
                        </div>
                    </div>
                </div>
            <% end %>
        </div>
    </div>
</div>


<script>
    Dropzone.options.myDropzone = {
        paramName: "file",
        maxFilesize: 5,
        acceptedFiles: "image/*",
        dictDefaultMessage: "ここに写真をドラッグ&ドロップして下さい。<br/>または、クリックすることで写真を選択することもできます。",
        init: function() {
            this.on('complete', function (file) {
                location.reload();
            })
        }
    }
</script>