Pada dasarnya, upload file adalah sebuah aksi mengirimkan data dan biasanya menggunakan method POST/PATCH/PUT sesuai dengan kebutuhan. Pada tulisan kali ini kita akan membahas lebih jauh tentang bagaimana caranya mengimplementasi upload dengan axios dengan library ReactJS.
Langkah-langkah
Untuk mengimplementasikan axios post dengan multipart form data dari input tipe file di ReactJS, kita dapat mengikuti langkah-langkah berikut:
- Instal axios: Kita dapat menginstal axios dengan perintah npm atau yarn
npm i axios
yarn add axios
- Import axios: Pada file JavaScript kita, import axios dengan perintah
import axios from 'axios';
- Tambahkan event listener pada input file: Tambahkan event listener pada input file yang digunakan untuk menangkap file yang dipilih oleh pengguna.
- Buat fungsi untuk mengirim data: Buat fungsi yang akan digunakan untuk mengirim data ke server. Dalam fungsi tersebut, kita dapat menggunakan axios post dengan mengirimkan file yang dipilih oleh pengguna dalam format multipart form data.
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append("file", file);
try {
const response = await axios.post("URL", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
console.log(response.data);
} catch (error) {
console.log(error);
}
};
Penggunaan pada ReactJS input component
Upload setelah memilih file
Untuk memanggil fungsi handleSubmit yang dibuat di ReactJS input file, kita dapat menambahkan event listener pada elemen input file, seperti ini:
- Tambahkan atribut onChange pada elemen input file:
<input type="file" onChange={handleSubmit}/>
- Pada event listener onChange, kita dapat mengambil file yang dipilih oleh pengguna dan menyimpannya dalam state, seperti ini:
const handleSubmit = (event) => {
setFile(event.target.files[0]); // menyimpan file yang dipilih oleh pengguna dalam state
event.preventDefault(); // mencegah event default dari input file
// kode untuk mengirim data ke server menggunakan axios
};
- Pada saat user meng-upload file, fungsi handleSubmit akan dijalankan dan mengirim data ke server dengan axios post
Berikut kode lengkapnya:
import React, { useState } from "react";
import axios from "axios";
const FileUpload = () => {
const [file, setFile] = useState(null);
const handleChange = async (event) => {
setFile(event.target.files[0]);
const formData = new FormData();
formData.append("file", file);
try {
const response = await axios.post("URL", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
console.log(response.data);
} catch (error) {
console.log(error);
}
};
return <input type="file" onChange={handleChange} />;
};
export default FileUpload;
Upload setelah menekan tombol
Untuk memanggil fungsi handleSubmit dengan menggunakan tombol submit di ReactJS component input file, kita dapat menambahkan event listener pada elemen tombol submit, seperti ini:
- Tambahkan elemen tombol submit di component input file:
<form onSubmit={handleSubmit}>
<input type="file" onChange={(e) => setFile(e.target.files[0])}/>
<button type="submit">Upload</button>
</form>
- Pada event listener onSubmit yang ditambahkan pada elemen form, kita dapat mengambil file yang dipilih oleh pengguna dari state dan mengirimkannya ke server menggunakan axios post:
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append("file", file);
try {
const response = await axios.post("URL", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
console.log(response.data);
} catch (error) {
console.log(error);
}
};
- Pada saat user mengklik tombol submit, fungsi handleSubmit akan dijalankan dan mengirim data ke server dengan axios post.
Berikut kode lengkapnya:
import React, { useState } from "react";
import axios from "axios";
const FileUpload = () => {
const [file, setFile] = useState(null);
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append("file", file);
try {
const response = await axios.post("URL", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
console.log(response.data);
} catch (error) {
console.log(error);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="file" onChange={(e) => setFile(e.target.files[0])} />
<button type="submit">Upload</button>
</form>
);
};
export default FileUpload;
Mengirimkan data lain bersamaan dengan file upload
Untuk mengirim data lain seperti nama, tanggal lahir, dan nomor telepon bersamaan dengan file dalam satu kali post request menggunakan axios, kita dapat menambahkan data tersebut ke dalam objek FormData sebelum dikirim ke server.
- Tambahkan data lain ke dalam objek FormData: Kita dapat menambahkan data lain seperti nama, tanggal lahir, dan nomor telepon ke dalam objek FormData sebelum menambahkan file ke dalam objek tersebut.
const formData = new FormData();
formData.append("file", file);
formData.append("nama", nama);
formData.append("tanggalLahir", tanggalLahir);
formData.append("nomorTelepon", nomorTelepon);
- Tambahkan data lain yang diperlukan pada form: Kita dapat menambahkan input yang sesuai dengan data yang diperlukan pada form.
<form onSubmit={handleSubmit}>
<input type="file" onChange={(e) => setFile(e.target.files[0])}/>
<input type="text" placeholder="Nama" onChange={(e) => setNama(e.target.value)}/>
<input type="text" placeholder="Tanggal Lahir" onChange={(e) => setTanggalLahir(e.target.value)}/>
<input type="text" placeholder="Nomor Telepon" onChange={(e) => setNomorTelepon(e.target.value)}/>
<button type="submit">Upload</button>
</form>
- Kirim data lain beserta file menggunakan axios post: Kita dapat mengirim data lain beserta file menggunakan axios post dengan mengirimkan objek FormData yang sudah diisi dengan data lain dan file.
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append("file", file);
formData.append("nama", nama);
formData.append("tanggalLahir", tanggalLahir);
formData.append("nomorTelepon", nomorTelepon);
try {
const response = await axios.post("URL", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
console.log(response.data);
} catch (error) {
console.log(error);
}
};
Berikut kode lengkapnya:
import React, { useState } from "react";
import axios from "axios";
const FileUpload = () => {
const [file, setFile] = useState(null);
const [nama, setNama] = useState("");
const [tanggalLahir, setTanggalLahir] = useState("");
const [nomorTelepon, setNomorTelepon] = useState("");
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append("file", file);
formData.append("nama", nama);
formData.append("tanggalLahir", tanggalLahir);
formData.append("nomorTelepon", nomorTelepon);
try {
const response = await axios.post("URL", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
console.log(response.data);
} catch (error) {
console.log(error);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="file" onChange={(e) => setFile(e.target.files[0])} />
<input
type="text"
placeholder="Nama"
onChange={(e) => setNama(e.target.value)}
/>
<input
type="text"
placeholder="Tanggal Lahir"
onChange={(e) => setTanggalLahir(e.target.value)}
/>
<input
type="text"
placeholder="Nomor Telepon"
onChange={(e) => setNomorTelepon(e.target.value)}
/>
<button type="submit">Upload</button>
</form>
);
};
export default FileUpload;
Yang paling penting adalah pastikan server kita dapat menerima dan menangani data yang dikirim dalam format multipart form data, jika menggunakan ExpressJS kita dapat menggunakan package multer untuk memprosesnya.
Semoga Bermanfaat!