96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
<style type="text/css" scoped>
|
|
.hidden-up {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: -500px;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div class="ui clickable basic button">
|
|
<form>
|
|
<label :for="`upfile-${noteId}`" class="clickable">File Yeet {{uploadPercentage}}</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 = 'DONE'
|
|
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 = 'FAIL'
|
|
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> |