cover-img

React Firebase Upload image

firebaseConfig.js getStorage, firebase/storage, useState, storage, useEffect, refresh,

3 November, 2022

0

0

0

pakai css default
img
img
kita akan ngebatasi hanya iamge saja, kita masukkan accept
sekarang kita akan menampilkan preview image dari gambar yang kita upload
img
img
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
img
img
setelah mengetahui kita sudah bisa mengubah gambar menjadi base 64, maka selanjutnya kita akan buat state penampung preview image.
img
kita sudah bisa menampilkan preview image, selanjutnya kita akan upload image kita ke firestore.
img
img
img
img
selanjutnya kita import getstorage dari firebase
img
selanjutnya kita import storage, dan ref, uploadBytes from storage firebase, tambahkan id di element input1:52:44
img
img
img
img
selanjutnya kita akan menampilkan gambar yang sudah berhasil kita upload ke firebase.
menampilkan list gambar yang sudah kita upload ke console
img
selanjutnya kita akan buat use state untuk menyimpan data di website kita, tambahkan async kedalam listImage
img
img
img
img
selanjutnya biar refreshnyaotomatis kita kasih usestate refresh,
img
Languages
CSS 3

CSS 3

Javascript UI
React

React

Realtime Backend
Firebase

Firebase

0

0

0

Andi Ismail
Love Programing

More Articles

Showwcase is a professional tech network with over 0 users from over 150 countries. We assist tech professionals in showcasing their unique skills through dedicated profiles and connect them with top global companies for career opportunities.

© Copyright 2024. Showcase Creators Inc. All rights reserved.