![cover-img](https://project-assets.showwcase.com/1420x/26705/1667490803921-upload%2520firebase.jpg?type=webp)
React Firebase Upload image
firebaseConfig.js getStorage, firebase/storage, useState, storage, useEffect, refresh,
3 November, 2022
0
0
0
Contributors
pakai css default
![img](https://user-images.githubusercontent.com/78794419/199335175-7eaf3a8a-fbb9-4812-88c9-bba88f59126d.png)
![img](https://user-images.githubusercontent.com/78794419/199335686-4d4e5be2-309f-46c0-9dd8-4df94975715a.png)
kita akan ngebatasi hanya iamge saja, kita masukkan accept
sekarang kita akan menampilkan preview image dari gambar yang kita upload
![img](https://user-images.githubusercontent.com/78794419/199338141-16c2241c-4cd8-4981-8aba-6f93f603ffe3.png)
![img](https://user-images.githubusercontent.com/78794419/199338473-8a885d08-b65a-4c1e-85fa-b19f629705e7.png)
image kita berada di array dan buka object
tambahkan ,ultiple untuk menambahkan image sekaligus. ketika memilih 3 files sekaligus, ini menjadi alasan kenapa files ini sebuah array.
![img](https://user-images.githubusercontent.com/78794419/199519022-247a0954-9659-4989-a79e-bc3b6d6708ef.png)
![img](https://user-images.githubusercontent.com/78794419/199520762-0afa542d-3201-48b2-9060-b129b576fdaa.png)
![img](https://user-images.githubusercontent.com/78794419/199522051-53812903-8fdb-44bf-8d13-3b05d09c8eb3.png)
setelah mengetahui kita sudah bisa mengubah gambar menjadi base 64, maka selanjutnya kita akan buat state penampung preview image.
![img](https://user-images.githubusercontent.com/78794419/199610275-22e5f1fd-df84-4969-9468-8649b3ba3493.png)
kita sudah bisa menampilkan preview image, selanjutnya kita akan upload image kita ke firestore.
![img](https://user-images.githubusercontent.com/78794419/199610779-26257882-3dbd-4ed3-ada8-14d74387302f.png)
![img](https://user-images.githubusercontent.com/78794419/199613015-e40d846e-cc4b-449d-a435-82d635c7953a.png)
![img](https://user-images.githubusercontent.com/78794419/199613721-d0e0bb69-d9f3-4130-8761-152e54bd8548.png)
![img](https://user-images.githubusercontent.com/78794419/199614043-fbab057b-2e11-4eb0-9298-c666088272d8.png)
selanjutnya kita import getstorage dari firebase
![img](https://user-images.githubusercontent.com/78794419/199616221-1afba415-579d-478d-bbda-03caf7496db5.png)
selanjutnya kita import storage, dan ref, uploadBytes from storage firebase, tambahkan id di element input1:52:44
![img](https://user-images.githubusercontent.com/78794419/199618163-1430ace5-514e-4b2e-af72-363248f9ee0c.png)
![img](https://user-images.githubusercontent.com/78794419/199618984-07f79365-f22f-40e7-aca3-0f54b4b6b3a3.png)
![img](https://user-images.githubusercontent.com/78794419/199622461-9e468b0d-0e81-4579-8ccb-dc5443921d97.png)
![img](https://user-images.githubusercontent.com/78794419/199622564-ac4aaff7-b9f6-4dad-b361-df826e21d45e.png)
selanjutnya kita akan menampilkan gambar yang sudah berhasil kita upload ke firebase.
menampilkan list gambar yang sudah kita upload ke console
![img](https://user-images.githubusercontent.com/78794419/199741582-3f630183-2e37-491d-94cf-f9f299079c83.png)
selanjutnya kita akan buat use state untuk menyimpan data di website kita, tambahkan async kedalam listImage
![img](https://user-images.githubusercontent.com/78794419/199748782-e1d91a81-9869-4bb4-b54a-9e1401dc307e.png)
![img](https://user-images.githubusercontent.com/78794419/199750927-8798cfcf-cff3-4f8f-a250-ab358220d1a4.png)
![img](https://user-images.githubusercontent.com/78794419/199752361-b2c013b3-6f9f-4343-a38b-a8b31aaa536b.png)
![img](https://user-images.githubusercontent.com/78794419/199758387-5fbd81c6-af24-43e1-a08f-11ae3c62452e.png)
selanjutnya biar refreshnyaotomatis kita kasih usestate refresh,
![img](https://user-images.githubusercontent.com/78794419/199769333-8cbb4f9a-96d7-488b-8944-ed28260ab9c7.png)
Languages
CSS 3
Javascript UI
React
Realtime Backend
Firebase