ActiveStorage and direct uploads won't work in development











up vote
0
down vote

favorite












I'm experimenting with ActiveStorage, because I want to create a Rails app where the user can upload directly to DigitalOcean spaces.



However, I have already run into a CSRF problem.



I have declared digital ocean in my storage.yml:



do:
service: S3
access_key_id: this_is_a_secret
secret_access_key: this_is_also_a_secret
region: ams3
bucket: this_is_also_a_secret
endpoint: 'https://this_is_also_a_secret.ams3.digitaloceanspaces.com'


I have chosen that storage service in my development.rb



config.active_storage.service = :do


and I have added the aws gem to Gemfile



gem "aws-sdk-s3", require: false


I have required activestorage in my javascript bundle.



and I have added the following to my view for testing:



= form_for(VideoUpload.first, url: "/") do |form|
div = form.file_field :file, direct_upload: true
div = form.submit("Send that file")


When I submit the form, the activestorage.js library kicks in. It calls http://127.0.0.1:3000/rails/active_storage/direct_uploads which in turns throws a 422 due to a missing CSRF token. I have inspected the request and the controller is not wrong. There is no CSRF token set in the HTTP headers, X-CSRF-Token is oddly set to undefined.



The request body contains: {"blob":{"filename":"9T6qqsA-png-wallpapers.jpg","content_type":"image/jpeg","byte_size":122990,"checksum":"gqU9VBgS9mmH7s45qHIbug=="}}, so no CSRF token here either.



But the form in which the input file element is specified contains a token, so I would assume that activestorage.js would pick it up.





What am I missing here? The documentation at https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads doesn't imply that any special configuration in the JS side is necessary.



I am using Rails 5.2.1 and Ruby 2.5.1










share|improve this question


























    up vote
    0
    down vote

    favorite












    I'm experimenting with ActiveStorage, because I want to create a Rails app where the user can upload directly to DigitalOcean spaces.



    However, I have already run into a CSRF problem.



    I have declared digital ocean in my storage.yml:



    do:
    service: S3
    access_key_id: this_is_a_secret
    secret_access_key: this_is_also_a_secret
    region: ams3
    bucket: this_is_also_a_secret
    endpoint: 'https://this_is_also_a_secret.ams3.digitaloceanspaces.com'


    I have chosen that storage service in my development.rb



    config.active_storage.service = :do


    and I have added the aws gem to Gemfile



    gem "aws-sdk-s3", require: false


    I have required activestorage in my javascript bundle.



    and I have added the following to my view for testing:



    = form_for(VideoUpload.first, url: "/") do |form|
    div = form.file_field :file, direct_upload: true
    div = form.submit("Send that file")


    When I submit the form, the activestorage.js library kicks in. It calls http://127.0.0.1:3000/rails/active_storage/direct_uploads which in turns throws a 422 due to a missing CSRF token. I have inspected the request and the controller is not wrong. There is no CSRF token set in the HTTP headers, X-CSRF-Token is oddly set to undefined.



    The request body contains: {"blob":{"filename":"9T6qqsA-png-wallpapers.jpg","content_type":"image/jpeg","byte_size":122990,"checksum":"gqU9VBgS9mmH7s45qHIbug=="}}, so no CSRF token here either.



    But the form in which the input file element is specified contains a token, so I would assume that activestorage.js would pick it up.





    What am I missing here? The documentation at https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads doesn't imply that any special configuration in the JS side is necessary.



    I am using Rails 5.2.1 and Ruby 2.5.1










    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I'm experimenting with ActiveStorage, because I want to create a Rails app where the user can upload directly to DigitalOcean spaces.



      However, I have already run into a CSRF problem.



      I have declared digital ocean in my storage.yml:



      do:
      service: S3
      access_key_id: this_is_a_secret
      secret_access_key: this_is_also_a_secret
      region: ams3
      bucket: this_is_also_a_secret
      endpoint: 'https://this_is_also_a_secret.ams3.digitaloceanspaces.com'


      I have chosen that storage service in my development.rb



      config.active_storage.service = :do


      and I have added the aws gem to Gemfile



      gem "aws-sdk-s3", require: false


      I have required activestorage in my javascript bundle.



      and I have added the following to my view for testing:



      = form_for(VideoUpload.first, url: "/") do |form|
      div = form.file_field :file, direct_upload: true
      div = form.submit("Send that file")


      When I submit the form, the activestorage.js library kicks in. It calls http://127.0.0.1:3000/rails/active_storage/direct_uploads which in turns throws a 422 due to a missing CSRF token. I have inspected the request and the controller is not wrong. There is no CSRF token set in the HTTP headers, X-CSRF-Token is oddly set to undefined.



      The request body contains: {"blob":{"filename":"9T6qqsA-png-wallpapers.jpg","content_type":"image/jpeg","byte_size":122990,"checksum":"gqU9VBgS9mmH7s45qHIbug=="}}, so no CSRF token here either.



      But the form in which the input file element is specified contains a token, so I would assume that activestorage.js would pick it up.





      What am I missing here? The documentation at https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads doesn't imply that any special configuration in the JS side is necessary.



      I am using Rails 5.2.1 and Ruby 2.5.1










      share|improve this question













      I'm experimenting with ActiveStorage, because I want to create a Rails app where the user can upload directly to DigitalOcean spaces.



      However, I have already run into a CSRF problem.



      I have declared digital ocean in my storage.yml:



      do:
      service: S3
      access_key_id: this_is_a_secret
      secret_access_key: this_is_also_a_secret
      region: ams3
      bucket: this_is_also_a_secret
      endpoint: 'https://this_is_also_a_secret.ams3.digitaloceanspaces.com'


      I have chosen that storage service in my development.rb



      config.active_storage.service = :do


      and I have added the aws gem to Gemfile



      gem "aws-sdk-s3", require: false


      I have required activestorage in my javascript bundle.



      and I have added the following to my view for testing:



      = form_for(VideoUpload.first, url: "/") do |form|
      div = form.file_field :file, direct_upload: true
      div = form.submit("Send that file")


      When I submit the form, the activestorage.js library kicks in. It calls http://127.0.0.1:3000/rails/active_storage/direct_uploads which in turns throws a 422 due to a missing CSRF token. I have inspected the request and the controller is not wrong. There is no CSRF token set in the HTTP headers, X-CSRF-Token is oddly set to undefined.



      The request body contains: {"blob":{"filename":"9T6qqsA-png-wallpapers.jpg","content_type":"image/jpeg","byte_size":122990,"checksum":"gqU9VBgS9mmH7s45qHIbug=="}}, so no CSRF token here either.



      But the form in which the input file element is specified contains a token, so I would assume that activestorage.js would pick it up.





      What am I missing here? The documentation at https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads doesn't imply that any special configuration in the JS side is necessary.



      I am using Rails 5.2.1 and Ruby 2.5.1







      ruby-on-rails rails-activestorage






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 7 at 9:16









      Niels B.

      3,38111230




      3,38111230





























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53186471%2factivestorage-and-direct-uploads-wont-work-in-development%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53186471%2factivestorage-and-direct-uploads-wont-work-in-development%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()