SolidScribe/client/src/components/FileUploadButton.vue

90 lines
2.2 KiB
Vue
Raw Normal View History

<style type="text/css" scoped>
.hidden-up {
opacity: 0;
position: absolute;
2020-02-01 14:21:22 -08:00
top: -50000px;
}
</style>
<template>
<form data-tooltip="Upload File" data-inverted>
2020-02-01 14:21:22 -08:00
<label :for="`upfile-${noteId}`" class="clickable">
<nm-button icon="upload" :text="uploadStatusText"/>
2020-02-01 14:21:22 -08:00
</label>
<input class="hidden-up" type="file" :id="`upfile-${noteId}`" ref="file" v-on:change="handleFileUpload()" />
<!-- <button v-if="file" v-on:click="uploadFileToServer()">Submit</button> -->
2020-02-01 14:21:22 -08:00
</form>
</template>
<script>
import axios from 'axios'
export default {
name: 'FileUploadButton',
props: [ 'noteId' ],
components: {
'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
},
data () {
return {
file: null,
uploadStatusText: 'Upload',
}
},
mounted(){
// console.log(this.noteId)
},
methods: {
uploadFileToServer() {
let formData = new FormData();
formData.append('file', this.file);
formData.append('noteId', this.noteId)
console.log('>> formData >> ', formData);
// You should have a server side REST API
axios.post('/api/attachment/upload',
formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: ( progressEvent ) => {
this.uploadStatusText = parseInt(
Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total ) )
}
}
).then(results => {
this.uploadStatusText = 'Working'
this.file = null
2020-02-01 14:21:22 -08:00
// console.log('File upload results')
// console.log(results.data)
const name = results.data.fileName
2020-02-01 14:21:22 -08:00
const location = results.data.goodFileName
this.$bus.$emit('notification', 'Processing Upload')
if(name && location){
this.uploadStatusText = 'Upload File'
const imageCode = `<img alt="image" src="/api/static/thumb_${location}">`
2020-02-01 14:21:22 -08:00
this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode})
}
})
.catch(results => {
this.uploadStatusText = 0
})
},
handleFileUpload() {
//Grab file and push note id to into data
this.file = this.$refs.file.files[0]
console.log('>>>> 1st element in files array >>>> ')
console.log(this.file)
if(this.file){
this.uploadFileToServer()
}
}
}
}
</script>