Clipboard and Drag & Drop with Electron

What is Electron?

Electron is a framework that allows you to develop desktop applications using modern web technologies. It enables you to develop applications using HTML, CSS and JavaScript. Electron is especially preferred for cross-platform applications, so it is possible to develop applications that run on both Windows and macOS.

Using the Clipboard

What is the Clipboard?

The clipboard is an area used to store temporary data, used in copy and paste operations. Using the clipboard in Electron applications is quite simple. Below is an example showing how to copy and paste text using the clipboard.

const { clipboard } = require('electron');

// Copy text
clipboard.writeText('Hello, Electron!');

// Paste text
const text = clipboard.readText();
console.log(text); // 'Hello, Electron!'

Copying with a Popup

You can create a popup to get text from the user and copy that text to the clipboard. An example application is shown below.

const { dialog } = require('electron');

async function getUserText() {
    const { response, checkboxChecked } = await dialog.showMessageBox({
        type: 'question',
        buttons: ['OK', 'Cancel'],
        title: 'Copy Text',
        message: 'Enter the text you want to copy:',
        detail: 'Press the OK button to copy the text.'
    });
    if (response === 0) {
        clipboard.writeText('Copied text');
    }
}

getUserText();

Using Drag & Drop

Drag & Drop allows users to interact by dragging and dropping files or objects. In Electron applications, this feature can significantly improve user experience. Below is an example of how to implement file drag and drop.

<div id="drop_zone">
    Drag & drop a file here.
</div>

<script>
    const dropZone = document.getElementById('drop_zone');

    dropZone.addEventListener('dragover', (event) => {
        event.preventDefault(); // Necessary, otherwise drop event will not happen
    });

    dropZone.addEventListener('drop', (event) => {
        event.preventDefault();
        const files = event.dataTransfer.files;
        console.log(files); // Files dropped when dragged
    });
</script>

Conclusion

Using Clipboard and Drag & Drop with Electron provides great advantages in improving user experience. With the code samples, it is quite easy to integrate these two important features into your applications. By using these features while developing, you can create more interactive applications. Make sure to take advantage of Electron's offerings for a fast and efficient development process.