User Story: Visual feedback when uploading image

[zijianhuang]

When uploading large image particularly from a mobile device with low bandwidth, it may take many seconds. I had previously mistakenly considered the editor is not working well with inserting image on mobile device because of the slowness.

It will be good to provide some visual feedback for the progress, such as a hourglass or progressbar, and for failure due to network problems or server problems.

Technically this may be a built-in feature of next release of the editor. Alternatively , publish the observable of the httpclient upload as implemented in https://github.com/kolkov/angular-editor/blob/e43864eb55f41297698eb7b5bf86f6ec1e8a93a0/projects/angular-editor/src/lib/angular-editor.service.ts

so application developers may catch HttpEventType.UploadProgress to implement whatever visual feedback.

[zijianhuang]

At https://angular.io/guide/http, "Every progress event triggers change detection, so only turn them on if you truly intend to report progress in the UI. ", so it may be sufficient enough for the editor to publish 1st Subject event for starting upload, 2nd Subject event for successful upload, and another Subject event on error, in this.editorService.uploadImage(file). Since you are not building a Youtube uploading service application, having progress detail like percentage is not worth of overhead of triggering change detection of Angular.

So application developers may subscribes the events and craft viable visual effect suitable for the application.

Here's some code that I used for uploading an avatar file:

				this.waitService.setWait({ loading: true });
				const url = APP_DI_CONFIG.apiBaseUri + 'api/Files/avatar?userId=' + this.model.id;
				this.httpClient.post(url, formData, { headers: headers }).pipe(catchError(error => throwError(error))).subscribe(
					data => {
						this.waitService.setWait({ loading: false });
						this.alertService.success('Upload done.', true);
						this.avatarV = Date.now().toString();
					},
					error => {
						this.waitService.setWait({ loading: false });
						this.alertService.error(error);
					}
				);

If you could similarly replace this.waitService.setWait({ loading: true }); with event emitting, application developers may optionally subscribe and provide visual feedback.

[kolkov]

Hi! Thanks for the proposal.