How to upload files to Firebase storage?

 

Step 1: Set Up a Firebase Project

 

• Go to the Firebase Console.
• Click on "Add project" and enter your project's details.
• Once your project is created, navigate to the project dashboard.

 

Step 2: Add Firebase to Your App

 

• Click on the web icon (</>) to register your web app.
• Enter the app's nickname and register it.
• Firebase will provide you with a configuration snippet. Keep this snippet as you will need it for your HTML file.

 

Step 3: Set Up Firebase Storage

 

• In the Firebase Console, go to "Build" in the left sidebar, then select "Storage".
• Click "Get started" and choose the security rules according to your needs, either "Production mode" or "Test mode".
• Click "Next" and then "Done".

 

Step 4: Install Firebase SDK

 

• For a web application, add the following <script> tags to your index.html file, which includes Firebase SDKs.

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

 

Step 5: Initialize Firebase in Your App

 

• Add the Firebase configuration details you got in Step 2 to your index.html.

<script>
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
</script>

 

Step 6: Prepare the HTML for File Upload

 

• Create a basic HTML form for users to select a file to upload.

<input type="file" id="fileInput" />
<button id="uploadButton">Upload</button>

 

Step 7: Handle File Upload in JavaScript

 

• Add an event listener to handle the upload functionality in your JS file or within a <script> tag.

<script>
  const storage = firebase.storage();
  const fileInput = document.getElementById('fileInput');
  const uploadButton = document.getElementById('uploadButton');

  uploadButton.addEventListener('click', () => {
    const file = fileInput.files[0];
    if (!file) {
      console.error('No file selected for upload.');
      return;
    }

    const storageRef = storage.ref(`uploads/${file.name}`);
    const uploadTask = storageRef.put(file);

    uploadTask.on('state\_changed', 
      (snapshot) => {
        // Progress function
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) \* 100;
        console.log('Upload is ' + progress + '% done');
      }, 
      (error) => {
        // Error function
        console.error('Upload failed:', error);
      }, 
      () => {
        // Complete function
        uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
          console.log('File available at', downloadURL);
        });
      }
    );
  });
</script>

 

Step 8: Set Firebase Storage Rules

 

• Go to the Firebase Console, click on "Storage" and navigate to "Rules". Update the rules to allow reading and writing if necessary.

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

• Warning: These rules allow read/write access to your storage from anyone. Modify them according to your security requirements before deploying.

 

Conclusion

 

You have now successfully set up Firebase Storage and implemented a basic file upload feature in your web application. This tutorial covered setting up Firebase, configuring Firebase Storage, preparing the HTML interface, and handling file uploads using JavaScript.