Currently, I am uploading image files to a server and returning the download URL and upload percentage with my upload method.
Looking ahead, I plan to enhance this functionality to allow for the upload of multiple images using the same component. The goal is to display a table below the upload form with the names of successfully uploaded files and buttons to delete them.
I am seeking guidance on how to utilize a promise or async callback to append a new
{ downloadURL : Observable<string>, uploadPercentage : Observable<number> }The upload method is located inside upload-form component.ts
upload(file) {
// this.id = Math.random().toString(36).substring(2);
const folder = this.mode == 'single' ? 'titleCardImages' : 'contentImages'
const filePath = `${folder}/${file.name}`;
const fileRef = this.afStorage.ref(filePath);
const task = this.afStorage.upload(filePath, file)
// observe percentage changes
this.uploadPercent = task.percentageChanges();
// get notified when the download URL is available
task.snapshotChanges().pipe(
finalize(() => this.downloadURL = fileRef.getDownloadURL() )
)
.subscribe()
}
editNewsComponent.html (excerpt) mat dialog for
<h2 mat-dialog-title>Create, Update or delete news</h2>
<mat-dialog-content [formGroup]="form">
<mat-form-field>
<input matInput
placeholder="Title"
formControlName="title">
</mat-form-field> <br>
<br><label for="titleCardImage">Title Card Image:</label> <br>
<upload-image
mode="single"
label="Enter a title card image">
</upload-image>
<!-- <button (click)="fileInput.click()">
<span>Select</span>
<input #fileInput type="file" (change)="upload($event)" style="display:none;" />
</button> <br> -->
<mat-form-field>
<textarea matInput
placeholder="a short description"
formControlName="description"></textarea>
</mat-form-field> <br>
<mat-form-field>
<textarea matInput
placeholder="Body/Content of the news piece"
formControlName="body"></textarea>
</mat-form-field> <br>
<label id="example-radio-group-label">Tags: <br></label>
<mat-chip-list aria-label="tag selection" >
<mat-chip>One fish</mat-chip>
<mat-chip>Two fish</mat-chip>
<mat-chip color="primary" selected>Primary fish</mat-chip>
<mat-chip color="accent" selected>Accent fish</mat-chip>
</mat-chip-list>
</mat-dialog-content>
<mat-dialog-actions>
<button
mat-stroked-button
(click)="reset()"
>
Clear
</button>
<button
mat-dialog-close
mat-stroked-button>
Cancel
</button>
<button
(click)="save()"
mat-raised-button>
Save
</button>
<p>Form data: {{ form.value | json }}</p>
</mat-dialog-actions>
Any help or guidance would be greatly appreciated.