[Firebase] Setup storage upload from Browser in 3 step

[Firebase] Setup storage upload from Browser in 3 step

After giving a try to Firebase authentication modules (surprised to such handy utils), I played around the storage part of Firebase, and very satisfied on how it is designed.


Firebase Storage is designed specifically for scale, security, and network resiliency (Read more).

  • Scale: Every file uploaded is backed by Google Cloud Storage, which scales to petabytes.
  • Security: Files can be secured to specific users or sets of users using Storage Security Rules.
  • Network Resiliency: Uploads and downloads are automatically retried in the case of poor network connections, so you don’t have to keep track of them yourself.


When your product have its own auth system, it is not easy to config ACL on firebase. Everything is well encapsulated on firebase SDK, of course storage access control rules is included.

1. Setup storage bucket key in the Project

You must add your bucket to your Firebase SDK configuration.

2. Setup Rules

Storage Security Rules must first specify the Cloud storage, (via match /b/{bucket}/o) which rules are evaluated against.

There are simply four types : default, public, user and private, we are going to use public as an example (less authentication problem to demo).

service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;

3. Coding

Cloud Storage allows developers to quickly and easily upload files to a Google Cloud Storage bucket provided and managed by Firebase.

Since the default Google App Engine app and Firebase share this bucket, configuring public access may make newly uploaded App Engine files publicly accessible as well. Be sure to restrict access to your Storage bucket again when you set up authentication.

Also, Firebase supports both Blob and File object upload.

Facebook Comments

More Stuff

Understanding npm in Nodejs I think npm was one of the reasons for quick adoption of nodejs. As of writing this article there are close 7,00,000 packages on npm. If you want more...
Video: Building Modern Apps with API Services The Cosmic JS team was honored to get the opportunity to speak at Toyota Connected for the August Ember.js Dallas Meetup. Cosmic JS co-founder To...
A Practical solution for CORS (Cross-Origin Resource Sharing) issu... Summary: I provide a practical solution for solving CORS issue in WKWebView in Ionic and Cordova. The solution works both for iOS and Android. Image ...
A dead simple Webpack 4 example with vanilla JavaScript (No Librar... Grab the repo here! This is a response to a Stack Overflow question. I figured out that there are people out there that may need this, even though...
Spread the love

Posted by News Monkey