M
@stukki said in Uploader with Axios:
@marcelo I faced nearly the same problem and find a solution that works for me (Authentication not yet implemented). I’m not sure if it best practice but I also wanted the uploader to be reusable within other components and wanted to use the QUploader component because of its additional features like thumbnail, display file-size…
I let the url parameter blank.
I get the selected file’s details through the @added-event and safe it in a vuex store
I trigger the upload - method outside the QUploader component
In my uploader.vue file:
<template>
<div class="row justify-center items-center">
<div>
<div class="row justify-between items-center q-px-sm" v-if="showUploadButton === false">
<div class="fa-text-dark-light">{{ deleteMethodString }}</div>
<div>
//youNeed
<q-btn
@click="deleteFile()"
class="q-pl-sm"
color="negative"
flat
icon="ion-ios-trash"
round
>
</q-btn>
</div>
</div>
//youNeed
<q-uploader
:accept="acceptedFileTypes"
:label="uploaderLabel"
@added="fileSelected"
@removed="fileRemoved"
color="grey-1"
flat
hide-upload-btn
square
text-color="accent"
url=""
>
</q-uploader>
</div>
<div class="q-mt-xl" v-if="showUploadButton === true">
//youNeed
<q-btn
:label="$t('message.general.upload')"
@click="upload()"
color="accent"
outline
>
</q-btn>
</div>
</div>
</template>
<script>
import { mapGetters, mapState, mapActions } from 'vuex'
export default {
name: 'uploaderComponent',
components: {
},
data () {
return {
//youNeed
selectedFile: false,
uploaderLabel: 'Select a File',
showUploadButton: false,
deleteMethodString: ''
}
},
//youNeed
watch: {
selectedFile () {
if (this.selectedFile === true) {
this.uploaderLabel = ''
this.showUploadButton = true
} else {
this.showUploadButton = false
}
}
},
mounted () {
this.deleteMethodString = this.deleteString
this.uploaderLabel = this.uploadLabel
},
computed: {
...mapGetters({
currentLanguage: 'language/statusCurrentLanguage'
}),
...mapState({
fileUploadCompleted: state => state.uploader.fileUploadCompleted,
concern: state => state.uploader.propsForFileUpload.concern,
acceptedFileTypes: state => state.uploader.propsForFileUpload.acceptedFileTypes,
deleteString: state => state.uploader.propsForFileUpload.stringForDeleteMethod,
uploadLabel: state => state.uploader.propsForFileUpload.uploaderLabel
})
},
methods: {
...mapActions({
//youNeed
fileUpload: 'uploader/ActionFileUpload',
uploaderDialogTrigger: 'app/ActionUploaderDialog',
fileDelete: 'uploader/uploaderFileDelete'
}),
//youNeed
fileSelected (files) {
if (files.length !== 0) {
this.selectedFile = true
}
this.$store.commit('uploader/MutationFileSelected', files[0])
},
//youNeed
fileRemoved () {
this.selectedFile = false
},
//youNeed
upload () {
this.fileUpload()
},
deleteFile () {
this.fileDelete()
this.uploaderDialogTrigger(false)
}
}
}
</script>
vuex
// MUTATION
export const MutationFileSelected = (state, payload) => {
state.fileSelected = payload
}
//ACTION
export const ActionFileUpload = (context) => {
let uploaderProps = context.state.propsForFileUpload.concern
let id = ''
let uploadUrl = ''
let uploaData = new FormData()
if (uploaderProps === 'clubLogoUpload') {
id = context.rootGetters['clubEdit/getterHomeClubId']
uploadUrl = 'homeclub/putLogo/'
//youNeed
uploaData.append('file', context.state.fileSelected)
}
//youNeed
Vue.prototype.$axios.post(process.env.API + uploadUrl + id, uploaData, {
headers: {
'Content-Type': undefined
},
onUploadProgress: function (progressEvent) {
let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
context.commit('MutationOnUploadProgress', percentCompleted)
}
})
.then(function (response) {
if (response.status === 200) {
console.log(response)
context.dispatch('app/ActionUploaderDialog', false, {root: true})
context.dispatch('ActionAfterFileUpload')
if (context.rootGetters['language/statusCurrentLanguage'] === 'en') {
Notify.create({
type: 'positive',
icon: 'img:statics/icons/check.svg',
color: 'positive',
timeout: 1000,
position: 'center',
message: 'Yeah. File uploaded. Great Job!'
})
}
if (context.rootGetters['language/statusCurrentLanguage'] === 'zh') {
Notify.create({
type: 'positive',
icon: 'img:statics/icons/check.svg',
color: 'positive',
timeout: 1000,
position: 'center',
message: 'Yeah. File uploaded. Great Job! -ZH'
})
}
}
})
.catch(function (error) {
console.log(error)
})
}
I think there’s a lot of stuff you won’t need but I didn’t want to tear it up. This solution enables me to use axios’s features, which are for me are a bit easier to handle.
I’ve prefixed the essential parts I assume you need with //youNeed
If there is anyone who might have an idea to improve this solution, I’d be appreciated
Hi… that doesn’t work… when I try formData.append it goes empty to backend… There is problem on this method. I think because of security reason it is not appendable… How did you run it?
