🔥 Firebase Storage: Easy Setup & File Listing.

[MyrinNew]

"Firebase is a Backend-as-a-Service (BaaS) platform developed by Google that helps developers build web and mobile apps faster without managing traditional server-side infrastructure."





Step 1: Firebase Setup

1. Create a New Project

• Click on “Add Project” or “Create Project”
• Give your project a meaningful name (e.g., MyFirebaseStorageDemo)
• Follow the guided steps and click Finish to set up the project.

2. Enable Firebase Storage

• Go to the left sidebar and click on “Build > Storage”
• Click “Get Started” and choose your storage location (pick the one closest to your users).

3. Upgrade to Blaze Plan

• Go to Project Settings > Usage and billing.
• Select Blaze Plan (first $1 is often free as part of a trial)

4. Set Storage Rule






rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.time }
}
}








5. Upload Files on Cloud Storage

• Create a folder after Clicking on Folder Icon at Right Corner.
• Upload images file to the Folder.

Step 2: Add Firebase SDK to HTML.

















Step 3: Import Firebase CDN in Javascript Block.






import { initializeApp } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-app.js";
import { getStorage, ref, listAll, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-storage.js";

• You can Find CDN in Firebase Documentation.

Step 4: Now Intialize Firebase config.

• Go to https://console.firebase.google.com
• Select your project
• Click ⚙️ Settings (next to Project Overview)
• Scroll down to “Your Apps”
• Select Your Existing Web App.
• Copy the firebaseConfig object shown on screen.
• Copy and Paste firebaseConfig.
• initialize using an App and Storage Variable.

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID"
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);










Step 4: Listing Files from Folder in Firebase storage





const fileList = document.getElementById("fileList");
const listRef = ref(storage, '');
listAll(listRef)
.then((res) => {
res.items.forEach((itemRef) => {
const li = document.createElement("li");
li.textContent = itemRef.name;
fileList.appendChild(li);
});
})
.catch((error) => {
console.error("Error listing files:", error);
});










Step 5: Add the HTML Content.





File List













Conclusion:

In this guide, we learned how to:

• Set up and configure Firebase Storage in a web project
• Apply temporary access rules for development
• List all files stored in a folder (or root) using simple JavaScript
• Display those files cleanly in the browser.

More...