В чем причина ошибок «Не удается проверить подлинность токена CSRF» и «422» при загрузке изображения с помощью dropzone JS?

Месяцами работаю над приложением, в котором несколько моделей принимают загрузку изображений с помощью dropzone JS с использованием ActiveStorage, и ни с того ни с сего я больше не могу загружать изображения с помощью dropzone. Единственное, что я знаю, что я изменил в приложении, это изменил механизм просмотра с ERB на HAML. Может ли это вызвать проблему.?

Я часами искал решение, но ничего не работает. Вот ошибка приложения, когда я пытаюсь загрузить изображение.

Error creating Blob for "image_name.jpg". Status: 422

А вот лог терминала:

Started GET "/rails/active_storage/disk/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDVG9JYTJWNVNTSWhkemx3TjNKMU5teDNhRzQxYzI1bU9YWnBZM1ZzTVRCMk1ua3hOUVk2QmtWVU9oQmthWE53YjNOcGRHbHZia2tpQVl4cGJteHBibVU3SUdacGJHVnVZVzFsUFNJeU1ESXdNRFV3TmpFNE1URXhPUzA1TW1NNU9HRmpaV1ExTW1SaE56UXlZelkyWldWbU4yUTFZMlV6TkdabU55NXFjR2NpT3lCbWFXeGxibUZ0WlNvOVZWUkdMVGduSnpJd01qQXdOVEEyTVRneE1URTVMVGt5WXprNFlXTmxaRFV5WkdFM05ESmpOalpsWldZM1pEVmpaVE0wWm1ZM0xtcHdad1k3QmxRNkVXTnZiblJsYm5SZmRIbHdaVWtpRDJsdFlXZGxMMnB3WldjR093WlVPaEZ6WlhKMmFXTmxYMjVoYldVNkNteHZZMkZzIiwiZXhwIjoiMjAyMS0wMy0yNlQxOTo1Nzo0MS4yMDRaIiwicHVyIjoiYmxvYl9rZXkifX0=--45a242e52828942cb9933781663d53482286244d/20200506181119-92c98aced52da742c66eef7d5ce34ff7.jpg" for ::1 at 2021-03-26 23:52:42 +0400


Processing by ActiveStorage::DiskController#show as JPEG
Parameters: {"encoded_key"=>"[FILTERED]", "filename"=>"20200506181119-92c98aced52da742c66eef7d5ce34ff7"}
Completed 200 OK in 1ms (ActiveRecord: 0.0ms | Allocations: 471)

Started POST "/rails/active_storage/direct_uploads" for ::1 at 2021-03-27 05:21:48 +0400
Processing by ActiveStorage::DirectUploadsController#create as JSON
Parameters: {"blob"=>{"filename"=>"88a04c2e5f589fcebda2641d00b8427f.jpg", "content_type"=>"image/jpeg", "byte_size"=>511762, "checksum"=>"y/nNLQR9mGaB5haUie2M5Q=="}, "direct_upload"=>{"blob"=>{"filename"=>"88a04c2e5f589fcebda2641d00b8427f.jpg", "content_type"=>"image/jpeg", "byte_size"=>511762, "checksum"=>"y/nNLQR9mGaB5haUie2M5Q=="}}}


Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 2ms (ActiveRecord: 0.0ms | Allocations: 1029)


ActionController::InvalidAuthenticityToken - ActionController::InvalidAuthenticityToken:

Я использую Rails6 и ruby ​​3. На этом этапе API вызова не задействован. Я заметил, что загрузка изображений с помощью dropzone JS вызывает эту проблему. И загрузка без dropzone JS работает нормально. Что может быть причиной?

Вот консольная ошибка:

dropzone.js:8185 Uncaught TypeError: Cannot read property 'apply' of undefined
        at Dropzone.emit (dropzone.js:8185)
        at dropzone.js:10197
        at dropzone.js:10423
        at loadExif (dropzone.js:10346)
        at HTMLImageElement.img.onload (dropzone.js:10357)
    emit @ dropzone.js:8185
    (anonymous) @ dropzone.js:10197
    (anonymous) @ dropzone.js:10423
    loadExif @ dropzone.js:10346
    img.onload @ dropzone.js:10357
    load (async)
    createThumbnailFromUrl @ dropzone.js:10344
    fileReader.onload @ dropzone.js:10294
    load (async)
    createThumbnail @ dropzone.js:10283
    _processThumbnailQueue @ dropzone.js:10196
    (anonymous) @ dropzone.js:10179
    setTimeout (async)
    _enqueueThumbnail @ dropzone.js:10178
    addFile @ dropzone.js:10113
    (anonymous) @ dropzone.js:9533
    activestorage.js:739 POST 

http://localhost:5000/rails/active_storage/direct_uploads 422 (Unprocessable Entity)
    create @ activestorage.js:739
    (anonymous) @ activestorage.js:873
    fileReaderDidLoad @ activestorage.js:620
    (anonymous) @ activestorage.js:605
    load (async)
    create @ activestorage.js:604
    create @ activestorage.js:584
    create @ activestorage.js:865
    start @ dropzone_controller.js:93
    (anonymous) @ dropzone_controller.js:31
    setTimeout (async)
    (anonymous) @ dropzone_controller.js:30
    emit @ dropzone.js:8185
    addFile @ dropzone.js:10111
    (anonymous) @ dropzone.js:9533

ОБНОВЛЕНИЕ

Вот мой файл dropzone_controller.js со стимулом

import { Controller } from "stimulus";
import Dropzone from "dropzone";
import "dropzone/dist/min/dropzone.min.css";
import "dropzone/dist/min/basic.min.css";
import { DirectUpload } from "@rails/activestorage";

export default class extends Controller {
    static targets = ["input"];

    connect() {
        Dropzone.autoDiscover = false;
        this.inputTarget.disable = true;
        this.inputTarget.style.display = "none";
        const dropzone = new Dropzone(this.element, {
            url: "/",
            maxFiles: "10",
            maxFilesize: "10",
        });


        dropzone.on("addedfile", (file) => {
            setTimeout(() => {
                if (file.accepted) {
                    const upload = new DirectUpload(file, this.url);
                    upload.create((error, attributes) => {
                        this.hiddenInput = document.createElement("input");
                        this.hiddenInput.type = "hidden";
                        this.hiddenInput.name = this.inputTarget.name;
                        this.hiddenInput.value = attributes.signed_id; << error here
                        this.inputTarget.parentNode.insertBefore(
                            this.hiddenInput,
                            this.inputTarget.nextSibling
                        );
                        dropzone.emit("success", file);
                        dropzone.emit("complete", file);
                    });
                }
            }, 500);
        });
    }

    get url() {
        return this.inputTarget.getAttribute("data-direct-upload-url");
    }
}

Когда я пытаюсь загрузить изображение, появляется ошибка, связанная с блобом. Uncaught TypeError: can't access property "signed_id", blob is undefined