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 ReactJS, a popular JavaScript library for building user interfaces.
The following approach covers how to send files to Firebase storage in React. We have used the Firebase module to achieve so.
Creating 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 firebase@8.3.1 --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.
Javascript
import firebase from 'firebase';const firebaseConfig = { // Your Credentials };firebase.initializeApp(firebaseConfig);var storage = firebase.storage();export default storage; |
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 for our project. Here we have created an input for selecting the file and a button that uploads the file on firebase storage.
App.js
Javascript
function App() { return ( <div className="App"> <center> <input type="file" /> <button>Upload</button> </center> </div> );}export default App; |
Step 8: Now implement the uploading part. Here, We are going to use a method called put which helps us to send files to firebase storage.
App.js
Javascript
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; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Here is the image in the firebase storage which we uploaded as shown below:
