Initial changes testing and running vue3

2026-10-27 12:50:34 -07:00
1 parent 68f71c9d6c
commit 9f37d3faf1
@@ -0,0 +1,94 @@
+<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"/> -->
+			<i class="file upload icon"></i>
+		</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 { defineAsyncComponent } from 'vue'
+	import axios from 'axios'
+	export default {
+		name: 'FileUploadButton',
+		props: [ 'noteId' ],
+		components: {
+			'nm-button':defineAsyncComponent(() => import('@/components/NoteMenuButtonComponent.vue'))
+		},
+		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
+					this.$bus.$emit('notification', 'Failed to Upload')
+				})
+			},
+			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>