Angular2 File Uploads Video Tutorial
How to Push Files to Firebase via an Angular2 Frontend
You will need to interact directly with the Firebase API to upload files to firebase. Let's do this by creating a service
ng g service uploads/shared/service
Start by adding the firebase API to the service, then use the function below to handle the upload process.
For more details, checkout our full Firebase file upload tutorial and screencast.
TypeScript Upload Function for Firebase
pushUpload(upload: Upload) {
let storageRef = firebase.storage().ref();
this.uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);
this.uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => {
// upload in progress
upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
},
(error) => {
// upload failed
console.log(error)
},
() => {
// upload success
upload.url = this.uploadTask.snapshot.downloadURL
upload.name = upload.file.name
this.saveFileData(upload)
}
);
}
Grades
Nobody has graded this lesson yet.
- 6 Unlocks
- 2139 Total Reads
- 12 minutes Est. Learning Time
by angularfirebase
Ola! My name is angularfirebase. I have been a CampusHippo member for almost 4 years. I currently offer 1 lesson with a combined overall grade of n and sales amounting to $0.00
- building apps with angular2+ and firebase