Within my vuejs2 app, I am facing an issue with uploading images selected in a modal form. The goal is to close the modal form only after all images have been successfully saved, triggering the self.hidePhotosUploadingModal() method.
To keep track of the successful upload count, I have set a variable called uploaded_count and incremented it whenever an upload is successful. However, upon checking the value of uploaded_count, I am encountering the value NaN.
savePhotosUploadingModal() {
let uploaded_count = 0;
let self = this;
this.imagePhotosUploadingFiles.map((nextImagePhotosUploadingFile, index) => {
fetch(nextImagePhotosUploadingFile.blob).then(function (response) {
if (response.ok) {
return response.blob().then(function (imageBlob) {
let imageUploadData = new FormData()
imageUploadData.append('image', imageBlob)
imageUploadData.append('image_filename', nextImagePhotosUploadingFile.name)
Window.axios.post('/profile/upload_photo', imageUploadData).then(({data}) => {
// self.uploaded_count++ // IF TO UNCOMMENT THIS LINE THAT DOES NOT WORK ANYWAY
self.uploaded_count = self.uploaded_count + 1;
console.log('self.uploaded_count::'); // I SEE NaN IN BROWSER'S CONSOLE
console.log(self.uploaded_count);
if (self.uploaded_count === self.imagePhotosUploadingFiles.length) {
self.hidePhotosUploadingModal();
}
self.loadLoggedInactivePhotos();
}).catch((error) => {
console.error(error);
});
});
} else {
return response.json().then(function (jsonError) {
console.error(jsonError);
});
}
}).catch(function (error) {
console.error(error);
}); // fetch(nextImagePhotosUploadingFile.blob).then(function (response) {
}); // this.imagePhotosUploadingFiles.map((nextImagePhotosUploadingFile, index) => {
}, // savePhotosUploadingModal
How can this issue be resolved?
Appreciate any help on this matter!