CODEWITHSUNDEEP
angularfile-uploadfirebasefirebase-storageangularfire2
Daimz
Daimz

Reputation: 3281

Uploading to Firebase Storage with ngx-uploader

How can I use ngx-uploader or similar to upload images to firebase?

The main problem I am facing is that most implementations of Angular 2 uploader require a URL but I need to upload to the firebase refrence and I'm not sure how to peice this together or if it can even be done. Perhaps I'm not looking at it the right way.

I found this script:

uploadImage(name, data) {
    let promise = new Promise((res,rej) => {
      let fileName = name + ".jpg";
      let uploadTask = firebase.storage().ref(`/teams/${fileName}`).put(data);
      uploadTask.on('state_changed', function(snapshot) {
      }, function(error) {
        rej(error);
      }, function() {
        var downloadURL = uploadTask.snapshot.downloadURL;
        res(downloadURL);
      });
    });
    return promise;
  }

This showed me I need to user the firebase.storage().ref

but then if I look at the ngx-uploader documentation example I can't figure out how I use it.

Upvotes: 0

Views: 1092

Answers (1)

brijmcq
brijmcq

Reputation: 3418

If you followed the documentation, you are probably running this code

 startUpload() {
    this.inputUploadEvents.emit('startUpload');
  }

which will run the code that will use the url variable in the NgUploaderOptions which you don't really need if you are using firebase storage. What I did is I add the (change) event like this

 <input (change)="onChange($event)"
           type="file"
           class="hidden"
           ngFileSelect
           [options]="options"
           [events]="inputUploadEvents"
           (onUpload)="handleUpload($event)"
           (onPreviewData)="handlePreviewData($event)"
           (beforeUpload)="beforeUpload($event)">

And in the back-side

   onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];

    }

Now you just need to insert the this.file in the ref.put()...

Note that this is for single image only. Hope this helps.

Upvotes: 1

Related Questions