Upload File to S3 bucket - vue-upload-component

Question

I am trying to upload file to AWS S3 bucket using the vue-upload-component. I have a web api set up which returns a pre-signed url with the relevant details. I am having a hard time getting this set up to work. The documentation says that the url should be supplied as a props to the file upload component like so -

:put-action="signedUrl" //local variable which is set to the url returned from the url

I am firing the web api call once the file passes the inputFilter filter criteria which in my case just checks for a text file extention. I am able to get the correct signed url which even works when I put the url as the value for the put-action props like so -

put-action="https://s3.amazonaws.com/...."

However, when trying to set it dynamically, the start upload status says - No action configured which is odd as I am sure the variable is being set after the promise is returned from the API.

So, it seems that the component is not accepting the new value.

I have tried to set the props after the promise is returned as suggested here and even tried to re render the upload component after promise is returned as suggested here but still I am getting the same message.

What might be wrong with my approach.

Answer 1

Managed to get this working by setting the file level property putAction like below -

methods: {    
inputFilter(newFile, oldFile, prevent) {
  if (newFile && !oldFile) {                
    if (doesNotPassTheFilter) {
      return prevent();
    }
    else {
      return this.$store.dispatch('getSignedUrl').then((url) => {            
        newFile.putAction = url;
      });
    }
  }
}