Итак, у меня есть страница формы для Orders
, и я реализовал загрузку файлов с помощью Active Storage
, а также реализовал функцию перетаскивания под названием Filepond
с помощью importmap
и javascript
.
Однако, когда я запускаю свой сервер rails с помощью rails s
и перехожу на страницу формы, Filepond
не появляется (функция перетаскивания)
ТЕПЕРЬ, когда я обновляю страницу, загружается Filepond
ТЕПЕРЬ снова, когда я перехожу на другую страницу и возвращаюсь к форме, файл не загружается
приложение/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "bootstrap"
import "custom/custom"
import "filepond"
import "filepond-plugin-image-preview"
приложение/javascript/обычай/обычай.js
// Import FilePond
import * as FilePond from 'filepond';
// Import the plugin code
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
// Register the plugin
FilePond.registerPlugin(FilePondPluginImagePreview);
// Get a reference to the file input element
const inputElement = document.querySelector('#files-upload');
// Create a FilePond instance
const pond = FilePond.create(inputElement, {
credits: {},
storeAsFile: true,
allowMultiple: true,
allowReorder: true,
});
просмотры/заказы/_form.html.erb
<%= form_with(model: order) do |f| %>
.......
.......
<%= f.file_field :files, multiple: true, direct_upload: true,
required: true, id:"files-upload" %>
........
........
<% end %>
ЗАКЛЮЧЕНИЕ:
Каждый раз, когда я перехожу на страницу формы, мне приходится обновлять страницу один раз, чтобы filepond's drag n drop feature
работал.
так есть ли способ исправить это в rails 7, чтобы нам никогда не приходилось обновлять страницу для работы filepond
??
извините за ошибку, сейчас загрузил
Итак, я узнал о проблеме, проблема заключается в JavaScript. Поскольку Rails 7 использует Turbo для обработки JavaScript, нам нужно использовать Event "turbo:load"
, предоставленный Turbo Hotwire,
turbo:load
срабатывает один раз после начальной загрузки страницы и снова после каждого посещения Турбо. Получите доступ к показателям времени посещения с помощью объекта event.detail.timing.источник: https://turbo.hotwired.dev/reference/events
custom.js
// Import FilePond
import * as FilePond from 'filepond';
// Import the plugin code
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
// Register the plugin
FilePond.registerPlugin(FilePondPluginImagePreview);
document.addEventListener("turbo:load", loadFilePond);
function loadFilePond(){
// Get a reference to the file input element
const inputElement = document.querySelector('#files-upload');
// Create a FilePond instance
const pond = FilePond.create(inputElement, {
credits: {},
storeAsFile: true,
allowMultiple: true,
allowReorder: true,
});
}
Пожалуйста, включите код, с которым вы работаете. Отладка скриншота невозможна