NativeScript IOS: Photo uploads to server are randomly failing with slow networks(LTE 1 or 2 bars)

Nativescript version - 8.4.7, Angular 15, IOS 17.2

When uploading 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.parent = this.service.getPhotosToUpload();
    if (this.parent !== null && this.parent.length > 0) {
        const parentList$ = new Array<Observable<boolean[]>>;

        this.parent.forEach(p=> {
            const observable = this.submitPhoto(p)
            if (observable) {
                parentList$.push(observable);
            }

        });

        zip(parentList$)
            .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)
                }),
                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?

Start with the supplied uploadPhotos, submitPhoto, and upload snippets, then reproduce on iOS 17.2 with LTE 1–2 bars while inspecting the HttpErrorResponse status 0. Compare the forkJoin/zip upload path with the successful strong-network case and document a verified client-side or server-side cause and fix.