Skip to main content
Language

Adding Drag and Drop Support

This guide will show you how to add drag and drop support to the editor.

1. Create the necessary elements and styles#

We need two new elements with specific styles to ensure that the drag and drop works correctly.

The first element is used as an enclosing element for the overlay and the editor. This is also used to trigger the visibility of our actual overlay.

The second element functions as our overlay. It needs the styles to ensure that it fully covers the editor, but it can be customized if the positioning and the visibility stay the same.

We will use the style class visible to change the overlay's visibility. This can be customized as well.

2. Create the correct behavior#

Now we add some functions to give our elements the correct behavior.

First, we create an onDragEnter function for our enclosing element to change the visibility of our overlay element. For that, we will use our previously implemented class visible.

Now we create the actual drag and drop function. But before that, the default behavior should be disabled to ensure the correct behavior.

We should vaildate that the file is loaded and its an image.

If we prove that our file is correct, we initialize the file reader and use the setImage function to load the image into the editor.

Finally, we remove the visible class to hide the overlay.