# Uppy - How to Create Custom Buttons to Trigger Uppy Dashboard's openFileDialog for Files and Folders

**URL:** <https://community.transloadit.com/t/uppy-how-to-create-custom-buttons-to-trigger-uppy-dashboards-openfiledialog-for-files-and-folders/17204>\
**Category:** Uppy\
**Created:** [July 22, 2024, 4:12pm UTC](https://community.transloadit.com/t/uppy-how-to-create-custom-buttons-to-trigger-uppy-dashboards-openfiledialog-for-files-and-folders/17204 "2024-07-22T16:12:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ckcabs](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@ckcabs](https://community.transloadit.com/u/ckcabs)\
**Post date:** [July 22, 2024, 4:12pm UTC](https://community.transloadit.com/t/uppy-how-to-create-custom-buttons-to-trigger-uppy-dashboards-openfiledialog-for-files-and-folders/17204/1 "2024-07-22T16:12:23Z")

</div>

Hi Uppy Team,

I’m working on a project where I want to create two custom buttons positioned above/outside the Uppy Dashboard. The buttons should function as follows:

1. **Upload Files** : When this button is clicked, it should open the Uppy Dashboard’s `openFileDialog` allowing the user to select files.
2. **Upload Folders** : When this button is clicked, it should open the Uppy Dashboard’s `openFileDialog` allowing the user to select folders.

I have tried using the `openFileDialog()` method, but I’m not sure if I implemented it correctly. Could you please provide guidance or an example of how to achieve this functionality?

below is a simplified version of my current setup:

### Questions:

1. How can I properly use the `openFileDialog()` method to trigger the file selection dialog when the “Upload Files” button is clicked?
2. How can I modify it to trigger the folder selection dialog when the “Upload Folders” button is clicked?

Any advice or examples would be greatly appreciated!

Thank you!

 Uppy /\* Custom styles \*/ 

 Upload Files Upload Folders

```
<script type="module">
    import { Uppy, Dashboard, Tus, RemoteSources } from "https://releases.transloadit.com/uppy/v3.3.1/uppy.min.mjs";

    const uppy = new Uppy()
        .use(Dashboard, {
            inline: true,
            target: '#drag-drop-area',
            width: '750px',
        })
        .use(Tus, {
            endpoint: 'https://your-upload-endpoint.com/files/'
        })
        .use(RemoteSources, {
            sources: ['Dropbox', 'OneDrive', 'GoogleDrive', 'Url'],
            companionUrl: 'https://your-companion-url.com'
        });

    document.getElementById("upload-files-button").addEventListener('click', () => {
        // How to trigger openFileDialog for files?
        uppy.getPlugin('Dashboard').openFileDialog();
    });

    document.getElementById("upload-folders-button").addEventListener('click', () => {
        // How to trigger openFileDialog for folders?
        uppy.getPlugin('Dashboard').openFileDialog();
    });
</script>

```

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [July 23, 2024, 10:00am UTC](https://community.transloadit.com/t/uppy-how-to-create-custom-buttons-to-trigger-uppy-dashboards-openfiledialog-for-files-and-folders/17204/2 "2024-07-23T10:00:52Z")

</div>

Hi, I’m not sure what you are trying to open. You can open the dashboard model with the [`trigger`](https://uppy.io/docs/dashboard/#trigger) option. Or do you want to open the OS file picker?

Note that `openFileDialog` does not exist.

---

<div class="post-metadata">

**Author:** ![ckcabs](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@ckcabs](https://community.transloadit.com/u/ckcabs)\
**Post date:** [July 23, 2024, 10:13am UTC](https://community.transloadit.com/t/uppy-how-to-create-custom-buttons-to-trigger-uppy-dashboards-openfiledialog-for-files-and-folders/17204/3 "2024-07-23T10:13:34Z")

</div>

i would like to open

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/transloadit/original/2X/b/bf9bdb0dfc052bc9cd8d857861e2241e4b015e4b.png)  
from outside the dashboard by clicking on a button

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [July 23, 2024, 1:08pm UTC](https://community.transloadit.com/t/uppy-how-to-create-custom-buttons-to-trigger-uppy-dashboards-openfiledialog-for-files-and-folders/17204/4 "2024-07-23T13:08:25Z")

</div>

Unfortunately it’s not possible. You could try to target the `input` with class `uppy-Dashboard-input` and manually trigger it.