Dropzone + Active Storage слушатель событий в рельсах

Question

Я использую dropzone с активным хранилищем для загрузки файлов, напрямую загружаю файлы на сервер s3 со стороны клиента.В настоящее время я получаю файл из dropzone с событием dropzone addedfile и загружаю его через new ActiveStorage.DirectUpload(file, url);.Теперь, согласно документации, они предоставили некоторые прослушиватели событий, которые я могу использовать для отображения прогресса загрузки пользователю, но они работают, только если я использую обычную форму и кнопку отправки.Это не работает, если я загружаю файлы через Javascript.Вот мой код:

dropzone.on("addedfile", function (file) {
    const upload = new ActiveStorage.DirectUpload(file, url);
    upload.create((error, blob) => {
        if(error) return;
        alert('file uploaded');
    }
}


addEventListener("direct-upload:start", event => {
    console.log('This does not work');
})

Answer 1

DirectUpload не отправляет события.

DirectUploadController делает, и использует DirectUpload для фактической загрузки, как вы делаете в своем примере кода.Вам не нужно прослушивать события из DirectUploadController, поскольку вы можете определить, когда событие будет отправлено.

Чтобы сделать что-то, где вы ожидаете события direct-upload:start и direct-upload:end, измените кодна что-то вроде:

dropzone.on("addedfile", function (file) {
    const upload = new ActiveStorage.DirectUpload(file, url);

    console.log("direct-upload:start") 

    upload.create((error, blob) => {
        if(error) {
            console.log("direct-upload:error") 
            return;
        }
    }

    console.log("direct-upload:end")
}