Pengunggahan file sangat umum untuk aplikasi web apa pun dan ketika harus mengunggah file dan sumber daya melalui internet (di browser), banyak hal bisa membuat stres. Untungnya, dengan HTML 5, elemen masukan yang biasanya dilengkapi dengan kontrol formulir untuk memungkinkan pengguna memodifikasi data dapat menjadi sangat berguna dalam menyederhanakan pengunggahan sumber daya.
Pada artikel ini, kita akan melihat lebih dekat bagaimana menangani pengunggahan file menggunakan vanilla JavaScript. Tujuannya adalah untuk mengajari Anda cara membuat komponen pengunggahan file tanpa memerlukan pustaka eksternal dan juga mempelajari beberapa konsep inti dalam JavaScript. Anda juga akan mempelajari cara menampilkan status progres unggahan saat itu terjadi.
Mari kita mulai, teman-teman!
Pengaturan Proyek
Pertama dan terpenting, di direktori pilihan Anda, buat folder baru untuk proyek:
$ mkdir file-upload-progress-bar-javascript
Setelah melakukannya, sekarang mari kita membuat index.html, main.css, dan app.js file tempat kami akan menulis semua markup untuk proyek kami.
$ touch index.html && touch main.css && touch app.js
Sekarang kita dapat mulai membangun struktur untuk upload file dengan membuat template HTML dasar dengan dan tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
Selanjutnya, kami menambahkan gaya dasar untuk proyek di main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Untuk menyempurnakan tampilan aplikasi kami, kami akan menggunakan ikon dari perpustakaan font mengagumkan yang dapat kami tambahkan ke proyek kami melalui kode kit yang dapat dibuat di situs web resmi perpustakaan font mengagumkan.
Sekarang, index.html diperbarui, dan main.css file ditautkan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/355573397a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css">
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
Kami melanjutkan dengan membangun struktur untuk pengunggah file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/355573397a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body>
<div class="file-upload__wrapper">
<header>File Uploader JavaScript with Progress</header>
<div class="form-parent">
<form action="#" class="file-upload__form">
<input class="file-input" type="file" name="file" hidden />
<i class="fas fa-cloud-upload-alt"></i>
<p>Browse File to Upload</p>
</form>
<div>
<section class="progress-container"></section>
<section class="uploaded-container"></section>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Kemudian, salin/tempel kode berikut untuk memperbarui main.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #cb67e9;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
}
::selection {
color: white;
background: #cb67e9;
}
.file-upload__wrapper {
width: 640px;
background: #fff;
border-radius: 5px;
padding: 35px;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.05);
}
.file-upload__wrapper header {
color: #cb67e9;
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}
.form-parent {
display: flex;
align-items: center;
gap: 30px;
justify-content: center;
}
.file-upload__wrapper form.file-upload__form {
height: 150px;
border: 2px dashed #cb67e9;
cursor: pointer;
margin: 30px 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: 6px;
padding: 10px;
}
form.file-upload__form :where(i, p) {
color: #cb67e9;
}
form.file-upload__form i {
font-size: 50px;
}
form.file-upload__form p {
font-size: 1rem;
margin-top: 15px;
}
section .row {
background: #e9f0ff;
margin-bottom: 10px;
list-style: none;
padding: 15px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 6px;
}
section .row i {
font-size: 2rem;
color: #cb67e9;
}
section .details span {
font-size: 1rem;
}
.progress-container .row .content-wrapper {
margin-left: 15px;
width: 100%;
}
.progress-container .details {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 7px;
}
.progress-container .content .progress-bar-wrapper {
height: 10px;
width: 100%;
margin-bottom: 5px;
background: #fff;
border-radius: 30px;
}
.content .progress-bar .progress-wrapper {
height: 100%;
background: #cb67e9;
width: 0%;
border-radius: 6px;
}
.uploaded-container {
overflow-y: scroll;
max-height: 230px;
}
.uploaded-container.onprogress {
max-height: 160px;
}
.uploaded-container .row .content-wrapper {
display: flex;
align-items: center;
}
.uploaded-container .row .details-wrapper {
display: flex;
flex-direction: column;
margin-left: 15px;
}
.uploaded-container .row .details-wrapper .name span {
color: green;
font-size: 10px;
}
.uploaded-container .row .details-wrapper .file-size {
color: #404040;
font-size: 11px;
}
Sekarang, komponennya terlihat seperti ini di browser:
Lihat panduan praktis dan praktis kami untuk mempelajari Git, dengan praktik terbaik, standar yang diterima industri, dan termasuk lembar contekan. Hentikan perintah Googling Git dan sebenarnya belajar itu!
Untuk menambahkan fungsionalitas yang diperlukan untuk mengunggah di proyek kami, kami sekarang menggunakan app.js file, tempat kami menulis kode JavaScript yang menghidupkan proyek kami.
Salin/tempel yang berikut ini ke app.js:
const uploadForm = document.querySelector(".file-upload__form");
const myInput = document.querySelector(".file-input");
const progressContainer = document.querySelector(".progress-container");
const uploadedContainer = document.querySelector(".uploaded-container");
uploadForm.addEventListener("click", () => {
myInput.click();
});
myInput.onchange = ({ target }) => {
let file = target.files[0];
if (file) {
let fileName = file.name;
if (fileName.length >= 12) {
let splitName = fileName.split(".");
fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
}
uploadFile(fileName);
}
};
function uploadFile(name) {
let xhrRequest = new XMLHttpRequest();
const endpoint = "uploadFile.php";
xhrRequest.open("POST", endpoint);
xhrRequest.upload.addEventListener("progress", ({ loaded, total }) => {
let fileLoaded = Math.floor((loaded / total) * 100);
let fileTotal = Math.floor(total / 1000);
let fileSize;
fileTotal < 1024
? (fileSize = fileTotal + " KB")
: (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB");
let progressMarkup = `
${name} | Uploading
${fileLoaded}%
`;
uploadedContainer.classList.add("onprogress");
progressContainer.innerHTML = progressMarkup;
if (loaded == total) {
progressContainer.innerHTML = "";
let uploadedMarkup = `
${name} | Uploaded
${fileSize}
`;
uploadedContainer.classList.remove("onprogress");
uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup);
}
});
let data = new FormData(uploadForm);
xhrRequest.send(data);
}
Apa yang telah kami lakukan adalah dapat membaca file yang telah dipilih menggunakan elemen input file, dan membuat daftar file baru di DOM. Saat file sedang diunggah, tingkat kemajuan ditampilkan, dan saat file selesai diunggah, status kemajuan berubah menjadi diunggah.
Kemudian, kami juga menambahkan an uploadFile.php ke proyek kami untuk mengejek titik akhir untuk mengirim file. Alasannya adalah untuk mensimulasikan asinkronitas dalam proyek kami sehingga kami mendapatkan efek pemuatan progres.
<?php
$file_name = $_FILES['file']['name'];
$tmp_name = $_FILES['file']['tmp_name'];
$file_up_name = time().$file_name;
move_uploaded_file($tmp_name, "files/".$file_up_name);
?>
Kesimpulan
Anda luar biasa untuk sampai ke titik artikel ini.
Dalam tutorial ini, kita telah mempelajari cara membuat komponen pengunggahan file dan menambahkan bilah progres ke dalamnya. Ini dapat berguna ketika Anda membangun situs web dan ingin pengguna Anda merasa disertakan dan mengetahui seberapa lambat atau cepat proses pengunggahan file. Jangan ragu untuk menggunakan kembali proyek ini jika Anda mau.
Jika Anda mengalami kebuntuan saat mengikuti tutorial ini, saya sarankan Anda mengunggah proyek Anda di GitHub untuk mendapatkan bantuan dari pengembang lain atau Anda juga dapat mengirim dm juga.
Berikut ini adalah link ke Repo GitHub untuk proyek.
