Langkah Mudah Membuat Website Upload Sederhana dengan Firebase

Table of contents

Apa itu Firebase

Firebase adalah platform pengembangan aplikasi mobile dan web yang dimiliki oleh Google. Firebase menyediakan berbagai layanan dan alat untuk membantu pengembang dalam membuat, mengelola, dan mengoptimalkan aplikasi. Berikut adalah beberapa fitur utama Firebase:

  1. Authentication (Autentikasi): Firebase menyediakan layanan otentikasi pengguna yang mudah digunakan. Pengembang dapat mengimplementasikan otentikasi email/password, otentikasi pihak ketiga (Google, Facebook, Twitter, dll.), dan metode otentikasi lainnya.
  2. Realtime Database: Database Firebase adalah database NoSQL yang dapat diakses secara real-time. Ini memungkinkan aplikasi untuk menyinkronkan data secara instan antara pengguna dan perangkat.
  3. Cloud Firestore: Firestore adalah database Firebase yang memungkinkan penyimpanan dan pengambilan data dalam waktu nyata. Firestore memiliki fleksibilitas yang tinggi dan mendukung struktur data yang kaya.
  4. Storage: Firebase Storage menyediakan penyimpanan awan yang dapat digunakan untuk menyimpan dan mengambil file seperti gambar, video, dan dokumen.
  5. Hosting: Firebase Hosting memungkinkan pengembang untuk dengan mudah meng-host situs web statis mereka. Ini menyediakan HTTPS gratis, caching cepat, dan integrasi yang mulus dengan alat Firebase lainnya.
  6. Cloud Functions: Firebase Cloud Functions memungkinkan pengembang menulis dan menyematkan potongan kode ke dalam aplikasi mereka yang dijalankan secara otomatis sebagai respons terhadap peristiwa tertentu.
  7. Cloud Messaging (FCM): Firebase Cloud Messaging menyediakan layanan pemberitahuan push untuk aplikasi Android, iOS, dan web.
  8. Machine Learning: Firebase menyertakan fungsi pembelajaran mesin dengan ML Kit, yang memungkinkan integrasi mudah fitur pembelajaran mesin seperti pengenalan gambar, deteksi teks, dan lainnya.

Yang akan kita gunakan disini yaitu:

  1. Firebase Authentication: Hanya user ter-autentikasi yang bisa upload dan delete file
  2. Firebase Realtime Database: Untuk menyimpan data file yang sudah kita upload
  3. Firebase Storage: Untuk menyimpan file yang akan kita upload. (Sparks plan atau Free Plan hanya diberi 1GB storage)
  4. Firebase Hosting: Jika kamu ingin host website sederhana ini di Firebase.
Disini kita akan menggunakan local file saja tidak di upload ke hosting

Membuat Project dan Mendapatkan API Key

Sebelum kita membuat website upload nya kita perlu membuat project di Firebase terlebih dahulu.

  1. Kunjungi console.firebase.google.com dan Login menggunakan akun Google kamu dan buat project baru

Figure 1

  1. Isi nama project, bebas. Setelah itu klik Continue

Figure 2

  1. Disable saja Google Analytics nya karena kita tidak akan memakai fitur ini, setelah itu Create Project

Figure 3

  1. Tunggu beberapa saat sampai project nya berhasil dibuat dan akan otomatis masuk ke dashboard project yang sudah dibuat.

Figure 4 Figure 5

  1. Pada Project Overview klik icon gear dan pilih Project settings

Figure 6

  1. Klik icon pensil pada Default GCP resource location dan pilih asia-southeast2 dan klik Done.

Figure 7 Figure 8

asia-southeast2 adalah server negara Indonesia, tepatnya di Jakarta.
  1. Scroll kebawah dan klik pada icon code </>, untuk register web app

Figure 9

  1. App nickname bisa kamu isi apa saja, untuk yang lainnya bisa ditinggalkan default
    • Add Firebase SDK -> Continue
    • Install Firebase CLI -> Continue
    • Deploy to Firebase Hosting -> Continue to console

