Hallo semua, kali ini saya coba sharing Cara Upload Image di Firebase Storage, tapi sebelumnya apa itu Firebase Storage? Jadi Firebase Storage adalah sebuah layanan dari Firebase yang memungkinkan kita untuk bisa mengupload file multimedia seperti gambar atau video yang disimpan di dalam bucket Google Cloud Storage dan nantinya kita bisa gunakan di dalam aplikasi kita.

Gimana keren banget kan salah satu fitur dari Firebase ini, nah langsung aja kita mulai.

Persiapan

Pertama, Pastikan kalian sudah punya akun firebase terlebih dahulu jika belum silahkan daftar disini.

Kedua, Buat project firebase baru disni dengan nama project bebas saja namun disini saya akan memberi nama pada project saya react-storage.

Ketiga, Setelah selesai siapkan Cloud Storage kalian di menu Storage pada sidebar kanan, klik mulai dan klik next juga atur region kalian.

Keempat, Jika sudah silahkan atur permission dari storage kalian pada tab rules dan atur seperti ini.

Kelima, Tambahkan aplikasi kalian ke firebase dan tulis nama aplikasi kalian sesuai nama project kalian atau jika berbeda juga tidak apa-apa.

Jika sudah selesai salin kode yang di dapat dari Firebase SDK

var firebaseConfig = {
 apiKey: "AIzaXXXXXXX",
 authDomain: "reactjsauthXXXX",
 databaseURL: "https://reactjsauthXXXX.com",
 projectId: "reactjsauth-e345b",
 storageBucket: "reactjsauthxxxxxx",
 messagingSenderId: "531xxxxx",
 appId: "1:5312xxxxxxxxx",
 measurementId: "G-xxxxxxx"
};

Implementasi Firebase

Pertama silahkan buat project baru atau jika sudah ada boleh di pakai saja.

npx create-react-app react-storage

Setelah itu install package react-firebase-file-upload di dalam project kalian

npm i react-firebase-file-uploader

Jika sudah buat file baru bernama firebase.js di dalam folder src lalu tambahkan kode yang di dapat dari Firebase SDK tadi.

import firebase from 'firebase';

var firebaseConfig = {
 apiKey: "AIzaXXXXXXX",
 authDomain: "reactjsauthXXXX",
 databaseURL: "https://reactjsauthXXXX.com",
 projectId: "reactjsauth-e345b",
 storageBucket: "reactjsauthxxxxxx",
 messagingSenderId: "531xxxxx",
 appId: "1:5312xxxxxxxxx",
 measurementId: "G-xxxxxxx"
};

export default firebase.initializeApp(firebaseConfig);

Jika sudah ubah kode di dalam file App.js seperti kode dibawah.

import React, { Component } from 'react';
import './App.css';
import firebase from './Firebase';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      status: null,
      files: null
    }
  }

  render() {
    const { status, files } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          {files && (
            <img src={files} alt="PRofile" />
          )}
          <FileUploader
            accept="image/*"
            name="avatar"
            randomizeFilename
            storageRef={firebase.storage().ref("/")}
            onUploadError={this.handleUploadError}
            onUploadSuccess {this.handleUploadSuccess}
          />

          <br/>
          <small>{status}</small>
       </header>
     </div>
   );
  }
}

Terakhir tambahkan beberapa baris fungsi pada app.js

handleUploadError = (val) => {
  this.setState({
    status: `File ${val} gagal di upload`
  })
}

handleUploadSuccess = (val) => {
  firebase.storage().ref("/")
  .child(val).getDownloadURL()
  .then(url => {
    this.setState({
      files: url,
      status: url,
    });
  });
}

Maka jika kita satukan semuanya kode yang kita tulis didalam file src/App.js akan seperti ini.

Oke disini saya mau jelaskan secara singkat terlebih dahulu, disni saya menggunakan package tambahan dari react-firebase-file-upload untuk proses upload file kita ke firebase storage, nah ketika proses upload berlangsung kita mengirimkan file pada path “/” di firebase storage kita, jika proses upload berhasil maka akan menjalankan fungsi handleUploadSuccess namun jika proses upload gagal maka akan menjalankan fungsi handleUploadError.

Kita juga bisa mendapatkan link untuk mengakses file yang sudah kita upload nantinya dan bisa kita tambahkan link tersebut pada aplikasi kita untuk merender gambar dari firebase storage.

Oke tadi kita sudah mencoba upload file multimedia kita ke firebase storage dan pastikan kalian coba juga cara upload file seperti video dan coba terapkan juga jika kalian punya fitur upload foto agar server kalian tidak berat :D

Untuk source code silahkan lihat disni.

Sekian dari saya dan sampai jumpa pada sesi sharing selanjutnya.