Uncaught TypeError: Cannot read property 'signed_id' of undefined

Console errors...

Network error shows it AJAX call issues...

And here is what triggered the issue.

And here how dropzone area looks like.

10:34:19 web.1     | Started POST "/rails/active_storage/direct_uploads" for ::1 at 2021-03-27 10:34:19 +0400
10:34:20 web.1     | Processing by ActiveStorage::DirectUploadsController#create as JSON
10:34:20 web.1     |   Parameters: {"blob"=>{"filename"=>"Screen Shot 2021-03-26 at 21.24.18 (2).png", "content_type"=>"image/png", "byte_size"=>2957763, "checksum"=>"knBZupa2TdcuU831UUgj+A=="}, "direct_upload"=>{"blob"=>{"filename"=>"Screen Shot 2021-03-26 at 21.24.18 (2).png", "content_type"=>"image/png", "byte_size"=>2957763, "checksum"=>"knBZupa2TdcuU831UUgj+A=="}}}
10:34:20 web.1     | Can't verify CSRF token authenticity.
10:34:20 web.1     | Completed 422 Unprocessable Entity in 2ms (ActiveRecord: 0.0ms | Allocations: 1024)
10:34:20 web.1     |
10:34:20 web.1     |
10:34:20 web.1     |
10:34:20 web.1     | ActionController::InvalidAuthenticityToken - ActionController::InvalidAuthenticityToken:
10:34:20 web.1     |

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))

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.autoDisc  = false;
        this.inputTarget.disable = true;
        this.inputTarget.style.display = "none";
        const dropzone = new Dropzone(this.element, {
            url: "/",
            maxFiles: "10",
            maxFilesize: "10",
            autoQueue: false,
        });
        dropzone.on("addedfile", (file) => {
            setTimeout(() => {
                if (file.accepted) {
                    const upload = new DirectUpload(file, this.url);
                    upload.create((error, blob) => {
                        this.hiddenInput = document.createElement("input");
                        this.hiddenInput.type = "hidden";
                        this.hiddenInput.name = this.inputTarget.name;
                        this.hiddenInput.value = blob.signed_id;
                        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");
    }}

= form_with(model: guest, multipart: true, local: true, id:"new_gues") do |form|

.dropzone.dropzone-default.dz-clickable{"data-controller" => "dropzone", "data-dropzone-max-file-size" => "2", "data-dropzone-max-files" => "1"}          
  = form.file_field :avatar, direct_upload: true, class: 'form-input py-10', accept: 'image/png, image/jpeg, image/gif, image/tiff', size_limit: 2_000_000, data: { target: 'dropzone.input' }          
  .text-gray-600.dropzone-msg.dz-message.needsclick         
    %h3.text-base.font-bold.dropzone-msg-title Drag or click to upload your Company logo
      %span.text-xs.dropzone-msg-desc 
        Choose a square image with a solid background colour of at least 100x100px.
      - if @guest.avatar.attached?              
        = image_tag(@guest.avatar, class: "rounded-full h-20 w-20 mx-auto mt-2")