Angularfire: feat(storage): upload, read, and process* files

[choopage]

I'm submitting a feature request.

Current behavior
Exploring ways to handle file upload (images & pdf in particular) using Angular2. I was searching around the web and all the solutions points to using the multer middleware (an express app) for file upload.

Expected/desired behavior
The outcome I would like to achieve is to use Angular2 front end to allow user to upload the file to a Firebase3 storage as per Firebase SDK3.

Question

1. Will direct file storage to Firebase Storage be a part of AngularFire2? (I believe the answer is Yes)
2. If so, when will it be available?
3. The process* in the title is referring to processing the images and documents using Google Vision API. Will AngularFire2 have inbuilt connector to perform this?

[davideast]

Answers
1) Will direct file storage to Firebase Storage be a part of AngularFire2?

• Yes! 💯

2) If so, when will it be available?

• No date yet, but it's top on the list after the update.

3) The process* in the title is referring to processing the images and documents using Google Vision API. Will AngularFire2 have inbuilt connector to perform this?

• This would be a feature of Firebase Storage and not AngularFire2, so I can't address it here.

[Daewju]

any updates?

[choopage]

Hi @davideast any updates?

[escobara]

Any updates on this?

[EralpB]

Any updates on this?

[MMOSX]

Hi, how can i upload a file on firebase storage

[davideast]

@EralpB @escobara @choopage

Right now we're focusing on some bug fixes and "recipes" section to help with common questions. After that is done we are going to start looking into Firebase Storage for AngularFire2.

[veerni]

@davideast i believe this feature is not live yet, so is there a work around for the same?

[davideast]

@veerni Use the regular Firebase SDK.

https://firebase.google.com/docs/storage/web/start

[jtushar53]

can i use firebase.storage() with angularfire 2, do i have to re-initialize firebase again, i have whole ionic app made up on angularfire 2, it has only one screen with file upload(profile pic).

[davideast]

@jtushar53 You do not have to reinitialize if you are already using AngularFire2

[candidature]

@davideast Sir we are waiting for storage API of angularfire2. Is there an update?

[okonovalenko]

Any update on this feature? Thank u

[norwebcl]

any update? i'm waiting for angularfire2 storage 👍

Best regards 😃

[sunlyear]

I have faced the same issue, and the current work around is to access firebaseApp (firebase instance inside AngularFire2 module). Here is the original solution.

import { Component, Inject } from '@angular/core';
import { FirebaseApp } from 'angularfire2';

@Component({
  template: '<p>testing</p>'
})
export class AnyComponent {

  constructor(@Inject(FirebaseApp) firebaseApp: any) {
    const storageRef = firebaseApp.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

[daslicht]

Since the issue is closed I assume it has been added ? am I wrong ?

[daslicht]

@sunlyear
I just tried this solution, but it also seams to be affected by the same bug as this:
https://github.com/angular/angularfire2/issues/637

It takes ages until the image get shown, or it it working properly for you ?

[norwebcl]

Its not ready yet, we are waiting for the final release.

Best Regards.

[norwebcl]

Hi Mark,

Sorry but the firebase storage works really bad on the preview release, take a long time to show the files. We have to wait to the final release for better performance, because now is just 2 lines of code adapted.

Best Regards.

Sebastian Díaz Villada
Desarrollador Full-Stack
Móvil: [phone]
http://www.norweb.cl/
Antofagasta - Chile

[cid:EA86A0BA-D1E3-48FF-8230-6C7E72D06C41]

Esta comunicación puede contener material confidencial y/o información con derechos reservados del propietario, por lo tanto el uso de la misma es exclusiva para el destinatario. Si usted recibió este material por error, por favor notifíquelo inmediatamente al remitente, borre el correo y cualquier documento asociado con el mismo.

El 26-10-2016, a las 04:15, Marc Wensauer <[email protected][e-mail]> escribió:

@sunlyearhttps://github.com/sunlyear
I just tried this solution, but it also seams to be affected by the same bug as this:

637https://github.com/angular/angularfire2/issues/637

It takes ages until the image get shown, or it it working properly for you ?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/angular/angularfire2/issues/213#issuecomment-256267819, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ARMku5bpAt4JY-7c8VEE3gJ-iX5NweX5ks5q3v4DgaJpZM4IwgaR.

[r-vijay-r]

hello this may help beginners to upload files from local drive to firebase especially for those who are using angular2 typescript angular-cli

import { Component, EventEmitter } from '@angular/core';
import * as firebase from 'firebase';

@Component({
selector: 'app-root',
template: <input type="file" id="filebutton" value="upload" #filebtn (change)="filebuttoni($event)">,
styleUrls: ['./app.component.css']
})
export class AppComponent {
storageref;
storage;
path;
constructor(){
let config = {
apiKey: ,
authDomain: ,
databaseURL: ,
storageBucket:
};
firebase.initializeApp(config);
this.storage =firebase.storage().ref();
}
filebuttoni(event){
let files = event.srcElement.files[0];
let uploader=document.getElementById("uploader");
this.path="images/"+files.name;
this.storageref=this.storage.child(this.path);
let task=this.storageref.put(files);
}
}

make sure you made your firebase storage rules true because i am not doing authentication since this is a test code. i got this form some great programmers written their answers in stackoverflow . i am new in this so you may get explanations from experts. i done "npm install --save angularfire2 firebase" . works for me. please let me know if i did anything wrong. thank you . please fill the config with your firebase config

For a small demo visit

https://r-vijay-r.github.io/upload/

Select a pic from local drive and wait till uploads. Can also delete uploaded.

[MmtBkn]

Hi @davideast any updates?

[da45]

Hi @davideast,
Please any news about this feature? please give us just an estimation of the release date,

[katowulf]

Hi Folks, there are no ballparks or public release dates we can share. Sorry.