Uncaught TypeError: Cannot read property 'signed_id' of undefined
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")