SolidScribe/client/src/components/FileUploadButton.vue

<style type="text/css" scoped>
	.hidden-up {
		opacity: 0;
		position: absolute;
		top: -50000px;
	}
</style>

<template>
	<form>
		<label :for="`upfile-${noteId}`" class="clickable">
			<i class="upload icon"></i>
			<span v-if="uploadPercentage != 0">{{uploadPercentage}}%</span>
			<span v-else>Upload</span>
		</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' ],
		data () {
			return {
				file: null,
				uploadPercentage: 0,
			}
		},
		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.uploadPercentage = parseInt( 
					        	Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total ) )
					      }
					}
				).then(results => {
					this.uploadPercentage = 'Working'
					this.file = null

					// console.log('File upload results')
					// console.log(results.data)

					const name = results.data.fileName
					const location = results.data.goodFileName

					if(name && location){

						this.uploadPercentage = 0

						const imageCode = `<img alt="image" src="/api/static/${location}">`

						this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode})
					}
				})
				.catch(results => {
					this.uploadPercentage = 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>