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

Uppy
1

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>
2

Hi, I’m not sure what you are trying to open. You can open the dashboard model with the trigger option. Or do you want to open the OS file picker?

Note that openFileDialog does not exist.

3

i would like to open

image
image1136×725 62.1 KB

from outside the dashboard by clicking on a button

4

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