Figure 10 Figure 11

  1. Sekarang kita dapat config firebase nya.

Figure 12

Membuat User

Supaya yang bisa upload adalah user yang terdaftar maka kita harus membuat User terlebih dahulu

  1. Klik pada menu Build dan pilih Authentication
  2. Klik pada Get started

Figure 13

  1. Pilih Email/Password

Figure 14

  1. Enabe Email/Password dan Save

Figure 15 Figure 16

  1. Pilih tab Users dan Klik pada Add user

Figure 17

  1. Masukan Email dan Password untuk Login nanti dan Pilih Add user

Figure 18

  1. Copy User UID nya untuk settings Rules pada Firebase Storage dan Realtime Database

Figure 19

Buat Firebase Storage

  1. Klik pada menu Build dan pilih Storage
  2. Klik pada Get started

Figure 20

  1. Pilih Start in production mode dan Next dan pilih Next

Figure 21 Figure 22

  1. Buat folder dengan nama images dan videos

Figure 23

  1. Masuk ke tab Rules dan ganti dengan kode berikut lalu klik pada button Publish
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /images/{allPaths=**} {
      allow read: if true; // Allow read for everyone
      allow write: if request.auth != null &&
                      request.auth.uid == 'UID' && // Ganti dengan UID USER YANG SUDAH DIBUAT
                      request.resource.size < 5 * 1024 * 1024 &&
                      request.resource.contentType.matches('image/.*');
      allow delete: if request.auth != null && request.auth.uid == '123456'; // Ganti dengan UID USER YANG SUDAH DIBUAT
    }

    match /videos/{allPaths=**} {
      allow read: if true; // Allow read for everyone
      allow write: if request.auth != null &&
                      request.auth.uid == '123456' && // Ganti dengan UID USER YANG SUDAH DIBUAT
                      request.resource.size < 5 * 1024 * 1024 &&
                      request.resource.contentType.matches('video/mp4');
       allow delete: if request.auth != null && request.auth.uid == '123456'; // Ganti dengan UID USER YANG SUDAH DIBUAT
    }

    // Add rules for other folders or paths if needed

    // Default rule (if no other rule matches)
    match /{allPaths=**} {
      allow read: if true; // Allow read for everyone
      allow write, delete: if false;
    }
  }
}

Pada rules diatas, hanya UID 123456 yang bisa upload dan delete (write) files sedangkan yang lainnya hanya bisa read saja, hanya bisa upload format image dan video hanya bisa format mp4

Figure 24

Membuat Realtime Database

  1. Klik pada menu Build dan pilih Realtime Database
  2. Klik Create Database

Figure 25

  1. Pada Realtime Database location, Pilih negara Singapore lalu Next

Figure 26

  1. Pilih saja Start in locked mode lalu Enable

Figure 27

  1. kamu copy dan simpan Realtime Database URL nya

Figure 28

  1. Masuk ke tab Rules dan masukan kode berikut lalu klik pada button Publish
1
2
3
4
5
6

{
  "rules": {
    ".read": "auth.uid === '123456'",
    ".write": "auth.uid === '123456'"
  }
}

Pada rules diatas, hanya UID 123456 yang bisa read dan write ke database yang lainnya tidak bisa.

Figure 29

Setup Folder dan File

Buat folder baru dengan nama firebase dan buat folder dan file ini di dalamnya

  • firebase/index.html
  • firebase/css/style.css
  • firebase/js/config.js
  • firebase/js/copyToClipboard.js
  • firebase/js/deleteFile.js
  • firebase/js/listAll.js
  • firebase/js/listUploadedFiles.js
  • firebase/js/login.js
  • firebase/js/updateProgressBar.js
  • firebase/js/uploadFile.js

Jadinya struktur folder nya seperti ini:

