How to upload files to firebase storage using VUEjs.

Follow the steps from 1 to 3 in order to create your firebase project.

You can skip google analytics.

2. Get the project settings.

Inside your project configurations you will be able to get the following configuration credentials:

you must add a firebase configuration in order to initialize firebase with your app. Once that initialization is done, you will be able to use firebase initialize globally by setting/importing it on your main.js file.

3. Allow upload / download of files without authentication.

In order to allow public upload/download you must change the Storage / Rules: (just replace null with true)

4. Create view with form to upload files.

On your .vue file import firebase and firebase storage dependencies.

Import firebase and firebase storage:

You could do something like this:

Here I used a common grid of rows and columns to display:


The preview Image function allows us to store the file data into a variable and display it afterwards.

The onUpload functions uses firebase configuration to load the image data and afterwards get the DownloadURL.

Now, try it!

That’s it :)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store