ব্যবহারকারীর স্থানীয় ডিভাইসে ফাইলগুলি নির্বাচন করা এবং ইন্টারঅ্যাক্ট করা ওয়েবের সর্বাধিক ব্যবহৃত বৈশিষ্ট্যগুলির মধ্যে একটি। এটি ব্যবহারকারীদের ফাইল নির্বাচন করতে এবং একটি সার্ভারে আপলোড করার অনুমতি দেয়, উদাহরণস্বরূপ, ফটো শেয়ার করার সময় বা ট্যাক্স নথি জমা দেওয়ার সময়। এটি সাইটগুলিকে নেটওয়ার্ক জুড়ে ডেটা স্থানান্তর না করেই সেগুলি পড়তে এবং ম্যানিপুলেট করার অনুমতি দেয়৷ এই পৃষ্ঠাটি ফাইলের সাথে ইন্টারঅ্যাক্ট করার জন্য জাভাস্ক্রিপ্ট কীভাবে ব্যবহার করতে হয় তা নিয়ে চলে।
আধুনিক ফাইল সিস্টেম অ্যাক্সেস API
ফাইল সিস্টেম অ্যাক্সেস API ব্যবহারকারীর স্থানীয় সিস্টেমে ফাইল এবং ডিরেক্টরি পড়তে এবং লিখতে একটি উপায় প্রদান করে। এটি বেশিরভাগ ক্রোমিয়াম-ভিত্তিক ব্রাউজার যেমন ক্রোম এবং এজ-এ উপলব্ধ। এটি সম্পর্কে আরও জানতে, ফাইল সিস্টেম অ্যাক্সেস API দেখুন।
যেহেতু ফাইল সিস্টেম অ্যাক্সেস API সমস্ত ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ নয়, তাই আমরা ব্রাউজার-fs-অ্যাক্সেস ব্যবহার করার পরামর্শ দিই, একটি সহায়ক লাইব্রেরি যা নতুন API ব্যবহার করে যেখানে এটি উপলব্ধ থাকে এবং যখন এটি না থাকে তখন উত্তরাধিকার পদ্ধতিতে ফিরে আসে৷
ফাইলের সাথে কাজ করুন, ক্লাসিক উপায়
এই নির্দেশিকা আপনাকে দেখায় কিভাবে লিগ্যাসি জাভাস্ক্রিপ্ট পদ্ধতি ব্যবহার করে ফাইলের সাথে ইন্টারঅ্যাক্ট করতে হয়।
ফাইল নির্বাচন করুন
ফাইল নির্বাচন করার দুটি প্রাথমিক উপায় রয়েছে: HTML ইনপুট উপাদান ব্যবহার করে এবং একটি ড্র্যাগ-এন্ড-ড্রপ জোন ব্যবহার করে।
HTML ইনপুট উপাদান
ব্যবহারকারীদের জন্য ফাইল নির্বাচন করার সবচেয়ে সহজ উপায় হল <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 ইভেন্টটি শুরু হয়। ইনপুট উপাদানের মতো, আপনি 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 বৈশিষ্ট্য ব্যবহারকারীকে একটি ডিরেক্টরি বা ডিরেক্টরি নির্বাচন করতে দেয়। এটি অ্যান্ড্রয়েডের জন্য ফায়ারফক্স এবং iOS এ সাফারি ছাড়া বেশিরভাগ প্রধান ব্রাউজারে সমর্থিত ।
ড্র্যাগ-এন্ড-ড্রপ সক্ষম করা থাকলে, একজন ব্যবহারকারী ড্রপ জোনে একটি ডিরেক্টরি টেনে আনার চেষ্টা করতে পারে। যখন ড্রপ ইভেন্ট ফায়ার হয়, তখন এটি ডিরেক্টরির জন্য একটি 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 বলতে পারেন একটি ফাইল একটি অ্যারে বাফার , একটি ডেটা URL বা পাঠ্য হিসাবে পড়তে:
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 পড়ে, তারপর এটি একটি ডেটা URL এ রূপান্তর করে এবং একটি img উপাদানে চিত্রটি প্রদর্শন করতে সেই ডেটা URL ব্যবহার করে৷ ব্যবহারকারী একটি ইমেজ ফাইল নির্বাচন করেছে কিনা তা যাচাই করতে শিখতে, 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);
}
আনস্প্ল্যাশ থেকে ভিনসেন্ট বোটা দ্বারা নায়কের ছবি