firebase/
├── index.html
├── css
│   └── style.css
└── js
    ├── config.js
    ├── copyToClipboard.js
    ├── deleteFile.js
    ├── listAll.js
    ├── listUploadedFiles.js
    ├── login.js
    ├── updateProgressBar.js
    └── uploadFile.js

Setup Code HTML/CSS/JS

  1. Copy dan pastekan kode berikut ke index.html
index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase File Upload</title>
    <link href="css/style.css" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container mt-5">
      <div id="login" style="display: block;">
        <h2 class="mb-3">Login</h2>
        <div class="mb-3">
          <input type="email" class="form-control" id="emailInput" placeholder="Email" onkeypress="handleKeyPress(event, 'login')" />
        </div>
        <div class="mb-3">
          <input type="password" class="form-control" id="passwordInput" placeholder="Password" onkeypress="handleKeyPress(event, 'login')" />
        </div>
        <button class="btn btn-primary" onclick="login()">Login</button>
      </div>
      <div id="upload" style="display: none;">
        <div class="mb-3">
          <input type="file" class="form-control" id="fileInput" />
        </div>
        <button class="btn btn-success" onclick="uploadFile()">Upload File</button>
        <div class="progress mt-3" style="display: none;" id="uploadProgressBarContainer">
          <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="uploadProgressBar"></div>
        </div>
        <div id="uploadStatus" class="mt-2"></div>
        <button class="btn btn-danger mt-3" onclick="logout()">Logout</button>
        <div id="fileLink" style="display: none;">
          <h4 class="mt-3">Direct Link:</h4>
          <a id="downloadLink" target="_blank"></a>
        </div>
      </div>
      <button class="btn btn-info mt-3" id="copyToClipboardBtn" data-clipboard-target="#downloadLink" style="display: none;">Copy to Clipboard</button>
      <img id="uploadedImage" class="img-fluid mt-3" style="max-height: 200px; display: none;" />
      <div id="fileList" style="display: none;">
        <h2 class="mt-3">Uploaded Files</h2>
        <ul id="filesList" class="list-group">
          <li class="list-group-item">
            <div class="d-flex justify-content-between align-items-center">
              <div class="me-3">
                <img id="thumbnailImage" class="img-fluid" style="max-height: 100px; display: none;" />
                <a href="#" class="me-3" target="_blank"></a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-storage.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-database.js"></script>
    <!-- Copy To Clipboard JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
    <!-- CUSTOM SCRIPT & JANGAN DIGANTI URUTAN INI !!! -->
    <script src="js/config.js"></script>
    <script src="js/copyToClipboard.js"></script>
    <script src="js/login.js"></script>
    <script src="js/uploadFile.js"></script>
    <script src="js/updateProgressBar.js"></script>
    <script src="js/listUploadedFiles.js"></script>
    <script src="js/deleteFile.js"></script>
  </body>
</html>

  1. Copy dan pastekan kode berikut ke style.css
style.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

#progressBar {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  margin-top: 10px;
}

#uploadStatus {
  margin-top: 10px;
}

  1. Copy dan pastekan kode berikut ke config.js. Pada firebaseConfig ganti dengan config yang kamu dapatkan di langkah 9 pada Membuat Project dan Mendapatkan API Key
config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// Ganti value nya dengan config kamu masing-masing
const firebaseConfig = {
  apiKey: "AIzaSyBhW6y8EfqKYUyP7Di4NZ8TmbhTxQnS5eg",
  authDomain: "fir-upload-86d92.firebaseapp.com",
  databaseURL: "https://fir-upload-86d92-default-rtdb.asia-southeast1.firebasedatabase.app",
  projectId: "fir-upload-86d92",
  storageBucket: "fir-upload-86d92.appspot.com",
  messagingSenderId: "531276002779",
  appId: "1:531276002779:web:b14a763ec93a1569b1a3fe"
};

// Inisialisasi Firebase
firebase.initializeApp(firebaseConfig);

