How to get public URL of Firebase storage file?

 

Step 1: Set Up Firebase in Your Project

 

To work with Firebase Storage and get the public URL of a file, you first need to set up Firebase in your project. Follow these steps:

• Go to the Firebase Console.
• Click on "Add Project" and follow the prompts to create a new project or select an existing project.
• Once your project is ready, click on "Add app" to add a web app to your Firebase project. This will help in getting the Firebase configuration for your web application.
• After registering your app, you'll be presented with Firebase SDK configuration, which looks like this:

 
// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_MESSAGING_SENDER\_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Ensure you replace the placeholders with your actual project details. Include this in your HTML file to initialize Firebase.

 

Step 2: Upload the File to Firebase Storage

 

After Firebase setup, the next step is to upload a file to Firebase Storage.

Add the Firebase Storage script to your HTML:

<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-storage.js"></script>

Then, use the following function to upload a file:

function uploadFile(file) {
    // Create a root reference
    const storageRef = firebase.storage().ref();
    
    // Create a reference to 'your_file_name'
    const fileRef = storageRef.child('your_file_name');
    
    // 'file' comes from the Blob or File API
    fileRef.put(file).then((snapshot) => {
        console.log('Uploaded a file!');
        getPublicURL(fileRef);
    });
}

Make sure to call this function by passing the file object when you're ready to upload.

 

Step 3: Get the Public URL of the Uploaded File

 

Once the file is uploaded to Firebase Storage, you can get its public URL.

Use the following function to get the URL:

function getPublicURL(fileRef) {
    fileRef.getDownloadURL()
        .then((url) => {
            console.log('Public URL:', url);
            // You can now use this URL to access your file publicly
        })
        .catch((error) => {
            // Handle any errors
            console.error('Error getting public URL:', error);
        });
}

Call this function after the file is uploaded to get and print the public URL.

 

Step 4: Secure the File if Necessary

 

By default, files in Firebase Storage are protected, and only authenticated users can access them. If you want your files to be publicly accessible:

• Go to Firebase Console.
• Navigate to "Storage" and then "Rules".
• Update the rules to allow public access:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=\*\*} {
      allow read, write: if true;
    }
  }
}

Use these rules for development purposes only, as they make your storage public. For production, consider more secure rules.

For better security practices, always consult Firebase's official documentation and tailor the rules according to your application's needs.