ফাইল আপলোড যেকোন ওয়েব অ্যাপ্লিকেশনের জন্য খুব সর্বব্যাপী এবং যখন এটি ইন্টারনেটে (একটি ব্রাউজারে) ফাইল এবং সংস্থান আপলোড করার ক্ষেত্রে আসে তখন জিনিসগুলি কিছুটা চাপযুক্ত হতে পারে। সৌভাগ্যবশত, HTML 5 এর সাথে, ইনপুট উপাদান যা সাধারণত ফর্ম কন্ট্রোলের সাথে আসে যা ব্যবহারকারীদের ডেটা পরিবর্তন করার অনুমতি দেয় যা আপলোডিং সংস্থানগুলিকে সহজ করার জন্য খুব সহজ হতে পারে।
এই নিবন্ধে, ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে ফাইল আপলোডগুলি কীভাবে পরিচালনা করা যায় তা আমরা ঘনিষ্ঠভাবে দেখব। উদ্দেশ্য হল আপনাকে শেখানো যে কিভাবে একটি বহিরাগত লাইব্রেরির প্রয়োজন ছাড়াই একটি ফাইল আপলোড উপাদান তৈরি করতে হয় এবং জাভাস্ক্রিপ্টের কিছু মূল ধারণাও শিখতে হয়। আপলোড হওয়ার সাথে সাথে আপনি কীভাবে এটির অগ্রগতি স্থিতি দেখাবেন তাও শিখবেন।
চলুন শুরু করা যাক, লোকেরা!
প্রকল্প সেটআপ
প্রথম এবং সর্বাগ্রে, আপনার পছন্দের ডিরেক্টরিতে, প্রকল্পের জন্য একটি নতুন ফোল্ডার তৈরি করুন:
$ 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;
}
এখন, কম্পোনেন্টটি ব্রাউজারে এর মত দেখাচ্ছে:
সেরা-অভ্যাস, শিল্প-স্বীকৃত মান এবং অন্তর্ভুক্ত চিট শীট সহ গিট শেখার জন্য আমাদের হ্যান্ডস-অন, ব্যবহারিক গাইড দেখুন। গুগলিং গিট কমান্ড এবং আসলে বন্ধ করুন শেখা এটা!
আমাদের প্রকল্পে আপলোড করার জন্য প্রয়োজনীয় কার্যকারিতা যোগ করতে, আমরা এখন ব্যবহার করি 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-এ আপনার প্রকল্প আপলোড করার পরামর্শ দিচ্ছি অথবা আপনি একটি dmও পাঠাতে পারেন।
এখানে একটি লিঙ্ক প্রকল্পের জন্য GitHub রেপো.
