when trying to show a state of formSubmit in vue.js js. The problem is that when not so familiar with using “this” and when now getting error some places in the code when trying to state the status using “this.currentStatus”.
This is my code:
const STATUS_INITIAL = 0
const STATUS_SAVING = 1
const STATUS_SUCCESS = 2
const STATUS_FAILED = 3
export default {
name: ‘Dashboard’,
data () {
return {
file: ‘’,
uploadError: null,
currentStatus: null,
uploadFieldName: ‘photos’
}
},
computed: {
clientId () {
return parseInt(this.$route.params.id)
},
isInitial () {
return this.currentStatus === STATUS_INITIAL
},
isSaving () {
return this.currentStatus === STATUS_SAVING
},
isSuccess () {
return this.currentStatus === STATUS_SUCCESS
},
isFailed () {
return this.currentStatus === STATUS_FAILED
}
},
methods: {
handleFileUpload () {
this.file = this.$refs.file.files[0]
console.log(this.file)
},
filesChange (fieldName, fileList) {
// handle file changes
const formData = new FormData()
// append the files to FormData
Array
.from(Array(fileList.length).keys())
.map(x => {
formData.append(fieldName, fileList[x], fileList[x].name)
})
// save it
this.submitFile(formData)
},
submitFile (formData) {
this.currentStatus = STATUS_SAVING
console.log(this.currentStatus)
var clientId = this.clientId
var reader = new FileReader()
reader.readAsDataURL(this.file)
reader.onload = function () {
var asim = reader.result
formData.append(‘file’, this.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then(function (res) {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})
)
}
}
}
}
And this is my form:
<p v-if=”isSuccess”>
DONE
</p>
{currentStatus}
<form enctype=”multipart/form-data” novalidate>
<input type=”file” placeholder=”Velg en fil” id=”file” ref=”file” v-on:change=”handleFileUpload()”
accept=”application/pdf” class=”input-file” @change=”filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length”>
<p v-if=”isSuccess”>
wow
</p>
<p v-if=”isSaving”>
Uploading { fileCount } files…
</p>
</form>
I followed this guide
The error when getting is this line: (inside the promise)
this.currentStatus = STATUS_SUCCESS
That is little strange for me because this.currentStatus = STATUS_SAVING is working and showing the number “1”, but not inside the promise (.then).
Anyone can see why this is not working inside the promise but outside?
Solution :
You can use arrow function or closure:
var self = this
reader.onload = function () {
var asim = reader.result
formData.append(‘file’, self.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then(function (res) {
console.log(res)
self.currentStatus = STATUS_SUCCESS
console.log(self.currentStatus)
})
)
}
If you want to use arrow function, please try
reader.onload = () => {
var asim = reader.result
formData.append(‘file’, this.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then((res) => {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})
)
}
Solution 2:
Try using arrow function instead. Like this:
.then(res => {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})
I believe it’s similar to this.