ব্যবহারকারীর স্থানীয় ডিভাইসে থাকা ফাইল নির্বাচন করা এবং সেগুলোর সাথে ইন্টারঅ্যাক্ট করা ওয়েবের সবচেয়ে বেশি ব্যবহৃত বৈশিষ্ট্যগুলোর মধ্যে একটি। এটি ব্যবহারকারীদের ফাইল নির্বাচন করে সার্ভারে আপলোড করার সুযোগ দেয়, যেমন—ছবি শেয়ার করার সময় বা ট্যাক্স সংক্রান্ত নথি জমা দেওয়ার সময়। এটি সাইটগুলোকে নেটওয়ার্কের মাধ্যমে ডেটা স্থানান্তর না করেই ফাইলগুলো পড়তে এবং সেগুলোতে পরিবর্তন আনতে সাহায্য করে। এই পৃষ্ঠায় জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে ফাইলগুলোর সাথে ইন্টারঅ্যাক্ট করতে হয়, তা ধাপে ধাপে দেখানো হয়েছে।
আধুনিক ফাইল সিস্টেম অ্যাক্সেস এপিআই
ফাইল সিস্টেম অ্যাক্সেস এপিআই ব্যবহারকারীর লোকাল সিস্টেমে থাকা ফাইল ও ডিরেক্টরি থেকে ডেটা পড়া এবং তাতে লেখার একটি উপায় প্রদান করে। এটি ক্রোম এবং এজ-এর মতো বেশিরভাগ ক্রোমিয়াম-ভিত্তিক ব্রাউজারে উপলব্ধ। এ সম্পর্কে আরও জানতে, ফাইল সিস্টেম অ্যাক্সেস এপিআই দেখুন।
যেহেতু ফাইল সিস্টেম অ্যাক্সেস এপিআই সব ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয়, তাই আমরা browser-fs-access ব্যবহার করার পরামর্শ দিই। এটি একটি সহায়ক লাইব্রেরি যা নতুন এপিআই উপলব্ধ থাকলে তা ব্যবহার করে এবং উপলব্ধ না থাকলে পুরোনো পদ্ধতিতে ফিরে যায়।
ফাইল নিয়ে কাজ করার চিরাচরিত পদ্ধতি
এই নির্দেশিকাটি আপনাকে দেখাবে কিভাবে জাভাস্ক্রিপ্টের পুরোনো পদ্ধতি ব্যবহার করে ফাইলগুলির সাথে কাজ করতে হয়।
ফাইলগুলি নির্বাচন করুন
ফাইল নির্বাচন করার দুটি প্রধান উপায় রয়েছে: এইচটিএমএল ইনপুট এলিমেন্ট ব্যবহার করে এবং ড্র্যাগ-অ্যান্ড-ড্রপ জোন ব্যবহার করে।
এইচটিএমএল ইনপুট উপাদান
ব্যবহারকারীদের জন্য ফাইল নির্বাচন করার সবচেয়ে সহজ উপায় হলো <input type="file"> এলিমেন্ট ব্যবহার করা, যা প্রতিটি প্রধান ব্রাউজারে সমর্থিত। এটিতে ক্লিক করলে, ব্যবহারকারী তার অপারেটিং সিস্টেমের বিল্ট-ইন ফাইল সিলেকশন UI ব্যবহার করে একটি ফাইল নির্বাচন করতে পারেন, অথবা ` multiple অ্যাট্রিবিউট অন্তর্ভুক্ত থাকলে একাধিক ফাইলও নির্বাচন করতে পারেন। ব্যবহারকারী যখন একটি বা একাধিক ফাইল নির্বাচন করা শেষ করেন, তখন এলিমেন্টটির ` change ইভেন্টটি ফায়ার হয়। আপনি event.target.files থেকে ফাইলগুলোর তালিকা অ্যাক্সেস করতে পারেন, যা একটি FileList অবজেক্ট। FileList এর প্রতিটি আইটেম একটি File অবজেক্ট।
<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
</script>
নিম্নলিখিত উদাহরণটি একজন ব্যবহারকারীকে তার অপারেটিং সিস্টেমের অন্তর্নির্মিত ফাইল নির্বাচন UI ব্যবহার করে একাধিক ফাইল নির্বাচন করতে এবং তারপর প্রতিটি নির্বাচিত ফাইলকে কনসোলে লগ করতে দেয়।
ব্যবহারকারীরা যে ধরনের ফাইল নির্বাচন করতে পারবে তা সীমিত করুন।
কিছু ক্ষেত্রে, আপনি ব্যবহারকারীদের নির্বাচন করার ফাইলের ধরন সীমিত করতে চাইতে পারেন। উদাহরণস্বরূপ, একটি ইমেজ এডিটিং অ্যাপ শুধুমাত্র ইমেজ গ্রহণ করবে, টেক্সট ফাইল নয়। ফাইলের ধরনের উপর সীমাবদ্ধতা আরোপ করতে, ইনপুট এলিমেন্টে একটি accept অ্যাট্রিবিউট যোগ করে নির্দিষ্ট করে দিন কোন ধরনের ফাইল গ্রহণ করা হবে:
<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
কাস্টম ড্র্যাগ-এন্ড-ড্রপ
কিছু ব্রাউজারে, <input type="file"> এলিমেন্টটি একটি ড্রপ টার্গেট হিসেবেও কাজ করে, যা ব্যবহারকারীদের আপনার অ্যাপে ফাইল ড্র্যাগ-অ্যান্ড-ড্রপ করার সুযোগ দেয়। তবে, এই ড্রপ টার্গেটটি ছোট এবং ব্যবহার করা কঠিন হতে পারে। এর পরিবর্তে, <input type="file"> এলিমেন্ট ব্যবহার করে মূল ফিচারগুলো দেওয়ার পর, আপনি একটি বড় ও কাস্টম ড্র্যাগ-অ্যান্ড-ড্রপ সারফেস প্রদান করতে পারেন।
আপনার ড্রপ জোন বেছে নিন
আপনার ড্রপ সারফেস আপনার অ্যাপ্লিকেশনের ডিজাইনের উপর নির্ভর করে। আপনি হয়তো জানালার শুধুমাত্র একটি অংশকে ড্রপ সারফেস হিসেবে ব্যবহার করতে চাইতে পারেন, আবার পুরো জানালাটিও ব্যবহার করতে পারেন।
ইমেজ কম্প্রেশন অ্যাপ Squoosh ব্যবহারকারীকে উইন্ডোর যেকোনো জায়গায় একটি ইমেজ ড্র্যাগ করার সুযোগ দেয় এবং কোনো ইমেজ সিলেক্ট করলে <input type="file"> এলিমেন্টটি চালু হয়। ড্রপ জোন হিসেবে আপনি যা-ই বেছে নিন না কেন, ব্যবহারকারীর কাছে যেন এটা স্পষ্ট থাকে যে তারা সেই সারফেসে ফাইল ড্র্যাগ করে আনতে পারবে।
ড্রপ জোন নির্ধারণ করুন
কোনো এলিমেন্টকে ড্র্যাগ-অ্যান্ড-ড্রপ জোন হিসেবে সক্রিয় করতে, dragover এবং drop এই দুটি ইভেন্টের জন্য লিসেনার তৈরি করুন। dragover ইভেন্টটি ব্রাউজারের UI আপডেট করে, যা দৃশ্যত নির্দেশ করে যে ড্র্যাগ-অ্যান্ড-ড্রপ অ্যাকশনটি ফাইলটির একটি কপি তৈরি করছে। ব্যবহারকারী সারফেসের উপর ফাইলগুলো ড্রপ করার পর drop ইভেন্টটি ফায়ার হয়। input এলিমেন্টের মতোই, আপনি event.dataTransfer.files থেকে ফাইলগুলোর তালিকা অ্যাক্সেস করতে পারেন, যা একটি FileList অবজেক্ট। FileList এর প্রতিটি আইটেম একটি File অবজেক্ট।
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', (event) => {
event.stopPropagation();
event.preventDefault();
// Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = 'copy';
});
dropArea.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
const fileList = event.dataTransfer.files;
console.log(fileList);
});
event.stopPropagation() এবং event.preventDefault() ব্রাউজারের ডিফল্ট আচরণ বন্ধ করে দেয় এবং এর পরিবর্তে আপনার কোডকে চলতে দেয়। এগুলো ছাড়া, ব্রাউজারটি আপনার পৃষ্ঠা থেকে অন্য পৃষ্ঠায় চলে যেত এবং ব্যবহারকারীর ব্রাউজার উইন্ডোতে রাখা ফাইলগুলো খুলে ফেলত।
সরাসরি প্রদর্শনের জন্য, কাস্টম ড্র্যাগ-অ্যান্ড-ড্রপ দেখুন।
ডিরেক্টরিগুলোর ব্যাপারে কী বলবেন?
দুর্ভাগ্যবশত, জাভাস্ক্রিপ্ট ব্যবহার করে কোনো ডিরেক্টরি অ্যাক্সেস করার ভালো কোনো উপায় নেই।
<input type="file"> এলিমেন্টের webkitdirectory অ্যাট্রিবিউটটি ব্যবহারকারীকে একটি বা একাধিক ডিরেক্টরি বেছে নেওয়ার সুযোগ দেয়। অ্যান্ড্রয়েডের জন্য ফায়ারফক্স এবং আইওএস-এর জন্য সাফারি ছাড়া বেশিরভাগ প্রধান ব্রাউজারে এটি সমর্থিত ।
যদি ড্র্যাগ-অ্যান্ড-ড্রপ সক্রিয় থাকে, তাহলে একজন ব্যবহারকারী একটি ডিরেক্টরিকে ড্রপ জোনে টেনে আনার চেষ্টা করতে পারেন। যখন ড্রপ ইভেন্টটি সক্রিয় হয়, তখন এটি ডিরেক্টরিটির জন্য একটি File অবজেক্ট অন্তর্ভুক্ত করে, কিন্তু ডিরেক্টরিটির ভেতরের কোনো ফাইল অ্যাক্সেস করার সুযোগ দেয় না।
ফাইল মেটাডেটা পড়ুন
File অবজেক্টটিতে ফাইল সম্পর্কিত মেটাডেটা থাকে। বেশিরভাগ ব্রাউজার ফাইলের নাম, ফাইলের আকার এবং MIME টাইপ প্রদান করে, যদিও প্ল্যাটফর্ম ভেদে বিভিন্ন ব্রাউজার ভিন্ন বা অতিরিক্ত তথ্যও দিতে পারে।
function getMetadataForFileList(fileList) {
for (const file of fileList) {
// Not supported in Safari for iOS.
const name = file.name ? file.name : 'NOT SUPPORTED';
// Not supported in Firefox for Android or Opera for Android.
const type = file.type ? file.type : 'NOT SUPPORTED';
// Unknown cross-browser support.
const size = file.size ? file.size : 'NOT SUPPORTED';
console.log({file, name, type, size});
}
}
আপনি input-type-file ডেমোতে এর বাস্তবায়ন দেখতে পারেন।
একটি ফাইলের বিষয়বস্তু পড়ুন
একটি File অবজেক্টের বিষয়বস্তু মেমরিতে পড়ার জন্য FileReader ব্যবহার করুন। আপনি FileReader একটি ফাইলকে অ্যারে বাফার , ডেটা ইউআরএল বা টেক্সট হিসেবে পড়তে বলতে পারেন।
function readImage(file) {
// Check if the file is an image.
if (file.type && !file.type.startsWith('image/')) {
console.log('File is not an image.', file.type, file);
return;
}
const reader = new FileReader();
reader.addEventListener('load', (event) => {
img.src = event.target.result;
});
reader.readAsDataURL(file);
}
এই উদাহরণটি ব্যবহারকারীর দেওয়া একটি File পড়ে, তারপর সেটিকে একটি ডেটা ইউআরএল-এ রূপান্তর করে এবং সেই ডেটা ইউআরএল ব্যবহার করে একটি img এলিমেন্টে ছবিটি প্রদর্শন করে। ব্যবহারকারী যে একটি ইমেজ ফাইল নির্বাচন করেছেন, তা কীভাবে যাচাই করতে হয় তা জানতে read-image-file ডেমোটি দেখুন।
একটি ফাইল পড়ার অগ্রগতি নিরীক্ষণ করুন
বড় ফাইল পড়ার সময়, পড়া কতদূর এগিয়েছে তা ব্যবহারকারীকে জানানোর জন্য একটি ইউএক্স (UX) প্রদান করা সহায়ক হতে পারে। এর জন্য, FileReader দ্বারা প্রদত্ত progress ইভেন্টটি ব্যবহার করুন। progress ইভেন্টের দুটি প্রপার্টি রয়েছে: loaded (পঠিত অংশের পরিমাণ) এবং total (পঠিতব্য অংশের পরিমাণ)।
function readFile(file) {
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const result = event.target.result;
// Do something with result
});
reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
const percent = (event.loaded / event.total) * 100;
console.log(`Progress: ${Math.round(percent)}`);
}
});
reader.readAsDataURL(file);
}