• Home

  • Episodes

  • About

  • Login
    •

    Jamie Crone PRO
    Joined 7/29/2020
    Jamie Crone PRO said almost 3 years ago on StimulusJS, Active Storage and DropzoneJS :
    This is great! I do have an issue in production. I think it might be where I ran  yarn add dropzone. I am using an Ubuntu server on DigitalOcean. My dev environment is all Ubuntu. I ran yarn add dropzone in my root directory for the app, installed but same result as below. Then I ran it in my root directory and had the same result below. Then I tried to run it in my myapp/current directory. Maybe its something else. Just looking for some ideas to try
    0 0 0
    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 
    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 
    0 0 0
    Jamie Crone PRO said almost 3 years ago on StimulusJS, Active Storage and DropzoneJS :
     ☒ Thanks! The CORS solved the issue of it uploading, but the animation upload still is not working. Works in dev but not once I upload it, not really sure why maybe i am missing a library in staging? Ill keep messing around see if I can figure it out. If you have any suggestions let me know. No console errors either

    Here is the staging site



    Here is dev environment
    0 0 0
    Jamie Crone PRO said almost 3 years ago on StimulusJS, Active Storage and DropzoneJS :
    Figured out my issue, I was using Tailwind CSS and it was purging the unused style sheets and for some reason dropzone was added to that
    0 0 0