Techioz Blog

Dropzone.js を Ruby on Rails 7.1.2 に統合するにはどうすればよいですか?

概要

Rail バージョン 7.1.2 に Dropzone.js を統合しようとしていますが、JavaScript が機能しません。 Rails の最新バージョンではノード モジュールのインポートに問題があるようです。そのため、スタイルシートのフォルダーにドロップゾーンの CSS スタイルを手動で追加しました。ただし、このアプローチは JavaScript では機能しません。私が観察したもう 1 つの点は、Dropzone js cdn は機能しますが、JavaScript をローカルにロードする必要があることです。

これは私の application.js ファイルです

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"


import jquery from "jquery"

//= require dropzone

window.jQuery = jquery
window.$ = jquery



window.Dropzone = require(dropzone)


// import "trix"
// import "@rails/actiontext/"

解決策

$ yarn add dropzone

// app/javascript/application.js

import Dropzone from "dropzone";

document.addEventListener("turbo:load", function(event) {
  let myDropzone = new Dropzone(".dropzone");
  myDropzone.on("addedfile", file => {
    console.log(`File added: ${file.name}`);
  });
})

<!-- app/views/layouts/application.html.erb -->

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

# _form.html.erb

<%= form_with url: "/", class: :dropzone do |f| %>
  <%= f.file_field :img %>
<% end %>