How to upload files to firebase storage using VUEjs.

1. Setup firebase project | Firebase Console

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:

• Title
• image input (make sure to set file type and accept criteria)
• progress indicator (just a percentage indicator that reflects the upload progress)
• Image preview
• Upload / submit button

Scripts:

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 :)