DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
What's in store for DevOps in 2023? Hear from the experts in our "DZone 2023 Preview: DevOps Edition" on Fri, Jan 27!
Save your seat
  1. DZone
  2. Coding
  3. Frameworks
  4. Firebase Storage Using AngularJS

Firebase Storage Using AngularJS

Firebase allows you to securely upload and download files for Firebase apps, as well as store images, audio, and videos.

Ezequiel Reyno user avatar by
Ezequiel Reyno
·
Feb. 27, 17 · Opinion
Like (2)
Save
Tweet
Share
6.73K Views

Join the DZone community and get the full member experience.

Join For Free

Recently, we got an awesome post about Firebase and how to use the real-time database with AngularJS. If you missed it here you go the link. Today, I want to talk about another useful feature of Firebase: an amazing tool that allows us to store and serve user-generated content, such as photos or videos. As they explained on their website:

Firebase Storage adds Google security to file uploads and downloads for your Firebase apps, regardless of network quality. You can use it to store images, audio, video, or other user-generated content.

Adding Firebase to Your Web App

If you read my previous post, you already know how to add Firebase reference to your website. If you didn't it yet, go and read it first here.

Creating Your Data Layer

As I did for the real-time database, I'm going to create a data layer. To do that, I'm going to create an AngularJS service to use as a data layer. This service will be responsible to create our links to the Firebase store. As you can see below, it is quite similar to the one we use to connect to our real-time database.

 function storageService($http, $firebaseArray, $firebaseObject, $q) {
    var root = firebase.database().ref();
    var storageRef = firebase.storage().ref();
 }

Now, we have the reference so that we can add a function to our service in order to upload the image.

 function upload(file, uid, fileName) {
    var deferred = $q.defer();
    var fileRef = storageRef.child(uid).child(fileName);
    var uploadTask = fileRef.put(file);

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
       function(snapshot) {
          var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log('Upload is ' + progress + '% done');
          switch (snapshot.state) {
             case firebase.storage.TaskState.PAUSED:
               console.log('Upload is paused');
               break;
             case firebase.storage.TaskState.RUNNING:
               console.log('Upload is running');
               break;
          }
      },
      function(error) {
         switch (error.code) {
            case 'storage/unauthorized':
                deferred.reject('User does not have permission to access the object.');
                break;
            case 'storage/canceled':
                deferred.reject('User canceled the upload.');
                break;
            case 'storage/unknown':
                deferred.reject(' Unknown error occurred, Please try later.');
                break;
          }
       }, function() {
             deferred.resolve(uploadTask.snapshot.downloadURL);
       });

    return deferred.promise;
 }

Again, we use the function child to create the path. In my case, I'm using the user ID as a root folder so I'll group all files per user and then anotherchild  with the file name. At this point, it's important to highlight that I'm using the functionchild  twice but we can do it in this way child('folder_name/file_name') and will create the same structure.

Uploading the File

Once we get the reference, we need to use the put function to upload the file. This file object can be a blob, a file, or a byte array, and it returns a promise that allows us to trace the progress, catch errors, and handle the success response, which provides us a downloadURL property to get the public URL of our document. Our storage structure looks like this:

storage

As you can see, it's really easy to get this storage up and running. I have a working example at this link if you want to see the complete implementation. In this example, I created an app that allows you to select different places around the world and upload an image that appears in a google map.

For a complete reference of Firebase storage, use this link. For a complete reference of Angular Fire, use this link. For a complete reference of Firebase, use this link.

If you found this post useful, please don't forget to press the like button and share it. If you are in doubt, don't hesitate to ask a question. As always, thank you for reading.

Firebase AngularJS

Published at DZone with permission of Ezequiel Reyno. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Using the PostgreSQL Pager With MariaDB Xpand
  • How To Generate Code Coverage Report Using JaCoCo-Maven Plugin
  • Web Application Architecture: The Latest Guide
  • A Complete Guide to AngularJS Testing

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: