How to upload to S3 after getting the signed Url from the backend?

[harishankards]

Hi,
In my project, I'm using nodejs for backend API and vue for the frontend. I'm using this vue-dropzone in my project.

So, when a file is successfully uploaded into the frontend, I'm taking the filename and type to the backend to create a signedUrl to upload the files in AWS S3. Please refer to the code below.

dropzoneOptions: {
          url: 'http://localhost:3000/attachments', //I'm sending the req to my backend to get the signedUrl
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { 'Authorization': 'Bearer ' + this.token },
          addRemoveLinks: true,
          dictDefaultMessage: "<i class='fa fa-cloud-upload'></i>UPLOAD ME"
        }

and the success function

vsuccess (file, response) {
        console.log('it is success', file, response) // this response has the signedUrl from my backend       
      }

Now, that I have the signedUrl here, how do I send the file to the S3?

In the example provided by you here, the signedURL seemed to be put in a hardcoded way.
But, I'm doing in a dynamic way. So, how do I achieve that?

Thanks in advance.

[vrajroham]

Hi @harishankards ,

The signedURL seemed to be put in a hardcoded way

The signed URL you found documentation page is sample response and that too is generated dynamically using this php script.

---

I'm doing in a dynamic way. So, how do I achieve that?

As per my understating, You are getting signed url from server endpoint http://localhost:3000/attachments and you want to upload your file to AWS S3 using that pre-signed url. right?

You need to add additional prop awss3 to dropzone as below,

<vue-dropzone 
      :awss3="awss3"
      v-on:vdropzone-s3-upload-error="s3UploadError"
      v-on:vdropzone-s3-upload-success="s3UploadSuccess">
</vue-dropzone>

Add awss3 prop with dropzoneOptions as below,

dropzoneOptions: {
      url: 'http://localhost:3000/file-upload', // File upload endpoint, not signed url endpoint
      thumbnailWidth: 150,
      maxFilesize: 0.5,
      headers: { 'Authorization': 'Bearer ' + this.token },
      addRemoveLinks: true,
      dictDefaultMessage: "<i class='fa fa-cloud-upload'></i>UPLOAD ME"
},
awss3: {
      signingURL: 'http://localhost:3000/attachments', //Where you will get signed url
      headers: {},
      params : {},
      sendFileToServer : true //If you want to upload file to your server along with s3
}

Hope this helps you.

[harishankards]

Hi @vrajroham,

Thanks for the response.

I tried the same way as you mentioned:

dropzoneOptions: {
          url: 'http://localhost:3000/attachments',
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { 'Authorization': 'Bearer ' + this.token },
          addRemoveLinks: true,
          dictDefaultMessage: "<i class='fa fa-cloud-upload'></i>UPLOAD ME"
        },
        awss3: {
          signingURL: 'http://localhost:3000/attachments', // Where you will get signed url
          headers: { 'Authorization': 'Bearer ' + this.token },
          params: {},
          sendFileToServer: false // If you want to upload file to your server along with s3
        }

and the my backend server sent this as response:

{ method: 'PUT',
  key: 'images/my_image.jpg',
  url: 'https://student-burger.s3.amazonaws.com/images/my_image.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAITZKxxxxHPB7M4UA%2F20180514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180xxx14T100307Z&X-Amz-Expires=86400&X-Amz-Signature=e07717679ee7xxxxxxxx6b366a9812a53e635f5&X-Amz-SignedHeaders=host' }

But, nothing happened in the frontend. So, I checked the console, it is displaying this error

Uncaught TypeError: Cannot convert undefined or null to object

at vue2Dropzone.js?2af3:1.

Also, I want to send the filename to my backend for signing URL. How do I get those?

[vrajroham]

@harishankards I got it. I think you should read the documentation completly.

Uncaught TypeError: Cannot convert undefined or null to object

Your response is in invalid format. Your endpoint should return signature object exactly as mentioned in docs. Currently, it's returning all values appended to URL.

Your response should be like as below, More info here

{
   "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":"images/my_image.jpg"
   },
   "postEndpoint":"\/\/student-burger.s3.amazonaws.com\/images"
}

---

Also, I want to send the filename to my backend for signing URL. How do I get those?

Already note about this is provided in docs.

Firstly, your file is uploaded to S3 then request is sent to your server with file as expected behaviour. But extra field to your request will be added as s3ObjectLocation containing location of your S3 object/file, which you may require to store in database.

[harishankards]

Hi @vrajroham,

Got it. Thanks for the explanation. Now I'm able to solve the previous issue, and got up with another one now.

{
"signature": {
"Content-Type":"",
"acl":"public-read-write",
"success_action_status":"201",
"policy":"Policy1xxxxx45161391",
"X-Amz-Algorithm":"AWS4-HMAC-SHA256",
"X-Amz-Credential":"AKxxTZKxxxxxxB7M4UA%2F20180514%2Fus-east-1%2Fs3%2Faws4_request",
"X-Amz-Date":"20180514T130047Z",
"X-Amz-Expires":"86400",
"X-Amz-Signature":"25cadc433cxxxxxxxxbdde29e0ea8ec150134bba753b1e568822696094a8c82c58",
"X-Amz-SignedHeaders":"host",
"key":""
},
"postEndPoint":"//student-burger.s3.amazonaws.com/images"
}

