Upload directly to Firebase Storage using Dropzone.js

This post is going to be short, I usually don’t write much, but hope this helps someone, maybe even my future self.

Also, I am going to explain it using Vue and Vue2-Dropzone.

The process is actually pretty simple but took me a while to figure it out.

So here we go:

1. Read the docs of Vue2-Dropzone, they have an example that looks like this

And that already renders a nice box with a lot of options to show upload progress, show file name, remove the file, etc.

Now, to make it upload the files to your firebase storage bucket, you simply have to change 2 things in your code, the headers and the URL.

So that the code looks something like this

On that code, just change MYFIREBASEPROJECT and MYFILENAME to have the actual values of your project.

Lastly, you need to go to the firebase console and change your storage rules to look something like this:

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

CAREFUL: Those rules will allow anyone to read and write as much as they want to your bucket, you should go read the docs on security rules and change it at least to only have one folder with all the permissions open.

For example

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write if request.auth != null;
    }
    match /myUnsecurePath/{allPaths=**} {
     allow read, write;
    }
  }
}

Bonus:

If you want to edit the file name dynamically instead of having it hardcoded, you can do something like

this.dropzoneOptions.url = <your new url>

And yeah, that’s all folks.

Hope it helps someone.