How to store images in Firebase storage?

 

Step 1: Set up Firebase Project

 

• Go to Firebase Console and create a new project.
• Add a new app to your Firebase project (iOS/Android/Web) depending on your requirements.

 

Step 2: Configure Firebase in Your Application

 

• For a web app, directly include Firebase SDK links in the HTML file:

<!-- Firebase App (the core Firebase SDK) is always required -->
<script src="https://www.gstatic.com/firebasejs/9.19.1/firebase-app.js"></script>

<!-- Include Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/9.19.1/firebase-storage.js"></script>

• For Android apps, add Firebase dependencies in build.gradle:

// In your top-level build.gradle file
buildscript {
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:4.3.10' // Check for latest version
    }
}
// In your app-level build.gradle file
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

dependencies {
    // ...
    implementation 'com.google.firebase:firebase-storage:20.0.2' // Check for latest version
}

 

Step 3: Initialize Firebase in Your Application

 

• For a web app, initialize Firebase in your JavaScript:

// Your web app's Firebase configuration
const firebaseConfig = {
// Your firebase configuration
};

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

• For Android apps, initialize Firebase in onCreate() of your MainActivity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    // Initialize Firebase
    FirebaseApp.initializeApp(this);
}

 

Step 4: Create Firebase Storage References

 

• For both web and Android, you need to create a storage reference.

For a web app:

// Create a root reference
const storage = firebase.storage();
const storageRef = storage.ref();

For Android:

// Create a storage reference from our app
FirebaseStorage storage = FirebaseStorage.getInstance();
StorageReference storageRef = storage.getReference();

 

Step 5: Upload Image

 

For a web app:

const fileInput = document.querySelector('#file');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const uploadTask = storageRef.child(`images/${file.name}`).put(file);

  uploadTask.on('state_changed', 
    (snapshot) => {
      // Observe state change events such as progress
      // Handle state changes for progress
    }, 
    (error) => {
      // Handle unsuccessful uploads
      console.error('Upload failed:', error);
    }, 
    () => {
      // Handle successful uploads on complete
      console.log('Upload successful!');
    }
  );
});

For Android:

Uri file = Uri.fromFile(new File("path/to/images/rivers.jpg"));
StorageReference riversRef = storageRef.child("images/" + file.getLastPathSegment());
riversRef.putFile(file)
    .addOnSuccessListener(taskSnapshot -> {
        // Handle successful uploads on complete
        Log.d(TAG, "Upload successful");
    })
    .addOnFailureListener(e -> {
        // Handle unsuccessful uploads
        Log.w(TAG, "Upload failed", e);
    });

 

Step 6: Handling Permissions (Android Only)

 

• Ensure you have the necessary permissions in AndroidManifest.xml for accessing storage:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

• Don't forget to request permissions at runtime if targeting APIs above 23:

if (ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE) 
        != PackageManager.PERMISSION_GRANTED) {
    ActivityCompat.requestPermissions(this, 
          new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, 
          REQUEST_CODE);
}

 

Step 7: Enable Firebase Storage Rules

 

• Go to Firebase Console > Storage > Rules.
• Set rules to:

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

With this, you should be able to upload images to Firebase Storage securely and efficiently. Always test your integration thoroughly to ensure all flows (success and error) are handled correctly.