Cara handle upload gambar di React JS (Client Side)

Hello semuanya,

Perkenalkan saya albiruni seorang frontend developer. seperti biasa pada hari minggu saya berbagi tutorial teknis mengenai frontend. kali ini saya sharing bagaimana cara handle upload gambar di reactjs. Semoga bermanfaat ya.

Oke langsung saja kita siapkan dulu project react js kita.

npx create-react-app react-uploader

Setelah itu, pada App.js kita langsung saja bikin state untuk handle upload file nya.

const [image, setImage] = useState(null);

const [previewImage, setPreviewImage] = useState("");

Jangan lupa import useState() nya ya. 

Oke, disini kita buat 2 state, state "image" digunakan untuk menghandle data image sebelum diupload, karena kita membutuhkan informasi file nya dari event.target.files sehingga kita bisa mengirimkannya ke backend. oke kita lanjut ke state yang kedua.

State yang kedua digunakan untuk menampilkan preview image sebelum di upload, sehingga user bisa melihat apakah gambar yang diupload sudah benar apa belum. state ini akan langsung dimasukkan ke element <img /> karena berbentuk url nantinya.

Oke sekarang kita coba coding element jsx nya ya.

return (

<div className="App">

<div>

<img width={300} src={previewImage} alt="" />

<input type="file" onChange={handleUpload} />

</div>

</div>

);

Seperti yang kalian lihat, kode diatas adalah element jsx sederhana. terdapat 2 div, satu img, dan satu input.

<img width={300} src={previewImage} alt="" />

untuk element img disini ada 3 props yaitu width, src dan alt. untuk props src langsung mengambil nilai dari state previewImage sehingga dapat menampilkan gambar secara langsung nantinya.

<input type="file" onChange={handleUpload} />

untuk element input hanya ada 2 props, type dan onChange. untuk props onChange ini akan berisi fungsi yang akan kita buat sebentar lagi. jadi ketika ada perubahan dalam input ini, fungsi tersebut akan selalu dipanggil dan mengupdate datanya.

Setelah membuat jsx nya, kita akan coding fungsi handleUpload nya

function handleUpload(e) {

const toPreview = URL.createObjectURL(e.target.files[0]);

setPreviewImage(toPreview);

setImage(e.target.files[0]);

}

Ini adalah fungsi handleUpload yang akan menangkap semua perubahan pada element input. 

const toPreview = URL.createObjectURL(e.target.files[0]);

disini terdapat variable contstant toPreview, variable ini akan berisi url gambar di sisi client, jika kita console.log hasilnya akan sepeti ini

contoh:

http://localhost:3000/86a5335f-26c3-49d0-9791-f452236d8fa7

Url ini bisa kita simpan langsung ke state previewImage sehingga gambar yang diupload dapat ditampilkan ke browser.

setPreviewImage(toPreview);

setImage(e.target.files[0]);

Setelah itu kita bisa menyimpan previewImage dan image nya, menggunakan fungsi set seperti contoh diatas.

Jika kita jalankan maka hasilnya akan menjadi seperti ini.

Yap, akhirnya selesai juga nih artikel, semoga tutorial nya bermanfaat ya. Kalo kalian suka dengan artikel seperti ini jangan lupa pantengin trus blog.birunidev.com ya, biar kamu dapet tutorial teknis frontend yang lengkap dan mudah dimengerti. 

Sekian dari saya, sebarkan artikel ini ke temen-temen kalian biar kita bisa pinter bareng. Terimakasih dan sampai jumpa.