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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How can I upload to Firebase Storage

Thread ID:

Created:

Updated:

Platform:

Replies:

151373 Feb 8,2020 09:10 PM UTC Feb 13,2020 02:00 PM UTC Angular - EJ 2 5
loading
Tags: Uploader
Benny
Asked On February 8, 2020 09:10 PM UTC

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 [Syncfusion]
Replied On 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, 

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


Screenshot: 

 


Regards, 
Sevvandhi N 


Benny
Replied On 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.
Thanks
Benny

Sevvandhi Nagulan [Syncfusion]
Replied On 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,  

[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,  
 
 
Regards,  
Sevvandhi N  



Benny
Replied On 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.

Thanks
Benny


Sevvandhi Nagulan [Syncfusion]
Replied On 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. 

 
Regards, 
Sevvandhi N  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon