AhmedNadar PRO
Joined 1/22/2017
AhmedNadar PRO said over 3 years ago on StimulusJS, Active Storage and DropzoneJS :
Hi David,
Thanks for your videos 😀

While I'm trying your example, I got an error:
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.


Any idea what could cause such error?
Thanks...

AhmedNadar PRO said over 3 years ago on StimulusJS, Active Storage and DropzoneJS :
Here is rails log on upload an image attempt  

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     |


AhmedNadar PRO said over 3 years ago on StimulusJS, Active Storage and DropzoneJS :
controllers/index.js
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))

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.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|

avatar file field in form.html.haml
.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")

The strange thing is, I this app was working fine for weeks, and after switched from ERB to HAML, that happened.
Also, I have User model by devise, where uploading avatar works very well as you expect it, where I don't use dropdown JS or any JavaScript library!!!

AhmedNadar PRO said over 3 years ago on StimulusJS, Active Storage and DropzoneJS :
I tried using ERB but no luck.
How would I use direct upload instead of file_field?

AhmedNadar PRO said over 3 years ago on StimulusJS, Active Storage and DropzoneJS :
I'm still in development stage, so I'm using local. Haven't user other services yet.