ব্রাউজারে ফাইল পেস্ট করা HTMLElement এর paste ইভেন্ট ব্যবহার করে।
HTMLElement এর paste ইভেন্ট ব্যবহার করে
প্রথম ধাপ হিসেবে, আপনি কাঙ্ক্ষিত উপাদানে paste ইভেন্টের জন্য একটি ইভেন্ট লিসেনার যোগ করেন, সাধারণত এটি document লেভেলে হয়, তাই কোনো নির্দিষ্ট উপাদানকে ফোকাস করার প্রয়োজন নেই। এর পরে, আপনি ক্লিপবোর্ড API ব্যবহার করেন, যা আপনাকে HTMLElement এর paste ইভেন্টের clipboardData ক্ষেত্রে অ্যাক্সেস দেয়, যার files তালিকা আপনি আবার পুনরাবৃত্তি করতে পারেন। পেস্ট করা প্রতিটি ফাইলের MIME প্রকারের উপর ভিত্তি করে, আপনি সিদ্ধান্ত নিতে পারেন যে এটিকে স্ক্রিনে রেন্ডার করতে হবে, যেমন একটি চিত্র বা ভিডিওর ক্ষেত্রে, বা ফাইলের পাঠ্য বিষয়বস্তু পেস্ট করতে হবে, উদাহরণস্বরূপ, একটি textarea উপাদান , একটি টেক্সট ফাইলের ক্ষেত্রে।
document.addEventListener('paste', async (e) => {
// Prevent the default behavior, so you can code your own logic.
e.preventDefault();
if (!e.clipboardData.files.length) {
return;
}
// Iterate over all pasted files.
Array.from(e.clipboardData.files).forEach(async (file) => {
// Add more checks here for MIME types you're interested in,
// such as `application/pdf`, `video/mp4`, etc.
if (file.type.startsWith('image/')) {
// For images, create an image and append it to the `body`.
const img = document.createElement('img');
const blob = URL.createObjectURL(file);
img.src = blob;
document.body.append(img);
} else if (file.type.startsWith('text/')) {
// For text files, read the contents and output it into a `textarea`.
const textarea = document.createElement('textarea');
textarea.value = await file.text();
document.body.append(textarea);
}
});
});
আরও পড়া
ডেমো
এইচটিএমএল
<!DOCTYPE html>
<html>
<head>
<title>How to paste files</title>
</head>
<body>
<h1>How to paste files</h1>
<p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
(for other operating systems) to paste image or text file(s) anywhere in this page.
</p>
</body>
</html>সিএসএস
html {
box-sizing: border-box;
font-family: system-ui, sans-serif;
color-scheme: dark light;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 1rem;
}
img {
height: auto;
max-width: 100%;
display: block;
}
জেএস
document.addEventListener('paste', async (e) => {
// Prevent the default behavior, so you can code your own logic.
e.preventDefault();
if (!e.clipboardData.files.length) {
return;
}
// Iterate over all pasted files.
Array.from(e.clipboardData.files).forEach(async (file) => {
// Add more checks here for MIME types you're interested in,
// such as `application/pdf`, `video/mp4`, etc.
if (file.type.startsWith('image/')) {
// For images, create an image and append it to the `body`.
const img = document.createElement('img');
const blob = URL.createObjectURL(file);
img.src = blob;
document.body.append(img);
} else if (file.type.startsWith('text/')) {
// For text files, read the contents and output it into a `textarea`.
const textarea = document.createElement('textarea');
textarea.value = await file.text();
document.body.append(textarea);
}
});
});