[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

Big Changes in cPanel & WHM version 58 Several big changes are coming in cPanel & WHM version 58. As we continue to work on these changes, we want to get your feedback! Here’s a few of ...
Building a Polyfill for React Suspense The best way to understand a software concept is to try and build it yourself.?—?TBIf you love React, you’ve probably heard something about the up...
Pivotal Container Service Integration with Project... By Aman Basotra and Alka Gupta This blog is a continuation from our previous blog where we had covered technical overview of project hatchway with piv...
Learn about AWS – November AWS Online Tech Talks AWS Online Tech Talks are live, online presentations that cover a broad range of topics at varying technical levels. Join us this month to l...
Spread the love

Posted by News Monkey