Nativescript version - 8.4.7, Angular 15, IOS 17.
When uploading more than 2 photos to server/Microsoft api in the slow network (LTE 1 or 2 bars). The photos are not uploading and returning below exception. Looks like the request is not even reaching the server.
error
{
"headers": {
"normalizedNames": {},
"lazyUpdate": null,
"headers": {}
},
"status": 0,
"statusText": "Unknown Error",
"url": "https://abc",
"ok": false,
"name": "HttpErrorResponse",
"message": "Http failure response for "https://abc": 0 Unknown Error",
"error": {}
}When connected to a strong network LTE 3 or more bars ,5g or WIFI , I am able to upload more than 50 photos at once without any issues.
Here is my upload code
//component
uploadPhotos(): void {
let message;
this.photos = this.service.getPhotosToUpload();
if (this.photos !== null && this.photos.length > 0) {
const photosList$ = new Array<Observable<boolean[]>>;
this.photos.forEach(photo=> {
const observable = this.submitPhoto(photo)
if (observable) {
photosList$.push(observable);
}
});
zip(photosList$)
.pipe(
switchMap((flags: boolean[][], index: number) => {
let totalNotuploaded = 0;
let totalUploaded = 0;
const results =[]
flags.forEach((flag) => {
totalNotuploaded += flag.filter(falses => !falses).length;
totalUploaded += flag.filter(trues => trues).length;
});
results.push([totalNotuploaded, totalUploaded])
return of(results);
})
).subscribe((results: number[][]) => {
let notuploaded = results[0][0] ;
let uploaded = results[0][1];
this.message = `Uploaded ${uploaded} Photo(s).`;
if (notuploaded > 0) {
this.message += `Errors uploading ${notuploaded}`
}
});
} else {
this.message = `Uploaded 0 Photos.`;
}
}
submitPhoto(photo: PhotoWrapper): Observable<boolean[]> {
const photosToUpload$ = new Array<Observable<boolean>>();
const photosToUpload = photo.filter((filter) => !filter.Uploaded);
photosToUpload.forEach(photo => {
photo.FileContent = this.servic.getFileAsBase64String(new Path(photo.File.directory as any, photo.File.relativePath));
const observable = this.service.upload(photo);
photosToUpload$.push(
observable.pipe(
catchError(() => {
return of(null)
}),
tap((result: PhotoResult) => {
if (result?.flag) {
//do something
}
}),
switchMap((result: PhotoResult) => {
return of(result && result?.flag ? true : false)
})
));
});
if (photosToUpload$ && photosToUpload$.length) {
return forkJoin(photosToUpload$);
} else { return null; }
}
//upload service
upload(photosData: PhotoWrapper): Observable<PhotoResult> {
let headers = this.authService.getAuthHeader();
let url = this.configurationService.uploadPhotoUrl();
return this.http.post<boolean>(this.configurationService.uploadPhotoUrl(), photoDto, { headers: headers, observe: 'response' }).pipe(
map((result) =>( {flag: result.body, wrapper: photosData} as PhotoResult)),
);
}
}can anyone help me on how to fix this issue or is there any setting on the ios/nativescript/angular side which will prevent this to happen or is something wrong with my upload code?
are my requests getting timed out? , is there any way to increase the timeout or http request file size in native script/IOS or angular? not sure what the issue is and i am stuck?