Dosya yükleme, herhangi bir web uygulamasında çok yaygın bir işlemdir ve konu dosyaların ve kaynakların internet üzerinden (tarayıcıya) yüklenmesi söz konusu olduğunda işler biraz stresli olabilir. Neyse ki, HTML 5 ile birlikte, genellikle kullanıcıların verileri değiştirmesine olanak tanıyan form kontrolüyle birlikte gelen giriş öğeleri, kaynakların yüklenmesini basitleştirmede çok kullanışlı hale gelebilir.
Bu makalede, vanilya JavaScript kullanarak dosya yükleme işlemlerini nasıl gerçekleştireceğimize daha yakından bakacağız. Amaç size harici bir kütüphaneye ihtiyaç duymadan bir dosya yükleme bileşeninin nasıl oluşturulacağını öğretmek ve ayrıca JavaScript'teki bazı temel kavramları öğrenmektir. Ayrıca bir yükleme işlemi gerçekleşirken ilerleme durumunu nasıl göstereceğinizi de öğreneceksiniz.
Haydi başlayalım millet!
Proje Kurulumu
Öncelikle tercih ettiğiniz dizinde proje için yeni bir klasör oluşturun:
$ mkdir file-upload-progress-bar-javascript
Bunu yaptıktan sonra şimdi oluşturalım index.html, main.css, ve app.js projemiz için tüm işaretlemeyi yazacağımız dosyalar.
$ touch index.html && touch main.css && touch app.js
Artık temel bir HTML şablonu oluşturarak dosya yükleme yapısını oluşturmaya başlayabiliriz. ve etiketler:
<!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>
Daha sonra proje için temel stilleri ekliyoruz. main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Uygulamalarımızın görünümünü geliştirmek için, resmi font harika kütüphanesi web sitesinde oluşturulabilecek bir kit kodu aracılığıyla projemize ekleyebileceğimiz harika font kütüphanesindeki simgelerden yararlanacağız.
Şimdi, index.html güncellenir ve main.css dosya bağlantılı:
<!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>
Dosya yükleyicinin yapısını oluşturarak devam ediyoruz:
<!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>
Daha sonra güncellemek için aşağıdaki kodları kopyalayıp yapıştırın. 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;
}
Artık bileşen tarayıcıda şöyle görünüyor:
En iyi uygulamalar, endüstri tarafından kabul edilen standartlar ve dahil edilen hile sayfası ile Git'i öğrenmek için uygulamalı, pratik kılavuzumuza göz atın. Googling Git komutlarını durdurun ve aslında öğrenmek o!
Projemize yükleme için gerekli işlevselliği eklemek için artık şunu kullanıyoruz: app.js Projemize hayat veren JavaScript kodlarını yazdığımız dosya.
Aşağıdakileri kopyalayın/yapıştırın 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);
}
Yaptığımız şey, dosya giriş öğesini kullanarak seçilen bir dosyayı okuyabilmek ve DOM'da yeni bir dosya listesi oluşturabilmektir. Dosya yüklenirken ilerleme düzeyi gösterilir ve dosyanın yüklenmesi tamamlandığında ilerleme durumu yüklendi olarak değişir.
Daha sonra şunu da ekliyoruz uploadFile.php Dosya göndermek için bir uç noktayı taklit etmek üzere projemize. Bunun nedeni projemizde eşzamansızlığı simüle ederek ilerleme yükleme etkisini elde etmektir.
<?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);
?>
Sonuç
Bu makalenin bu noktasına gelmeniz harika oldu.
Bu eğitimde dosya yükleme bileşenini nasıl oluşturacağımızı ve ona bir ilerleme çubuğu eklemeyi öğrendik. Bu, web siteleri oluşturduğunuzda ve kullanıcılarınızın kendilerini dahil hissetmelerini ve bir dosyanın yüklenmesinin ne kadar yavaş veya hızlı olduğunu anlamalarını istediğinizde yararlı olabilir. İsterseniz bu projeyi yeniden kullanmaktan çekinmeyin.
Bu öğreticiyi takip ederken takılıp kalırsanız, diğer geliştiricilerden yardım almak için projenizi GitHub'a yüklemenizi veya dm de gönderebilmenizi öneririm.
Burada bir bağlantı Proje için GitHub deposu.
