如何将 Dropzone.js 集成到 Ruby on Rails 7.1.2 中

Question

我正在尝试将 dropzone.js 集成到 Rail 版本 7.1.2 中，但 JavaScript 不起作用。在最新版本的 Rails 中导入节点模块似乎存在问题，因此我在样式表文件夹中手动添加了 dropzone 的 CSS 样式；然而，这种方法不适用于 JavaScript。我观察到的另一件事是 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/"

Answer 1

$ 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 %>