I have an vuejs app in html to upload files through an API (see html). Now, I want to use the data object name of the uploaded file (this.name = file.name) in a html href element a couple of seconds after the file is uploaded. I tried to appear these elements after a couple of seconds, but yielded no valid link:
<a :href="`https://***.s3.amazonaws.com/${name}.pdf`">Download</a>
and
<a :href="`https://***.s3.amazonaws.com/${data.name}.pdf`">Download</a>
How to get the name of the file in the download link?
const MAX_FILE_SIZE = 1000000
/* ENTER YOUR ENDPOINT HERE */
const API_ENDPOINT = 'https://**********.execute-api.us-east-1.amazonaws.com/uploads'
new Vue({
el: "#app",
data: {
file: '',
uploadURL: '',
name: ''
},
methods: {
onFileChange (e) {
let files = e.target.files || e.dataTransfer.files
if (!files.length) return
this.createFile(files[0])
},
createFile (file) {
let reader = new FileReader()
this.name = file.name
console.log(this.name)
reader.readAsText(file, 'UTF-8');
reader.onload = (e) => {
if (e.target.result.length > MAX_FILE_SIZE) {
return alert('File is loo large.')
}
this.file = e.target.result
}
},
removeFile: function (e) {
console.log('Remove clicked')
this.file = ''
},
uploadFile: async function (e) {
console.log('Upload clicked', this.name)
// Get the presigned URL
const response = await axios({
method: 'GET',
url: API_ENDPOINT+'?filename='+this.name
})
console.log('Response: ', response)
let blobData = new Blob([this.file], {type: 'text/csv'})
console.log('Uploading to: ', response.uploadURL)
const result = await fetch(response.uploadURL, {
method: 'PUT',
body: blobData
})
console.log('Result: ', result)
// Final URL for the user doesn't need the query string params
this.uploadURL = response.uploadURL.split('?')[0]
},
}
}) <div id="app">
<div v-if="!file">
<h4>Select a file</h4>
<input type="file" @change="onFileChange">
</div>
<div v-else>
<div>File loaded </div>
<button v-if="!uploadURL" @click="removeFile">Remove file</button>
<button v-if="!uploadURL" @click="uploadFile">Upload file</button>
</div>
<h2 v-if="uploadURL">Success! File uploaded to bucket.</h2>
<a :href="`https://bias-scan.s3.amazonaws.com/${name}.pdf`">Download bias scan report</a>
</div>
</div>