How to upload files in firebase storage using ReactJS ?

Last Updated : 26 Jul, 2024

Firebase Storage is a powerful cloud storage solution provided by Google’s Firebase platform. It allows developers to store and retrieve user-generated content, such as images, videos, and other files, in a secure and scalable manner. In this article, we will explore how to upload files to Firebase Storage using React JS.

Prerequisites

Steps to create React Application And Installing Module

Step 1: Create a React myapp using the following command:

npx create-react-app myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command:

cd myapp

Project structure: Our project structure will look like this.

Step 3: After creating the ReactJS application, Install the firebase module using the following command:

npm install [email protected] --save

Step 4: Go to your firebase dashboard and create a new project and copy your credentials.

const firebaseConfig = {
      apiKey: "your api key",
      authDomain: "your credentials",
      projectId: "your credentials",
      storageBucket: "your credentials",
      messagingSenderId: "your credentials",
      appId: "your credentials"
};

Step 5: Initialize the Firebase into your project by creating a firebase.js file with the following code.

Step 6: Now go to your storage section in the firebase project and update your security rules. Here we are in testing mode, so we allow both read and write as true. After updating the code shown below. Click on publish.

Step 7: Now create a basic UI and method to upload files to firebase storage.

App.js

import { useState } from 'react';
import storage from './firebase';
function App() {
    const [image, setImage] = useState('');
    const upload = () => {
        if (image == null)
            return;
        storage.ref(`/images/${image.name}`).put(image)
            .on("state_changed", alert("success"), alert);
    }

    return (
        <div className="App">
            <center>
                <input type="file" onChange={(e) => 
                { setImage(e.target.files[0]) }} />
                <button onClick={upload}>Upload</button>
            </center>
        </div>
    );
}

export default App;