1

I want to use it in VueJS as below code via the URL of a file that is made public in AWS S3 or Google Drive.

...
const file = AWS S3 or Google Drive File URL
...

How can this be done?

kycle le
  • 43
  • 2
  • 6
  • We need more information. How exactly does AWS/Google provide the file? Is it an API endpoint, which sends the file content? Is the file content displayed, when visiting the URL? – Geshode Sep 17 '19 at 02:40
  • Not the path I get through Axios etc. It's simply a static URL like this: ex) https://test.s3.ap-northeast-2.amazonaws.com/event/file – kycle le Sep 17 '19 at 02:43
  • try `window.open(the_url)`. If using AWS you need to make sure the `ResponseContentDisposition` header is present – Helder Lucas Sep 17 '19 at 20:08

1 Answers1

2

You need to make a Blob.

const response = await this.$axios.get(`documents?s3-key=${s3Key}`)
const awsS3Response = await axios.get(response.data, { responseType: 'blob' })
const blob = new Blob([awsS3Response.data])
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = s3Key
link.click()
URL.revokeObjectURL(link.href)

response.data is a signed url

This is how I created the signed url in my API.

const s3 = new AWS.S3({ apiVersion: '2006-03-01' })

async function getDocument({ s3Key }) {
  return s3.getSignedUrl('getObject', {
    Bucket: 'lqdc2documents',
    Key: s3Key,
    Expires: 60,
  })
}
BamBam22
  • 582
  • 10
  • 19