-1

I have created file upload using angular and antivescript. When i am uploading single file currentBytes and totalBytes works ok - meaning: totalBytes does not change and currentBytes increasing. Situation is different with multi upload. When selecting multiple files looks like it starts to uploads chunks and totalBytes and currentBytes different every callback. It is impossible to do progress indicator this way. Any ideas how to get totalBytes of currentBytes consistant for multi-upload?

Also 'complete' is called multiple times - is there any other way rather then increment local variable and when its value equal to amount of files then call complete callback?

I would appreciate any help.

Here is my function:

uploadFiles(images: ImageAsset[]): Observable<ImageUploadResponse> {
        this.componentService.loadingIndicator.showMessage({ message: 'Uploading Images', showProgressIndicator: true });
        return new Observable<ImageUploadResponse>(observer => {
            const session = backgroundHttp.session('image-upload');
            const uploadParams = [];

            if (images.length === 0) {
                observer.next({ imageIds: [] });
                observer.complete();
                return;
            }

            let imagesUploadCompleted = 0;

            images.forEach(async image => {
                // const imageSource = await ImageSource.fromAsset(image);
                let localPath: any;

                if (platformModule.isAndroid) {
                    localPath = image.android;
                } /* else {
                    // selected_item.ios for iOS is PHAsset and not path - so we are creating own path
                    const folder = fileSystemModule.knownFolders.documents();
                    const path = fileSystemModule.path.join(folder.path, uuid.v1() + '.jpeg');
                    imageSource.saveToFile(path, 'jpeg');
                    localPath = path;
                } */

                uploadParams.push({ name: 'files', filename: localPath, mimeType: 'image/jpeg' });

                const request = {
                    url: `${environment.apiUrl}/upload`,
                    method: 'POST',
                    headers: { 'Content-Type': 'application/octet-stream' },
                    description: 'Uploading images'
                };

                const task = session.multipartUpload(uploadParams, request);

                task.on('progress', (e) => {
                    if (e.currentBytes) {
                        // console.log('progress ->', e.currentBytes);
                        this.ngZone.run(() => {
                            this.componentService.loadingIndicator.showProgress({ maxValue: e.totalBytes, value: e.currentBytes });
                        });
                    }
                });
                task.on('error', (e) => {
                    this.ngZone.run(() => {
                        observer.error(e.error);
                        observer.complete();
                    });
                });
                task.on('complete', (e: any) => {
                    imagesUploadCompleted++;

                    if (imagesUploadCompleted === images.length) {
                        this.ngZone.run(() => {
                            observer.next(JSON.parse(e.response.getBodyAsString()));
                            observer.complete();
                        });
                    }
                });

                // const file = fileSystemModule.File.fromPath(image['_android']);
                // paths.push(imageSource.toBase64String('jpeg', 60));*/
            });
        });
    }
Vytautas Pranskunas
  • 772
  • 12
  • 23
  • Can you show some code, how exactly you are handling multiple files and events? – Manoj Apr 13 '20 at 12:20
  • I have updated qestion with funciton – Vytautas Pranskunas Apr 13 '20 at 20:41
  • It's different every time because you are writing it inside a loop and every time it's called, the callback could for different file / task you created. You might want to check with your API server, see if they support uploading multiple files at once, if they do then you can create one task that will upload all files which will solve your issue easily. – Manoj Apr 13 '20 at 23:47
  • Thanks, how could i missed that that it is in the loop :))))) It solved an issue. – Vytautas Pranskunas Apr 14 '20 at 08:25

1 Answers1

0

Problem was, as Manoj said, requests were created in the loop.

Vytautas Pranskunas
  • 772
  • 12
  • 23