The above is the one I'm sending from backend. Now, the error I'm getting is:
POST http://localhost:8080/student/projects/undefined 404 (Not Found) at dropzone.js?a0b9:2777.

Not sure, why it is coming. But this error where I'm receiving in the page has the route http://localhost:8080/student/projects/new.

[vrajroham]

• What is your url in dropzoneOptions?
• Are your files getting uploaded to S3? (Check network tab)

[harishankards]

@vrajroham ,

This is my dropzoneOptions :

dropzoneOptions: {
          url: 'http://localhost:3000/attachments',
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { 'Authorization': 'Bearer ' + this.token },
          addRemoveLinks: true,
          dictDefaultMessage: "<i class='fa fa-cloud-upload'></i>UPLOAD ME"
        }

Nope. My files are not getting uploaded to S3. No sign of that post/put request to S3 in networks tab.

[vrajroham]

Share your complete component and js code.

[abdulbasith7145]

@vrajroham
I'm encountering an issue similar to this, can you please check this issue #328

[vrajroham]

@abdulbasith7145 Will check it.

[harishankards]

Sure @vrajroham, Please have a look below.

<template>
  <vue-dropzone ref="myVueDropzone" :destroyDropzone="false" 
    @vdropzone-success="vsuccess" @vdropzone-removed-file="vremoved"
    id="dropzone" :options="dropzoneOptions"
    :awss3="awss3"
    v-on:vdropzone-s3-upload-error="s3UploadError"
    v-on:vdropzone-s3-upload-success="s3UploadSuccess">
  </vue-dropzone>
</template>

<script>
  import vue2Dropzone from 'vue2-dropzone'
  import 'vue2-dropzone/dist/vue2Dropzone.css'
  import { eventBus } from '../../main.js'

  export default {
    name: 'upload',
    components: {
      vueDropzone: vue2Dropzone
    },
    data: function () {
      return {
        token: this.$ls.get('token'),
        dropzoneOptions: {
          url: 'http://localhost:3000/attachments',
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { 'Authorization': 'Bearer ' + this.token },
          addRemoveLinks: true,
          dictDefaultMessage: "<i class='fa fa-cloud-upload'></i>UPLOAD ME"
        },
        awss3: {
          signingURL: 'http://localhost:3000/attachments/signedUrlPut', // Where you will get signed url
          headers: { 'Authorization': 'Bearer ' + this.token },
          params: {},
          sendFileToServer: false 
        }
      }
    },
    methods: {
      vsuccess (file, response) {
        this.$store.state.projectUploadedFile.push({
          filename: file.name,
          signedUrl: response.url
        })
        eventBus.$emit('uploadedFile', {
          projectUploadedFiles: this.$store.state.projectUploadedFile
        })
      },
      vremoved (file, error, xhr) {
        const filename = file.name
        const signedUrl = this.$store.state.projectUploadedFile.map(item => {
          if (item.filename === filename) {
            const index = this.$store.state.projectUploadedFile.indexOf(item)
            this.$store.state.projectUploadedFile.splice(index, 1)
            return item.signedUrl
          }
        })
        this.$http({
          method: 'delete',
          url: '/attachments',
          data: {
            filepath: filepath
          },
          headers: {
            'Authorization': 'Bearer ' + this.token
          }
        })
        .then(function (attachmentDeleted) {
          console.log('attachment deleted', attachmentDeleted)
        })
        .catch(function (attachmentDeleteErr) {
          console.log('unable to delete attachment', attachmentDeleteErr)
        })
      },
      s3UploadError () {
        console.log('s3UploadError')
      },
      s3UploadSuccess () {
        console.log('s3UploadSuccess')
      }
    },
    created () {
      this.$store.state.projectUploadedFile = []
    }
  }
</script>

So, this is my component and I'm importing this component to the other components wherever needed.

[vrajroham]

@harishankards Just to test, please do following steps and provide the outcome.

• Visit https://rowanwins.github.io/vue-dropzone/docs/dist/#/aws-s3-upload
• Select any image/file.
• Enter your signing URL http://localhost:3000/attachments/signedUrlPut in textbox (Whitelist this endpoint so, Authorization token will not be required for time being)
• Monitor your console and network tab and click upload button.

Let me know the outcome.

[harishankards]

Hi @vrajroham,
I got two errors in the console itself.

1. POST https://rowanwins.github.io/vue-dropzone/docs/dist/undefined 502 () at urlsigner.js:82
2. Network Error : Could not send request to AWS. (Maybe CORS error) at bundle.3fb36dea395ce2168db7.js:1805
   I doubt why CORS is happening as it has the signed URL with it.

[harishankards]

Hi @vrajroham,

Just wanted to check whether do I have got any updates.

Looking forward