// Memanggil layanan firebase yang akan kita gunakan
const auth = firebase.auth();
const storage = firebase.storage();
const database = firebase.database();

  1. Copy dan pastekan code berikut ke copyToClipboard.js
copyToClipboard.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// Setelah menginisialisasi Firebase
const clipboard = new ClipboardJS('#copyToClipboardBtn');

// Tambahkan event listener untuk melihat success atau error saat menyalin
clipboard.on('success', function (e) {
  console.log('Teks berhasil disalin ke clipboard:', e.text);
  e.clearSelection();
});

clipboard.on('error', function (e) {
  console.error('Kesalahan menyalin teks ke clipboard:', e.trigger);
});

// Fungsi untuk menyalin tautan ke clipboard
function copyToClipboard(element) {
  const fullLink = element.href;
  
  // Buat element input sementara
  const tempInput = document.createElement('input');
  tempInput.value = fullLink;
  document.body.appendChild(tempInput);
  
  // Pilih dan salin teks
  tempInput.select();
  document.execCommand('copy');
  
  // Hapus element input sementara
  document.body.removeChild(tempInput);
  
  // Tampilkan pesan di console (opsional) 
  console.log('Tautan disalin ke clipboard:', fullLink);
}

  1. Copy dan pastekan kode berikut ke uploadFile.js
uploadFile.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

let fileUploadProgress = 0;

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  if (file) {
    let customFolder = '';

    // Periksa jenis file dan atur folder khusus sesuai dengan file yang di upload
    // Gambar akan diupload ke folder *images* sedangkan mp4 di folder *videos*
    if (file.type.startsWith('image/')) {
      customFolder = 'images';
    } else if (file.type === 'video/mp4') {
      customFolder = 'videos';
    } else {
      console.error('Jenis file tidak didukung!');
      return;
    }

    const storageRef = storage.ref();
    const fileRef = storageRef.child(`${customFolder}/${file.name}`);

    // Unggah file ke Firebase Storage
    const uploadTask = fileRef.put(file);

    // Perbarui progressbar
    uploadTask.on(
      'state_changed',
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        updateProgressBar(progress);
      },
      (error) => {
        console.error('Error mengunggah file:', error);
      },
      () => {
        // Unggah berhasil
        fileRef.getDownloadURL().then((downloadURL) => {
          console.log('File berhasil diunggah!');

          // Tambahkan informasi file ke Realtime Database
          const database = firebase.database();
          const filesRef = database.ref('uploadedFiles');

          // Buat unique key untuk file
          const fileKey = filesRef.push().key;

          // data file yang disimpan di database
          const fileData = {
            name: file.name,
            type: file.type,
            downloadURL: downloadURL,
            timestamp: firebase.database.ServerValue.TIMESTAMP,
          };

          // Tambahkan data file ke database
          filesRef.child(fileKey).set(fileData);

          // Tampilkan gambar atau video yang diunggah
          if (file.type.startsWith('image/')) {
            const uploadedImage = document.getElementById('uploadedImage');
            uploadedImage.src = downloadURL;
            uploadedImage.style.display = 'block';
          } else if (file.type === 'video/mp4') {
            // Tangani tampilan video jika diperlukan
          }

          // Menampilkan direct link pada file yang di upload
          document.getElementById('downloadLink').href = downloadURL;
          document.getElementById('downloadLink').innerText = downloadURL;
          document.getElementById('fileLink').style.display = 'block';

          // Reset proggress bar
          updateProgressBar(0);

          // Tampilkan tombol "Salin ke Clipboard"
          const copyToClipboardBtn = document.getElementById('copyToClipboardBtn');
          copyToClipboardBtn.style.display = 'block';
        });
      }
    );
  } else {
    console.error('Tidak ada file yang dipilih!');
  }
}

  1. Copy dan pastekan kode berikut ke updateProgressBar.js
updateProgressBar.js

1
2
3
4
5
6
7
8

