How can I upload to Firebase Storage

[Benny]

Hi,

How can i upload to Google Firebase Cloud Storage using the Uploader component.

I have tried all manner of tricks but to no avail.

Thanks

[Sevvandhi Nagulan]

Hi Benny, 

Greetings from Syncfusion support. 

We have used the angular firebase2 npm module to store the file in the firebase storage. Kindly refer the below code snippet, 

[app.module.ts] 

@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 { } 

[app.component.ts] 

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]); 

} 

[app.component.html] 

<ejs-uploader #defaultupload  (change)='upload($event)'></ejs-uploader> 

Please find the sample below, 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/uploader-firebase2027173047 

Screenshot: 

 

Reference link: https://blog.angular.io/file-uploads-come-to-angularfire-6842352b3b47 

Regards, 

Sevvandhi N 

[Benny]

Hi Sevvandhi,

thanks it worked like a charm. I was wondering how to I display a link to download the file.

Its great uploading a file but without a link to download the file it not of much use.

Thanks

Benny

[Sevvandhi Nagulan]

Hi Benny,  

Thanks for the update.  

We have display the link to the file in Firebase Cloud Storage once the upload has been finished successfully. Kindly refer the below code,  

[app.component.html]  

 

<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>  

 

[app.component.ts]  

  

    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();  

    }  

  

Please find the modified sample below,  

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/uploader-firebase655959145  

 

Regards,  

Sevvandhi N  

[Benny]

Hi Sevvandhi,

thanks for your prompt response, I don't mean to sound demanding

but for my use case, I want to able to upload multiple files and for each

successful upload have a link to subsequently download the file.

What am building is a form that allows users upload documents in addition

to other information. They can subsequently upload additional files or remove

unwanted files.

Thanks

Benny

[Sevvandhi Nagulan]

Hi Benny, 

You can upload the multiple files to firebase. But unfortunately we cannot able to get the download url for multiple files. So we have checked the related issues in stack overflow and we did not get any solution. Kindly refer the below link, 

Stack overflow link: https://stackoverflow.com/questions/41789784/getting-download-url-of-multiple-files-inside-firebase-storage/41799913 

So we suggest to use the single uploader for getting the download url. Meanwhile, we are checking the reported issue in our end. We will update you once we got the solution. 

Modified sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/uploader-firebase-378833799 

 

Regards, 

Sevvandhi N