771b739c37
Counts update on certain events and show or hide various elements Fixed various little ui element issues fixes #6
91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<style type="text/css" scoped>
|
|
.hidden-up {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: -50000px;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<form data-tooltip="Upload File" data-inverted>
|
|
<label :for="`upfile-${noteId}`" class="clickable">
|
|
<nm-button icon="upload" :text="uploadStatusText"/>
|
|
</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> -->
|
|
</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
|
|
|
|
// console.log('File upload results')
|
|
// console.log(results.data)
|
|
|
|
const name = results.data.fileName
|
|
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}">`
|
|
|
|
this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode})
|
|
this.$store.dispatch('fetchAndUpdateUserTotals')
|
|
}
|
|
})
|
|
.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> |