Jamie Crone
PRO
said almost 3 years ago
on
StimulusJS, Active Storage and DropzoneJS
:
☒ Thanks for replying! I do have 3 errors pop up on the console, first one being
Maybe this is the issue or a separate one. The second one is
The error above comes from the this.hiddenInput.value = blob.signed_id below
The last error is because the of the error above which just doesn't create
When I don't use dropzone I don't have this issue uploading files or avatars
Access to XMLHttpRequest at 'https://uatmyskiswap.sfo3.digitaloceanspaces.com/mtn1067cgyun59enm7tg5pepje…Signature=9a216bd…' from origin 'http://uat.myskiswap.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Maybe this is the issue or a separate one. The second one is
dropzone_controller.js:29 Uncaught TypeError: Cannot read property 'signed_id' of undefined
at dropzone_controller.js:29
at e.callback (activestorage.js:879)
at e.value (activestorage.js:841)
at XMLHttpRequest.<anonymous> (activestorage.js:815)The error above comes from the this.hiddenInput.value = blob.signed_id below
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)The last error is because the of the error above which just doesn't create
activestorage.js:823 PUT https://uatmyskiswap.sfo3.digitaloceanspaces.com/mtn1067cgyun59enm7tg5pepje…Signature=9a216bd… net::ERR_FAILED
When I don't use dropzone I don't have this issue uploading files or avatars