- 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.
You could do something like this:
Here I used a common grid of rows and columns to display:
- 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
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 :)