"Direct upload to s3" description is not sufficient.

[abdulbasith7145]

I have included vur-dropezone in my app. and written a service in node.js to return the required signature to upload the file to s3 directly from the browser.

here is my html code

<vue-dropzone 
      :awss3="awss3" style="width:100%;" ref="myVueDropzone" id="dropzone"
      v-on:vdropzone-s3-upload-error="s3UploadError"
      v-on:vdropzone-s3-upload-success="s3UploadSuccess" :options="dropzoneOptions"
      >
    </vue-dropzone>

and

    dropzoneOptions: {
          url: "http://localhost:3000/getPostSignature",
          thumbnailWidth: 300,
          maxFilesize: 0.5,
          dictDefaultMessage :"<i class='material-icons'  style='font-size: 50px;'>backup</i><br>Upload",
          addRemoveLinks: true,
          headers: { "My-Awesome-Header": "header value" },
          uploadMultiple : false,
          maxFiles:1,
          acceptedFiles: 'image/*,application/pdf',
      },
      existingModelDetails : {},
       awss3: {
          signingURL: "http://localhost:3000/getSignedUrl",
          headers: {},
          params : {},
          sendFileToServer : false
        },

here i have given two urls,
first url:

url: http://localhost:3000/getPostSignature
purpose: for getting signature (required format for vue-dropezone)
response: given below

{
    "signature": {
        "Content-Type": "",
        "acl": "public-read-write",
        "success_action_status": "201",
        "policy": "eyJleHBpcmF0aW9uIjoiMjAxOC0wNS0xNVxxxxxxxxxxxxxxxxxxx3siYnVja2V0xxxxxxxxxxxxxxxxxxxxxYS5wbmcifSx7ImFjbCI6InB1YmxpYy1yZWFkLXdyaXRlIn0seyJzdWNjZXNzX2FjdGlvbl9zdGF0dXMiOiIyMDEifSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwwLDEwMDAwMDBdLHsieC1hbXotYWxnb3JpdGhtIjoiQVdxxxxxxxxxxxxxxxxxudGlhbCI6IkFLSUFJUldBUldQWFlCQlo0NVVRLzIwMTgwNTE1L3VzLXdlc3QtMi9zMy9hd3M0X3JlcXVxxxxxxxxxxxxxxxxxxxxxxMDAwMDBaIn1dfQ==",
        "X-amz-credential": "AKxxxxxxxxxxxxxXYBxx5UQ/20180515/us-west-2/s3/aws4_request",
        "X-amz-algorithm": "AWS4-HMAC-SHA256",
        "X-amz-date": "20180515T000000Z",
        "X-amz-signature": "a505bxxxxxxxxxxxxx6e720c08a187ff2b43440e8d292xxxxxxxxxxxf89fac064b7010e4662c92f96ad50763dfcbf6af4fc5cf8exxxxxxx0175bxxxxc553",
        "key": "a.png"
    },
    "postEndpoint": "https://s3.us-west-2.amazonaws.com/rcxx-xxtem-mxxing-fixxs/"
}

here i have some doubts,

• We need to assign value to "key" for creating a signature above(in my case, key is the file name), then how can i send the key value(file name ) from the front end ?
• Is my postEndpoint correct? i have given in a format s3-url/bucketname

Second URL:

url: http://localhost:3000/getSignedUrl
purpose: for getting a pre-signed url (which is created by aws-sdk)

Response:

https://rcmb-xxxxm-mxxing-fixxxs.s3.us-west-2.amazonaws.com/a.png?AWSAccessKeyId=AxxxxxxxxxxxZ4xxQ&Expires=1526375964&Signature=xxxxxxxxxxxxxHiqxxprGxxxx&x-amz-server-side-encryption=AES256
(its a pre-signed url with string type)

These are the setups that i made to achieve my requirement.But still I'm not able to upload the file to s3 bucket,

but I'm getting the below error while uploading the pic from the browser.

Uncaught SyntaxError: Unexpected token h in JSON at position 0
at JSON.parse ()
at XMLHttpRequest.r.onload

I'm i missing anything on my code? or is there any mistake in my code?
I'm still confused about the Urls and its responses.

[vrajroham]

We need to assign value to "key" for creating a signature above(in my case, key is the file name), then how can i send the key value(file name ) from the front end ?

For bove question checkout issue #299

---

https://rcmb-xxxxm-mxxing-fixxxs.s3.us-west-2.amazonaws.com/a.png?AWSAccessKeyId=AxxxxxxxxxxxZ4xxQ&Expires=1526375964&Signature=xxxxxxxxxxxxxHiqxxprGxxxx&x-amz-server-side-encryption=AES256
(its a pre-signed url with string type)

The response you are getting from url signer is invalid. Check this comment on #327 (comment)
Also, It is clearly mentioned in docs that response of url signer should be as below,

{
   "signature":{
      "Content-Type":"",
      "acl":"public-read-write",
      "success_action_status":"201",
      "policy":"abc123",
      "X-amz-credential":"AKIAIM3WELV3PLALOYDQ\/20171012\/us-west-2\/s3\/aws4_request",
      "X-amz-algorithm":"AWS4-HMAC-SHA256",
      "X-amz-date":"20171012T054729Z",
      "X-amz-signature":"5227d84360d92ef8al45549805b3746f2f1d6641df8986aamcr939c35513cd7c",
      "key":""
   },
   "postEndpoint":"\/\/s3-us-west-2.amazonaws.com\/my-bucket"
}

---

"Direct upload to s3" description is not sufficient.

As per the subject, what do you think, what should we improve? Your suggestions will be really helpful.

Thanks

[vrajroham]

You can suggest the changes by editing and sending PR from https://github.com/rowanwins/vue-dropzone/edit/master/docs/src/pages/UploadToAWSS3.vue