We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I upload to Firebase Storage

How can i upload to Google Firebase Cloud Storage using the Uploader component.
I have tried all manner of tricks but to no avail.

5 Replies

SN Sevvandhi Nagulan Syncfusion Team February 10, 2020 07:54 AM

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, 

    declarations: [ 
  imports: [ 
        apiKey: "AIzaSyA9Z84tqx_hIn-Rk4U_O8zAfdM8m43vDok", 
      authDomain: "uploaderwithfirebase.firebaseapp.com", 
      storageBucket: "uploaderwithfirebase.appspot.com", 
      projectId: "uploaderwithfirebase", 
  providers: [], 
  bootstrap: [AppComponent] 
export class AppModule { } 


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

Please find the sample below, 



Sevvandhi N 

BE Benny February 11, 2020 03:56 PM

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.

SN Sevvandhi Nagulan Syncfusion Team February 12, 2020 07:33 AM

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,  

<div class="container">  
    <div class="card">  
        <div class="card-header">  
            Firebase Cloud Storage  
        <div class="card-body">  
            <ejs-uploader #defaultupload (change)='upload($event)'[allowedExtensions]='allowExtensions'></ejs-uploader>  
            <div class="progress">  
                <progress max="100" [value]="(uploadProgress | async)"></progress>  
            <div *ngIf="downloadURL | async; let downloadSrc" class="alert alert-info"role="alert">  
                File uploaded: <a [rel='nofollow' href]="downloadSrc">{{downloadSrc}}</a>  
    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();  
            finalize(() => {  
                this.downloadURL = this.ref.getDownloadURL();  
Please find the modified sample below,  
Sevvandhi N  

BE Benny February 12, 2020 07:50 PM

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.


SN Sevvandhi Nagulan Syncfusion Team February 13, 2020 09:00 AM

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, 

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. 

Sevvandhi N  

Live Chat Icon For mobile
Up arrow icon