فائل اپ لوڈ کسی بھی ویب ایپلیکیشن کے لیے بہت عام ہے اور جب بات انٹرنیٹ پر (براؤزر پر) فائلوں اور وسائل کو اپ لوڈ کرنے کی ہو تو چیزیں کچھ دباؤ کا شکار ہو سکتی ہیں۔ خوش قسمتی سے، ایچ ٹی ایم ایل 5 کے ساتھ، ان پٹ عناصر جو عام طور پر فارم کنٹرول کے ساتھ آتے ہیں تاکہ صارفین کو ڈیٹا میں ترمیم کرنے کی اجازت دی جائے، یہ وسائل اپ لوڈ کرنے کو آسان بنانے میں بہت کارآمد ثابت ہو سکتے ہیں۔
اس آرٹیکل میں، ہم ونیلا جاوا اسکرپٹ کا استعمال کرتے ہوئے فائل اپ لوڈز کو ہینڈل کرنے کے طریقے پر گہری نظر ڈالیں گے۔ مقصد یہ ہے کہ آپ کو یہ سکھانا ہے کہ کس طرح کسی بیرونی لائبریری کی ضرورت کے بغیر فائل اپ لوڈ کا جزو بنایا جائے اور JavaScript میں کچھ بنیادی تصورات بھی سیکھیں۔ آپ یہ بھی سیکھیں گے کہ اپ لوڈ ہونے کے ساتھ ہی اس کی پیشرفت کی حیثیت کیسے دکھائی جائے۔
آئیے شروع کریں، لوگو!
پروجیکٹ سیٹ اپ
سب سے پہلے، اپنی ترجیحی ڈائرکٹری میں، پروجیکٹ کے لیے ایک نیا فولڈر بنائیں:
$ mkdir file-upload-progress-bar-javascript
ایسا کرنے کے بعد، آئیے اب تخلیق کرتے ہیں۔ index.html, main.css، اور app.js فائلیں جہاں ہم اپنے پروجیکٹ کے لیے تمام مارک اپ لکھیں گے۔
$ touch index.html && touch main.css && touch app.js
اب ہم ایک بنیادی HTML ٹیمپلیٹ بنا کر فائل اپ لوڈ کے لیے ڈھانچہ بنانا شروع کر سکتے ہیں۔ اور ٹیگز:
<!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>
اگلا، ہم اس منصوبے کے لیے بیس اسٹائل شامل کرتے ہیں۔ main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
اپنی ایپلی کیشنز کی شکل کو بہتر بنانے کے لیے، ہم فونٹ کی حیرت انگیز لائبریری کے آئیکنز کا استعمال کریں گے جنہیں ہم ایک کٹ کوڈ کے ذریعے اپنے پروجیکٹ میں شامل کر سکتے ہیں جسے آفیشل فونٹ کی زبردست لائبریری ویب سائٹ پر بنایا جا سکتا ہے۔
اب، index.html اپ ڈیٹ کیا جاتا ہے، اور main.css فائل منسلک ہے:
<!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>
ہم فائل اپ لوڈر کے لیے ڈھانچہ بنا کر جاری رکھتے ہیں:
<!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>
پھر، اپ ڈیٹ کرنے کے لیے درج ذیل کوڈز کو کاپی/پیسٹ کریں۔ 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;
}
اب، براؤزر پر جزو اس طرح لگتا ہے:
بہترین طرز عمل، صنعت کے لیے منظور شدہ معیارات، اور چیٹ شیٹ کے ساتھ Git سیکھنے کے لیے ہمارے ہینڈ آن، عملی گائیڈ کو دیکھیں۔ گوگلنگ گٹ کمانڈز کو روکیں اور اصل میں سیکھ یہ!
اپنے پروجیکٹ میں اپ لوڈ کرنے کے لیے مطلوبہ فعالیت شامل کرنے کے لیے، اب ہم استعمال کرتے ہیں۔ app.js فائل، جہاں ہم جاوا اسکرپٹ کوڈ لکھتے ہیں جو ہمارے پروجیکٹ کو زندگی بخشتے ہیں۔
درج ذیل کو کاپی/پیسٹ کریں۔ 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);
}
ہم نے جو کچھ کیا ہے وہ اس فائل کو پڑھنے کے قابل ہونا ہے جسے فائل ان پٹ عنصر کے استعمال سے منتخب کیا گیا ہے، اور DOM پر فائلوں کی ایک نئی فہرست بنائیں۔ جب فائل اپ لوڈ ہو رہی ہوتی ہے، تو پروگریس لیول دکھایا جاتا ہے، اور جب فائل اپ لوڈ مکمل ہو جاتی ہے، تو پروگریس سٹیٹس اپ لوڈ ہو جاتی ہے۔
پھر، ہم بھی ایک شامل کریں uploadFile.php فائلیں بھیجنے کے لیے اینڈپوائٹ کا مذاق اڑانے کے لیے ہمارے پروجیکٹ پر۔ اس کی وجہ یہ ہے کہ ہم اپنے پراجیکٹ میں غیر مطابقت پذیری کی تقلید کریں تاکہ ہمیں پروگریس لوڈنگ اثر حاصل ہو۔
<?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);
?>
نتیجہ
اس مضمون کے اس مقام تک پہنچنے کے لیے آپ کو بہت اچھا لگا۔
اس ٹیوٹوریل میں، ہم نے سیکھا ہے کہ فائل اپ لوڈ کا جزو کیسے بنایا جاتا ہے اور اس میں پروگریس بار شامل کرنا ہے۔ یہ اس وقت کارآمد ثابت ہو سکتا ہے جب آپ ویب سائٹس بناتے ہیں اور چاہتے ہیں کہ آپ کے صارفین اس میں شامل محسوس کریں اور اس بات کا احساس حاصل کریں کہ فائل کو اپ لوڈ کرنا کتنا سست یا تیز ہو رہا ہے۔ اگر آپ چاہیں تو بلا جھجھک اس پروجیکٹ کو دوبارہ استعمال کریں۔
اگر آپ اس ٹیوٹوریل کی پیروی کرتے ہوئے پھنس جاتے ہیں، تو میرا مشورہ ہے کہ آپ اپنے پروجیکٹ کو دوسرے ڈویلپرز کی مدد کے لیے GitHub پر اپ لوڈ کریں یا آپ ڈی ایم بھی بھیج سکتے ہیں۔
یہاں ایک لنک ہے پروجیکٹ کے لیے GitHub ریپو.
