Drag & Drop Images into Bevy 0.15 on the web

submited by

Style Pass

2024-12-12 10:00:01

In this example, we want to allow the user to drop a PNG image into our Bevy app running in the Browser. The app should load the image into the Bevy Asset machinery and display it like any other image file. See the animation to the right visualizing this.

The first thing we need to do is to register the event listeners for dragover and drop on the DOM element we want to receive the drop events. We will be using wasm-bindgen and gloo to be able to do this right from our rust code:

You can find the full function here but the important part is that the code is essentially 1:1 from how you would solve this in vanilla javascript translated to rust while looking at the web_sys docs for reference.

Note that we are setting the drop_effect and effect_allowed here to make sure the browser will allow us to receive the drop and to show this on the mouse cursor to the user as well.

The handling of the drop event is a bit more involved as we need to extract the file data from the event and forward it to Bevy. We will cover this in the next section.