Open In App

How to get download link of uploaded files in firebase storage in React JS?

Improve
Improve
Like Article
Like
Save
Share
Report

Firebase Storage stands out as a robust cloud-based option for housing and distributing user-created content, ranging from images and videos to various files. Within this piece, we’ll walk you through the intricate steps of acquiring download links for files that find their way into Firebase Storage, all within the ReactJS framework.

Prerequisites:

Steps to Create React Application And Installing Module:

Step 1: Create a React app 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

Step 3: After creating the React JS 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.

import firebase from 'firebase';

const firebaseConfig = {
// Your Credentials
};
firebase.initializeApp(firebaseConfig);
var storage = firebase.storage();
export default storage;

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
"firebase": "^8.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

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. 

Example: Here, we are going to use a method called getDownloadUrl which helps us to get the download link of files in firebase storage.

Javascript




import { useState } from 'react';
import storage from './firebase';
 
function App() {
 
    const [image, setImage] = useState('');
    const [Url, setUrl] = useState('');
 
    const upload = () => {
        if (image == null)
            return;
        setUrl("Getting Download Link...")
 
        // Sending File to Firebase Storage
        storage.ref(`/images/${image.name}`).put(image)
            .on("state_changed", alert("success"), alert, () => {
 
                // Getting Download Link
                storage.ref("images")
                    .child(image.name)
                    .getDownloadURL()
                    .then((url) => {
                        setUrl(url);
                    })
            });
    }
 
    return (
        <div className="App"
            style={{ marginTop: 250 }}>
            <center>
                <input type="file"
                    onChange={
                        (e) => {
                            setImage(e.target.files[0])
                        }} />
                <button onClick={upload}>
                    Upload
                </button>
                <br />
                <p>
                    <a href={Url}>
                        {Url}
                    </a>
                </p>
            </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



Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads