How to upload a file to Firebase Storage in React

Youssef Selkani — Sun, 22 Dec 2019 21:15:03 +0000

First, you must have a Google account, log in to console.firebase.com then enable Storage database on your account and make sure to set up database rules, to import and use the library on your project run the command

npm install firebase

In a separate file initialize the app using your config credentials like demonstrated below

import firebase from 'firebase/app'
import 'firebase/storage'

  const config = {
    apiKey: 'xxx-xxxx',
    authDomain: 'xxx-xxx.firebaseapp.com',
    databaseURL: 'https://xxxx-xxxx.firebaseio.com',
    projectId: 'xxxxx-xxxx',
    storageBucket: 'xxxx-xxxx.appspot.com',
    messagingSenderId: 'xxxxxxx'
  }
  const fire = firebase.initializeApp(config)
  const storage = firebase.storage()

  export { storage as default }

From there, you start by building the user interface, we only need 3 components to handle the upload process, the first element one is an input file picker, using the accept method you can specify what file types to allow, we also give it an id so we can hide the default ugly input picker.

  {done && <h3>Uploaded successfully!</h3>}
  {uploading && <progress percent={progress}  />}
    ...
  <input
    accept='image/x-png, image/jpeg'
    id='myfileinput'
    class='inputfile'
    type='file'
    onChange={this.handleChange}
    />

    <label for='myfileinput'>
    <i class='ui upload icon' />
    Select a file
    </label>

    <button 
    onClick={this.handleUpload}>
    Upload
    </button>

The handleChange function only return the file selected by the user and save it to the state, note that we are only using the first file selected, as you know, the input can also accept multiple files selecttion, in that case, tweak your code accordingly to make sure you are handling all selected files.

See full article and video tutorial at Murkstom blog.

DEV Community: Youssef Selkani

How to upload a file to Firebase Storage in React