- Electron Projects
- Denys Vuika
- 464字
- 2021-06-24 12:14:39
Adding drag and drop support
Another nice feature you can provide for your small markdown editor application is the ability to drag and drop files onto the window. Users of your application should have the ability to drop a markdown file onto the editor's surface and have the content of the file immediately available to them. This scenario also helps us address some extra features of the Electron framework that you may use later. Let's get started:
- The easiest way to enable drop support for an entire web page running in Electron is to set the ondrop event handler for the body element:
<body ondrop="dropHandler(event);">
<!-- page content -->
</body>
- For now, the drop handler implementation can be as simple as putting a message into the browser console's output. The most important part here is to prevent the default behavior and tell other DOM elements that we are now responsible for drop operations:
<script>
function dropHandler(event) {
console.log('File(s) dropped');
event.preventDefault();
}
</script>
- Run the Chrome Developer Tools with the Console tab open and drag and drop a file from your system onto the markdown editor area:
You can find out more about drag and drop handling in HTML5 at https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop.
- For the next step, let's have some code that reads the content of the file that the user drags and drops, and shows the text in the browser console. Please refer to the following listing to see what the code should look like:
function dropHandler(event) {
event.preventDefault();
if (event.dataTransfer.items) {
if (event.dataTransfer.items[0].kind === 'file') {
var file = event.dataTransfer.items[0].getAsFile();
if (file.type === 'text/markdown') {
var reader = new FileReader();
reader.onload = e => {
console.log(e.target.result);
};
reader.readAsText(file);
}
}
}
}
- Notice that we are filtering out dropped files by the mime type. It should be equal to the text/markdown value, meaning that you need to use files with the .md extension. Also, we only take the first file entry if the user drops multiples.
- Run the application, open Chrome Developer tools, and drop a markdown file onto the editor. It can be anything. In our example, it's a README.md file:
As you can see, the text of the markdown file should be present in the browser's console output.
- The final part of the implementation is straightforward. We already have a reference to the SimpleMDE editor instance, so the only thing we need to do is call the codemirror function in order to set the new text value, as follows:
var reader = new FileReader();
reader.onload = e => {
// console.log(e.target.result);
editor.codemirror.setValue(e.target.result);
};
- Try the application once again. You should see the text from the dropped file appear directly inside the markdown editor:
Our implementation had succeeded, so feel free to clean the code from the console.log calls. Now, let's learn how we can support automatic updates with our markdown editor application.