Hello!
Below I am trying to upload image to server and with success 1 image is uploading each time, but I want to upload multiple images, any ideas?
const options: CameraOptions = {
quality: 100,
sourceType : this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: false,
correctOrientation: true
}
this.camera.getPicture(options).then((imageData) => {
this.file.resolveLocalFilesystemUrl(imageData).then((entry:any)=>{
entry.file((file1)=>{
var reader = new FileReader();
reader.onload = (encodedFile: any)=>{
var src = encodedFile.target.result;
this.photos.push(src);
this.photos.reverse();
}
reader.readAsDataURL(file1);
})
}).catch((error)=>{
console.log(error);
})
//this.getGpsData(imageData);
//this.base64var = "data:image/jpeg;base64," + imageData;
//this.getGpsData(this.base64var);
this.uploadPhoto(imageData);
this.submit_photos.push(imageData);
console.log(this.submit_photos);
//const timestamp = new Date().getTime();
//this.submit(imageData)
//let test = (<any>window).Ionic.WebView.convertFileSrc(imageData);
//this.sendData(imageData);
//exif.getData(this.base64,"ANY");
//console.log(this.base64var);
}, (err) => {
console.log(err);
});
}
},
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
icon: 'close',
handler: () => {
//console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
uploadPhoto(imageFileUri: any): void {
this.file.resolveLocalFilesystemUrl(imageFileUri)
.then(entry => (<FileEntry>entry).file(file => this.array_photos.push(file)))
.catch(err => console.log(err));
}
readFile(file: any) {
const formData = new FormData();
console.log("reading file", this.array_photos);
for (let i = 0; i < this.array_photos.length; i++) {
const reader = new FileReader();
reader.onloadend = () => {
var imgBlob = new Blob([reader.result], {type: this.array_photos[i]['type']});
console.log(imgBlob);
formData.append('file[]', imgBlob, this.array_photos[i]['name']);
console.log("formdata",formData.getAll('file[]'));
};
this.postData(formData);
reader.readAsArrayBuffer(this.array_photos[i]);
}
postData(formData: FormData) {
console.log('postData',formData.getAll('file[]'));
this.uploadImage(formData, 2, "title", "comments").then((result: ApiResponse) => { //userid 1
console.log('SUCCESS!')
}, (err) => {
console.log(err);
});
}
uploadImage(formData, userid, title, comments) {
console.log('uploadImage',formData.getAll('file[]'));
return new Promise((resolve, reject) => {
this.post('imagedata/userImage', {
userid: userid,
title: title,
comments: comments,
}, formData
).subscribe(response => {
resolve(response);
}, err => {
console.log(err);
reject(err);
});
})
}
post(endpoint: string, params: any = null, body: any = null) {
return this.http.post<ApiResponse>('http://127.0.0.1:8003/api/' + '/' + endpoint, body, {
params: params
});
}
The code is not waiting to finish the loop in readFile function
Thank you