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.

7 Replies

SN Sevvandhi Nagulan Syncfusion Team February 10, 2020 12:54 PM UTC

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 08:56 PM UTC

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 12:33 PM UTC

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 13, 2020 12:50 AM UTC

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 02:00 PM UTC

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  

MI Michael April 23, 2023 05:25 AM UTC

Has there been any progress on this request? 3 years on and all?!

UD UdhayaKumar Duraisamy Syncfusion Team April 26, 2023 04:17 PM UTC

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.

Live Chat Icon For mobile
Up arrow icon