# Dragging & dropping files

Your application can support drag-and-drop, allowing users to drop files directly onto the app instead of selecting them through a file picker.

When files are dragged over the application, the [Drag Over](/deskifier/deskifier-bubble.io-docs/filesystem-element/states.md#drag-over) state becomes `yes`, which can be used to update your UI (for example, highlighting a drop zone). \
\
If the user drops the files onto the window, the [File System - File(s) Dropped](/deskifier/deskifier-bubble.io-docs/filesystem-element/events.md#file-system-file-s-dropped) event will trigger. The file locations can then be accessed through the [Paths Of Dropped File(s)](/deskifier/deskifier-bubble.io-docs/filesystem-element/states.md#paths-of-dropped-file-s) state.

***

You can also support dragging files out of your app into other applications using the [Make Draggable Element](/deskifier/deskifier-bubble.io-docs/make-draggable-element.md).

<figure><img src="/files/AKbGeHCiWE8PhZ9O4yTz" alt=""><figcaption></figcaption></figure>

***

#### How To:

{% hint style="success" %}
View this example in the Bubble editor:\
\
<https://bubble.io/page?id=deskifier-plugin-test&tab=Design&name=drag-and-drop-example&type=page&elements=bTQjb>
{% endhint %}

To make our application able to accept incoming file drops, we need to set the **Enable File Dropping** property to "yes" in our Filesystem Element.

<figure><img src="/files/oJlV990x8NghLDtz72z3" alt=""><figcaption></figcaption></figure>

#### Step 1.

Firstly, we want to detect when a user is dragging a file over our app, so we can update our UI accordingly.\
\
This is simple to do, we can just use a conditional based on the [Drag Over](/deskifier/deskifier-bubble.io-docs/filesystem-element/states.md#drag-over) state.

<figure><img src="/files/Tiiah2byiHUgZN1F9a9l" alt=""><figcaption></figcaption></figure>

#### Step 2.

Next, we'll handle the actual file dropping event. We'll listen for the [File System - File(s) Dropped](/deskifier/deskifier-bubble.io-docs/filesystem-element/events.md#file-system-file-s-dropped) event.\
\
And then we'll set the value of our file uploader, to automatically upload the dropped file using the [Paths Of Dropped File(s)](/deskifier/deskifier-bubble.io-docs/filesystem-element/states.md#paths-of-dropped-file-s) state.

{% hint style="info" %}
For more details on how the file uploader works, check the [handling file uploads](/deskifier/deskifier-bubble.io-docs/guides-and-examples/handling-file-uploads.md) guide.
{% endhint %}

<figure><img src="/files/JLeeTS8wRofECJ4SSDOu" alt=""><figcaption></figcaption></figure>

#### Step 3.

Next step is to make a draggable element that we can drag outside of our app, onto other applications.\
\
For this, we'll add an ID Attribute to the element we want to become "droppable"

<figure><img src="/files/OCt4LeKWSXWEFwMa3HMP" alt=""><figcaption></figcaption></figure>

#### Step 4.

Lastly, add the [Make Draggable Element](/deskifier/deskifier-bubble.io-docs/make-draggable-element.md) to your page, and target our specified ID Attribute.

<figure><img src="/files/Kgy42HKYZWqZR1UsFghN" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
For tips on getting file paths, read the [navigating directories guide](/deskifier/deskifier-bubble.io-docs/guides-and-examples/navigating-directories-and-cross-platform-support.md).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deskifier.gitbook.io/deskifier/deskifier-bubble.io-docs/guides-and-examples/dragging-and-dropping-files.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.