function updateProgressBar(progress) {
  const progressBar = document.getElementById('uploadProgressBar');
  progressBar.style.width = progress + '%';
  progressBar.setAttribute('aria-valuenow', progress);
  progressBar.innerText = `${progress.toFixed(2)}%`;
  document.getElementById('uploadProgressBarContainer').style.display = 'block';
  document.getElementById('uploadStatus').innerText = `Upload Progress: ${progress.toFixed(2)}%`;
}

  1. Copy dan pastekan kode berikut ke listUploadedFiles.js
listUploadedFiles.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

function listUploadedFiles() {
  const filesList = document.getElementById('filesList');

  // Dapatkan data dari folder 'images' dan 'videos' di firebase storage
  const imagesFolder = 'images';
  const videosFolder = 'videos';
  const imagesRef = storage.ref(imagesFolder);
  const videosRef = storage.ref(videosFolder);

  // Fungsi untuk list file yang sudah kita upload
  const addFileToList = async (fileRef, folder) => {
    // daftar grup untuk setiap file
    const listItem = document.createElement('li');
    listItem.className = 'list-group-item';

    // Tampilkan nama file dan buat thumbnail untuk gambar
    if (fileRef.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
      try {
        const thumbnailUrl = await fileRef.getDownloadURL();
        const thumbnailImage = document.createElement('img');
        thumbnailImage.src = thumbnailUrl;
        thumbnailImage.className = 'img-fluid';
        thumbnailImage.style.maxHeight = '80px';
        thumbnailImage.style.marginRight = '10px';
        thumbnailImage.style.borderRadius = '8px';
        listItem.appendChild(thumbnailImage);
      } catch (error) {
        console.error('Error mendapatkan Thumbnail URL:', error);
      }
    }

    // Buat direct link untuk file
    const fileLink = document.createElement('a');
    fileLink.href = await fileRef.getDownloadURL();
    fileLink.target = '_blank';
    fileLink.innerText = fileRef.name; // Tampilkan nama file sebagai konten teks
    
    // Buat atribut khusus ke tautan untuk mengidentifikasinya nanti
    fileLink.setAttribute('data-filepath', fileRef.fullPath);

    // Buat tombol "Copy to Clipboard"
    const copyButton = document.createElement('button');
    copyButton.className = 'btn btn-info ms-3';
    copyButton.innerText = 'Copy to Clipboard';
    copyButton.addEventListener('click', () => copyToClipboard(fileLink));

    // Buat tombol hapus
    const deleteButton = document.createElement('button');
    deleteButton.className = 'btn btn-danger ms-3';
    deleteButton.innerText = 'Delete';
    deleteButton.addEventListener('click', () => deleteFile(fileLink));

    // Buat link, copy code, dan delete button
    listItem.appendChild(fileLink);
    listItem.appendChild(copyButton);
    listItem.appendChild(deleteButton);

    // List files
    filesList.appendChild(listItem);
  };

  // Daftar semua item di folder 'images'
  imagesRef.listAll().then((imagesResult) => {
    imagesResult.items.forEach(async (imageRef) => {
      await addFileToList(imageRef, imagesFolder);
    });
  }).catch((error) => {
    console.error(`Error listing files in folder ${imagesFolder}:`, error);
  });

  // Daftar semua item di folder 'videos'
  videosRef.listAll().then((videosResult) => {
    videosResult.items.forEach(async (videoRef) => {
      await addFileToList(videoRef, videosFolder);
    });
  }).catch((error) => {
    console.error(`Error listing files in folder ${videosFolder}:`, error);
  });
}

  1. Copy dan pastekan kode berikut ke deleteFile.js
