@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UploaderModule,
AngularFireModule.initializeApp({
apiKey: "AIzaSyA9Z84tqx_hIn-Rk4U_O8zAfdM8m43vDok",
authDomain: "uploaderwithfirebase.firebaseapp.com",
storageBucket: "uploaderwithfirebase.appspot.com",
projectId: "uploaderwithfirebase",
}),
AngularFireStorageModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } |
upload(event)
{
// create a random id
const randomId = Math.random().toString(36).substring(2);
// create a reference to the storage bucket location
this.ref = this.afStorage.ref (randomId);
// the put method creates an AngularFireUploadTask
// and kicks off the upload
this.task = this.ref.put(event.target.files[0]);
} |
<ejs-uploader #defaultupload (change)='upload($event)'></ejs-uploader> |
<div class="container">
<div class="card">
<div class="card-header">
Firebase Cloud Storage
</div>
<div class="card-body">
<ejs-uploader #defaultupload (change)='upload($event)'[allowedExtensions]='allowExtensions'></ejs-uploader>
<br><br>
<div class="progress">
<progress max="100" [value]="(uploadProgress | async)"></progress>
</div>
<br>
<div *ngIf="downloadURL | async; let downloadSrc" class="alert alert-info"role="alert">
File uploaded: <a [rel='nofollow' href]="downloadSrc">{{downloadSrc}}</a>
</div>
<br>
</div>
</div>
</div> |
upload(event) {
const id = Math.random().toString(36).substring(2);
this.ref = this.afStorage.ref(id);
this.task = this.ref.put(event.target.files[0]);
this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));
this.uploadProgress = this.task.percentageChanges();
this.task.snapshotChanges().pipe(
finalize(() => {
this.downloadURL = this.ref.getDownloadURL();
})
)
.subscribe();
} |
Has there been any progress on this request? 3 years on and all?!
We checked the previously shared StackOverflow, but unfortunately, we didn't receive any updates. After further investigation, we found that no further queries have been created regarding how to get the download URL for multiple files in Firebase. Therefore, you can refer to the previously shared StackOverflow for future reference.