I could not upload the file to Digital Ocean Spaces with this dropzone_controller. It was successful with other app with same credentials and via just a normal file_field.

thank you so much for your prompt response! 

These are my errors.

Thank you so much for your direction. Rails console is showing nothing wrong...

Started POST "/rails/active_storage/direct_uploads" for 127.0.0.1 at 2020-11-30 23:45:46 +0700

Processing by ActiveStorage::DirectUploadsController#create as JSON

  Parameters: {"blob"=>{"filename"=>"IMG_6766.JPG", "content_type"=>"image/jpeg", "byte_size"=>3809114, "checksum"=>"XXXXXXXXXXXXXXX"}, "direct_upload"=>{"blob"=>{"filename"=>"IMG_6766.JPG", "content_type"=>"image/jpeg", "byte_size"=>3809114, "checksum"=>"kJgGR4MU3XfpbzvoEZD83A=="}}}

   (18.0ms)  BEGIN

  ActiveStorage::Blob Create (21.2ms)  INSERT INTO "active_storage_blobs" ("key", "filename", "content_type", "byte_size", "checksum", "created_at") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"  [["key", "XXXXXXXXXXXX"], ["filename", "IMG_6766.JPG"], ["content_type", "image/jpeg"], ["byte_size", 3809114], ["checksum", "kJgGR4MU3XfpbzvoEZD83A=="], ["created_at", "2020-11-30 16:45:46.410051"]]

   (2.9ms)  COMMIT

  S3 Storage (5.8ms) Generated URL for file at key: XXXXXXXXXX (https://XXXXXXXX.sfo2.digitaloceanspaces.com/x5e5iv60zg38xhzzbhitpxywvsfn?X-Amz-Algorithm=AWS4-HMAC-XXXXX&X-Amz-Credential=XXXXXXXXXXXXXX%2F20201130%2Fsfo2%2Fs3%2Faws4_request&X-Amz-Date=20201130T164546Z&X-Amz-Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent-md5%3Bcontent-type%3Bhost&X-Amz-Signature=XXXXXXXXXXXXXXXXXXXX)

Completed 200 OK in 70ms (Views: 1.1ms | ActiveRecord: 42.1ms | Allocations: 5741)

<Error>

<Code>AccessDenied</Code>

<RequestId>tx00000000000007a28c110-005fc523ec-249a80a-sfo2a</RequestId>

<HostId>249a80a-sfo2a-sfo</HostId>

</Error>

 
this.callback('Error storing "' + this.file.name + '". Status: ' + this.xhr.status);

var blob = new BlobRecord(_this.file, checksum, _this.url);
          notify(_this.delegate, "directUploadWillCreateBlobWithXHR", blob.xhr);
          blob.create(function (error) {
            if (error) {
              callback(error);

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 ApplicationController {
static targets = ["input"]

connect() {
Dropzone.autoDiscover = false
this.inputTarget.disable = false
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')
  }
}

I'm so sorry but how do you do that?