Electron-এ ফাইল ডায়লগ (File Dialog) ব্যবহার করে আপনি ব্যবহারকারীদের ফাইল সিলেক্ট করতে এবং সেই ফাইলটি পড়তে বা সংরক্ষণ করতে সহায়তা করতে পারেন। Electron এর dialog মডিউল দিয়ে ফাইল ওপেন এবং সেভ ডায়লগ তৈরি করা যায়।
এই টিউটোরিয়ালে Open এবং Save ডায়লগ কিভাবে তৈরি করবেন তা দেখানো হলো।
১. Main Process - ফাইল ডায়লগ ব্যবহার
dialog মডিউলটি Main Process-এ কাজ করে, এবং এটি ব্যবহারকারীর কাছে ফাইল ডায়লগের উইন্ডো তৈরি করতে সাহায্য করে।
উদাহরণ: main.js (ফাইল ওপেন এবং সেভ ডায়লগ)
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const fs = require('fs');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadFile('index.html');
// Open File Dialog
ipcMain.handle('dialog:openFile', async () => {
const result = await dialog.showOpenDialog(mainWindow, {
properties: ['openFile'], // Only open files
filters: [
{ name: 'Text Files', extensions: ['txt'] },
{ name: 'All Files', extensions: ['*'] }
]
});
return result.filePaths; // Return the selected file paths
});
// Save File Dialog
ipcMain.handle('dialog:saveFile', async () => {
const result = await dialog.showSaveDialog(mainWindow, {
filters: [
{ name: 'Text Files', extensions: ['txt'] },
{ name: 'All Files', extensions: ['*'] }
]
});
return result.filePath; // Return the selected file path
});
});
dialog.showOpenDialog(): ফাইল ওপেন করার জন্য একটি ডায়লগ উইন্ডো দেখায়।dialog.showSaveDialog(): ফাইল সেভ করার জন্য একটি ডায়লগ উইন্ডো দেখায়।properties: ['openFile']: শুধুমাত্র ফাইল সিলেক্ট করা যাবে।filters: ফাইল টাইপ সিলেকশন ফিল্টার হিসেবে কাজ করে।
২. Renderer Process - ফাইল ডায়লগ ব্যবহার
Renderer Process থেকে Main Process-এ মেসেজ পাঠানোর জন্য IPC ব্যবহার করা হয়। ফাইল ডায়লগ খুলতে এবং ব্যবহারকারীর সিলেক্ট করা ফাইল পেতে ipcRenderer ব্যবহার করা হয়।
উদাহরণ: index.html (Renderer Process)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Dialog Example</title>
</head>
<body>
<h1>ফাইল ওপেন এবং সেভ ডায়লগ উদাহরণ</h1>
<button id="openFileBtn">ফাইল ওপেন করুন</button>
<button id="saveFileBtn">ফাইল সেভ করুন</button>
<p id="fileInfo"></p>
<script>
const { ipcRenderer } = require('electron');
// ফাইল ওপেন করার জন্য
document.getElementById('openFileBtn').addEventListener('click', async () => {
const result = await ipcRenderer.invoke('dialog:openFile');
if (result.length > 0) {
document.getElementById('fileInfo').textContent = `সিলেক্ট করা ফাইল: ${result[0]}`;
}
});
// ফাইল সেভ করার জন্য
document.getElementById('saveFileBtn').addEventListener('click', async () => {
const result = await ipcRenderer.invoke('dialog:saveFile');
if (result) {
document.getElementById('fileInfo').textContent = `ফাইল সেভ হবে: ${result}`;
}
});
</script>
</body>
</html>
ipcRenderer.invoke(): Renderer Process থেকে Main Process-এ মেসেজ পাঠানোর জন্য ব্যবহৃত হয় এবং ডায়লগ থেকে সিলেক্ট করা ফাইলের পাথ ফেরত পাওয়া যায়।
৩. ফাইল ওপেন ডায়লগ
এখানে, আমরা Open File ডায়লগ তৈরি করেছি যেখানে ব্যবহারকারী ফাইল সিলেক্ট করতে পারবেন এবং সেই ফাইলের পাথ Renderer Process-এ পাঠানো হবে।
ফাইল ওপেন ডায়লগের বৈশিষ্ট্যসমূহ:
properties: ['openFile']: শুধুমাত্র ফাইল সিলেকশন করা যাবে।filters: ফাইলের ধরন অনুযায়ী ফিল্টার করা যাবে, যেমন শুধুমাত্র.txtফাইল সিলেক্ট করা যাবে।
৪. ফাইল সেভ ডায়লগ
এখানে, আমরা Save File ডায়লগ তৈরি করেছি যেখানে ব্যবহারকারী একটি ফাইল সেভ করার জন্য ডিরেক্টরি এবং ফাইলের নাম সিলেক্ট করতে পারবেন।
ফাইল সেভ ডায়লগের বৈশিষ্ট্যসমূহ:
filters: ফাইলের ধরন নির্বাচন করতে সাহায্য করে, যেমন.txtফাইল।defaultPath: সেভ করার জন্য ডিফল্ট পাথ নির্ধারণ করা যায় (যদি প্রয়োজন হয়)।
৫. ফাইল সিলেক্ট করা এবং সেভ করা
ফাইল ওপেন এবং সেভ ডায়লগ ব্যবহারের মাধ্যমে আপনি fs মডিউল দিয়ে ফাইলের ডেটা পড়তে বা লিখতে পারবেন। আপনি Renderer Process থেকে নির্বাচিত ফাইলের পাথ পেয়ে, Main Process এর মাধ্যমে সেই ফাইলের ডেটা পড়তে বা লেখতে পারেন।
ফাইল সেভ করার উদাহরণ
const { ipcMain } = require('electron');
const fs = require('fs');
ipcMain.handle('dialog:saveFile', async () => {
const result = await dialog.showSaveDialog(mainWindow, {
filters: [
{ name: 'Text Files', extensions: ['txt'] }
]
});
if (result.filePath) {
fs.writeFileSync(result.filePath, 'এটি একটি সেভ করা টেক্সট ফাইল।');
}
return result.filePath;
});
সারাংশ
dialog.showOpenDialog(): ফাইল ওপেন করার জন্য ব্যবহৃত হয়।dialog.showSaveDialog(): ফাইল সেভ করার জন্য ব্যবহৃত হয়।ipcMain.handle(): Main Process-এ ফাইল ডায়লগ হ্যান্ডেল করতে ব্যবহৃত হয়।ipcRenderer.invoke(): Renderer Process থেকে Main Process-এ মেসেজ পাঠানোর জন্য ব্যবহৃত হয়।
এইভাবে, Electron অ্যাপ্লিকেশনে ফাইল ওপেন এবং ফাইল সেভ ডায়লগ তৈরি করে ব্যবহারকারীদের ফাইল সিলেক্ট বা সংরক্ষণ করতে সহায়তা করা যায়।
Read more
