# Handling file uploads

File uploads in your desktop app work the same way they do in your web application. You do not need to use special elements or implement any workarounds. Standard file upload inputs and workflows will function normally.

However, running your application as a desktop app adds additional flexibility.\
\
In the desktop environment, your application can **programmatically set the value of a file uploader**. This means files can be assigned to upload inputs without requiring the user to manually select them through the file picker.

***

Because file inputs can be set automatically, you can build more flexible upload experiences. \
\
For example, you can implement custom upload interfaces, support drag-and-drop uploads without visible file inputs, or automatically attach files and upload them in the background without requiring additional user interaction.

***

#### How To: 

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

First, make sure you have the [Filesystem Element](/deskifier/deskifier-bubble.io-docs/filesystem-element.md) on your page, and not hidden.\
\
To set the file uploader value is straight forward. In this example, we'll use the default "FileUploader" element.

#### Step 1.&#x20;

Create the element on the page, and set the ID Attribute.

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

#### Step 2.&#x20;

Next we need to trigger the [File System - Set File Uploader Value](/deskifier/deskifier-bubble.io-docs/filesystem-element/actions.md#file-system-set-file-uploader-value) action.&#x20;

<figure><img src="/files/0Ul9ShkoPNdExBr3TCVp" alt=""><figcaption></figcaption></figure>

Make sure to include "#" behind your attribute ID, since we are specifying an element by it's exact ID.

{% 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 %}

#### Step 3.

Optional, but recommended. We'll set up events to determine the outcome of our action.\
\
For this, we'll use the [File System - File Upload Failed To Set](/deskifier/deskifier-bubble.io-docs/filesystem-element/events.md#file-system-file-upload-failed-to-set) event and the [File System - File Uploader Value Set](/deskifier/deskifier-bubble.io-docs/filesystem-element/events.md#file-system-file-uploader-value-set)

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

Here we display an error alert to the user if we weren't able to set the value.

{% hint style="warning" %}
Note, if the [File System - File Uploader Value Set](/deskifier/deskifier-bubble.io-docs/filesystem-element/events.md#file-system-file-uploader-value-set) event fires, this doesn't mean the file was uploaded or even started uploading. \
\
The file upload could still fail due to max file size or other limitation as set by your file uploader properties.
{% 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/handling-file-uploads.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.