deleteFile.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function deleteFile(fileLink) {
  // Dapatkan nilai atribut khusus untuk mengidentifikasi tautan
  const filePath = fileLink.getAttribute('data-filepath');

  // Referensi ke file di penyimpanan
  const fileRef = storage.ref(filePath);

  // Hapus file dari penyimpanan
  fileRef.delete().then(() => {
    console.log('File berhasil dihapus dari penyimpanan!');
    
    // Hapus file dari Realtime Database
    const database = firebase.database();
    const filesRef = database.ref('uploadedFiles');

    // Temukan data file di database berdasarkan path file
    filesRef.orderByChild('downloadURL').equalTo(fileLink.href).once('value', (snapshot) => {
      snapshot.forEach((childSnapshot) => {
        // Hapus data file dari database
        filesRef.child(childSnapshot.key).remove().then(() => {
          console.log('Data file berhasil dihapus dari database!');
        }).catch((error) => {
          console.error('Error menghapus data file dari database:', error);
        });
      });
    });

    // Hapus file dari daftar yang ditampilkan
    const listItem = fileLink.parentElement;

    if (listItem) {
      listItem.remove();
    } else {
      console.error('Elemen daftar tidak ditemukan untuk dihapus.');
    }
  }).catch((error) => {
    console.error('Error menghapus file dari penyimpanan:', error);
  });
}

  1. Copy dan pastekan kode berikut ke login.js
login.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

auth.onAuthStateChanged(user => {
  if (user) {
      document.getElementById('login').style.display = 'none';
      document.getElementById('upload').style.display = 'block';
      document.getElementById('fileList').style.display = 'block'; // Tampilkan bagian daftar file
      listUploadedFiles(); // Menampilkan daftar file yang diunggah saat sudah ter-authentikasi
  } else {
      document.getElementById('login').style.display = 'block';
      document.getElementById('upload').style.display = 'none';
      document.getElementById('fileList').style.display = 'none'; // Sembunyikan bagian daftar file
  }
});

function handleKeyPress(event, action) {
  if (event.key === 'Enter') {
    event.preventDefault();
    if (action === 'login') {
      login();
    }
  }
}

function login() {
  const emailInput = document.getElementById('emailInput').value;
  const passwordInput = document.getElementById('passwordInput').value;

  // Login menggunakan email dan password
  auth.signInWithEmailAndPassword(emailInput, passwordInput)
      .catch(error => {
          console.error('Error saat login:', error);
      });
  // Code ini bisa dihapus karena menampilkan password di console
  console.log('Email:', emailInput);
  console.log('Password:', passwordInput);
}

function logout() {
  auth.signOut();
  clearDisplay();
}

function clearDisplay() {
  // Hide element ketika logout
  document.getElementById('uploadProgressBarContainer').style.display = 'none';
  document.getElementById('uploadStatus').innerText = '';
  document.getElementById('uploadedImage').style.display = 'none';
  document.getElementById('fileList').style.display = 'none';
  document.getElementById('fileLink').style.display = 'none';
  document.getElementById('copyToClipboardBtn').style.display = 'none';

  // Bersihkan daftar file
  const filesList = document.getElementById('filesList');
  while (filesList.firstChild) {
    filesList.removeChild(filesList.firstChild);
  }
}

Test website secara local

Karena ini static website jadinya kita bisa menjalankannya secara lokal, tidak perlu server hanya memerlukan browser versi terbaru saja.

  1. Buka index.html pada browser kamu
  2. Login dengan Email/Password yang sudah dibuat dilangkah 6 pada Membuat User

Figure 30

  1. Kamu coba untuk upload file dengan cara klik Choose File dan setelah itu klik Upload File

Figure 31

  1. Jika berhasil maka akan tampil seperti ini

Figure 32 Figure 33

  1. Cek firebase storage folder images

Figure 34

  1. Cek juga database nya

Figure 35

  1. Coba delete file yang sudah diupload

Figure 36

Itulah tutorial Langkah Mudah Membuat Website Upload Sederhana dengan Firebase, jika kamu ingin membuat website ini bisa diakses, kamu bisa deploy ke firebase hosting.

Bantu bagikan halaman ini ke:
© 2020 - 2024 rmdhnreza.my.id
Built with Hugo
Theme Stack designed by Jimmy