SolidScribe/client/src/components/FileUploadButton.vue

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

<template>
	<div class="ui small compact basic icon button clickable">
		<form>
			<label :for="`upfile-${noteId}`" class="clickable">
				<i class="upload icon"></i>
				Upload File <span v-if="uploadPercentage != 0">{{uploadPercentage}}%</span>
			</label>
			<input class="hidden-up" type="file" :id="`upfile-${noteId}`" ref="file" v-on:change="handleFileUpload()" />
		</form>
		<!-- <button v-if="file" v-on:click="uploadFileToServer()">Submit</button> -->
	</div>
</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 = 0
					this.file = null
					console.log('SUCCESS!!');

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

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

					if(name && location){

						const imageCode = `<img alt="yup" height="200px" src="/api/static/${location}">`

						//put cursor at the bottom of the window
						tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true);
						tinyMCE.activeEditor.selection.collapse(false);
						tinymce.activeEditor.execCommand('mceInsertContent', false, imageCode)
					}

					//try and stick that file into the active editor
					// tinyMCE.execCommand(
					// 	'mceInsertContent', 
					// 	false, 
					// 	'<img alt="Smiley face" height="42" width="42" src="' + src + '"/>'
					// );

				})
				.catch(results => {
					this.uploadPercentage = 0
					console.log('FAILURE!!');
				})
			},
			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>