Agfdhyk

I am able to upload to Google cloud storage directly using the below form submission ( after getting signed URL using Nodejs )

<form action="https://<%=fields.bucket%>.storage.googleapis.com" method="post" enctype="multipart/form-data">

    <input type="hidden" name="key" value="<%=fields.key%>">

    <input type="hidden" name="bucket" value="<%=fields.bucket%>">

    <input type="hidden" name="GoogleAccessId" value="<%=fields.GoogleAccessId%>">

    <input type="hidden" name="policy" value="<%=fields.policy%>">

    <input type="hidden" name="signature" value="<%=fields.signature%>">

    <input type="hidden" name="Content-Type" value="<%=fields['Content-Type']%>">



    <input name="file" type="file">

    <input type="submit" onclick="myFunction(event)" value="Upload">

</form>

But when using dropzone using the below approach I am getting 400 error . I got my Signed URL successfully and no issues with it . The issue is with axios post method .

 uploadOptions: {

    url: "/",

    uploadMultiple: false,

    method: "PUT",

    parallelUploads: 1,

    headers: {

              "Content-Type": "multipart/form-data"

            },

    autoProcessQueue: false,

    autoDiscover: false,

    acceptedFiles: "image/*",

    maxFilesize: 5,

    maxFiles: 10,

    clickable: "#upload",

    addRemoveLinks: true,

    preventDuplicates: true,

    dictDuplicateFile: "Duplicate Files Cannot Be Uploaded",

    previewsContainer: ".dropzone-previews",

    dictDefaultMessage: "",

    thumbnailWidth: 200,

     accept: function(file, done) {

      var self = this;





      var FileSize = file.size;

      console.log(" In accept");



      k1Object.$axios

        .$get("my-board?operation=fileUpload&name=" + file.name)

        .then(function(gcmData) {

          let postData = gcmData[1];

          let actionURL =

            "https://" + postData.bucket + ".storage.googleapis.com";

          file.uploadURL = actionURL;

          k1Object.k1FormData = gcmData[1];

                    done();

          setTimeout(function() {

          self.processFile(file);

          }, 0)

        });





    }, 

     init: function() {

      var self = this;

      this.on("processing", function(file) {

        self.options.url = file.uploadURL;

        console.log("processing");

      });

      this.on("sending", function(file, xhr, formData) {

        console.log(k1Object.k1FormData.key)

        formData.append("key", k1Object.k1FormData.key);

        formData.append("bucket", k1Object.k1FormData.bucket);

        formData.append("GoogleAccessId", k1Object.k1FormData.GoogleAccessId);

        formData.append("policy", k1Object.k1FormData.policy);

        formData.append("signature", k1Object.k1FormData.signature);

        formData.append("Content-Type", k1Object.k1FormData["Content-Type"]);



         var _send = xhr.send;

        xhr.send = function() {

          _send.call(xhr, file);

        }; 

      });

    } 

  }

400 error

<?xml version='1.0' encoding='UTF-8'?><Error><Code>MissingSecurityHeader</Code><Message>Your request was missing a required header.</Message><Details>Authorization</Details></Error>

I am not sure what fields it is expecting , I did even setup CORS rules for my bucket . Thank You .

This post helped me to resolve my issue . Basically what was wrong is that my file input was the first child of the form instead of at the end. Please see the below stackoverflow link for full answer .

https://stackoverflow.com/a/17524079/274715 .

I am still not sure why moving the file to the end helped me .