সমস্যা: সিকিউরিটির কারণে <input type="file">-এর value জাভাস্ক্রিপ্ট দিয়ে সেট করা যায় না
ব্রাউজার ব্যবহারকারীর ফাইল সিস্টেম অ্যাক্সেস রক্ষার জন্য প্রোগ্রাম্যাটিক্যালি ফাইল ইনপুটে ফাইল সেট করার অনুমতি দেয় না। সমাধান: Drag & Drop API + DataTransfer।
কনসেপ্ট
- ব্যবহারকারী ফাইল ড্র্যাগ করে আনে →
dropইভেন্টেevent.dataTransfer.filesপাওয়া যায়। - এই
FileList-কে একটি নতুনDataTransferঅবজেক্টে রাখুন। - সেই
DataTransfer-কে ফাইল ইনপুটের.filesপ্রপার্টিতে অ্যাসাইন করুন (মডার্ন ব্রাউজার সাপোর্ট করে)।
কোড উদাহরণ
{
dropZone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropZone.style.borderColor = '#007bff'; });
});
['dragleave', 'drop'].forEach(evt => {
dropZone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropZone.style.borderColor = '#ccc'; });
});
dropZone.addEventListener('drop', e => {
const files = e.dataTransfer.files;
if (files.length) {
// FileList → DataTransfer → input.files
const dt = new DataTransfer();
for (const file of files) dt.items.add(file);
fileInput.files = dt.files; // মডার্ন ব্রাউজারই সাপোর্ট করে
console.log('ফাইল সেট হয়েছে:', fileInput.files.length);
}
});
</script>
নোট: input.files = dataTransfer.files অ্যাসাইনমেন্ট Chrome 82+, Firefox 78+, Edge 82+, Safari 14+ এ কাজ করে। পুরনো ব্রাউজার suport করে না।
