How to add a custom button inside the Uppy Dashboard Modal in React?

[WaqqarSuleman]

Hi,

I have requirement where I have to hide the upload button and replace it with another button (example: "Okay") that simply closes the Dashboard Modal.

Any help is appreciated.

[arturi]

Hi! Could you try using this option https://uppy.io/docs/dashboard/#doneButtonHandler with https://uppy.io/docs/dashboard/#hideUploadButton-false?

[WaqqarSuleman]

Hi! Could you try using this option https://uppy.io/docs/dashboard/#doneButtonHandler with https://uppy.io/docs/dashboard/#hideUploadButton-false?

@arturi I have hidden the Upload Button as it want to call uppy.upload() implicity and if there is no Upload Button then the Done Button does not appear either as it shows up only when the upload is complete after you have clicked the Upload Button (hidden already in my case). Can you please provide an example to satisfy my requirement?

[WaqqarSuleman]

Hi! Could you try using this option https://uppy.io/docs/dashboard/#doneButtonHandler with https://uppy.io/docs/dashboard/#hideUploadButton-false?

@arturi I have hidden the Upload Button as it want to call uppy.upload() implicity and if there is no Upload Button then the Done Button does not appear either as it shows up only when the upload is complete after you have clicked the Upload Button (hidden already in my case). Can you please provide an example to satisfy my requirement?

It would also work if I could modify the behavior of the Upload Button.

[aheimlich]

@WaqqarSuleman, I have a similar requirement on a current project. What I ended up doing is sticking an inline Dashboard (with hideUploadButton enabled) inside Material UI's Dialog component.

[WaqqarSuleman]

@WaqqarSuleman, I have a similar requirement on a current project. What I ended up doing is sticking an inline Dashboard (with hideUploadButton enabled) inside Material UI's Dialog component.

thanks a lot

[arturi]

Could you explain what your use case is, @aheimlich, @WaqqarSuleman?

[Daavidaviid]

In my case, I needed to have an action in the Modal to remove the current picture. I'm gonna use @aheimlich's option

[orbitturner]

Hi there 🤗
For those searching how to do it on 2022 :
You can dynamically inject a button once the file is added in the status bar and bind a click event listener to it.

• Example:

// Tested On Angular & Vanilla JS
// Check if element wasn't already created
    const previous = document.getElementById('orbit-upload-button');
    if (!previous) {
      // get the html element with class name uppy-StatusBar-actions
      const statusBar = document.querySelector('.uppy-StatusBar') as HTMLElement;
      const uploadButton = document.querySelector('.uppy-StatusBar-actions') as HTMLElement;
      // dynamically create a button element and insert it into the element with '.uppy-StatusBar-actions' class
      const button = document.createElement('button');
      button.id = 'orbit-upload-button';
      button.innerHTML = 'Upload 🚀';
      button.classList.add('uppy-u-reset', 'uppy-c-btn', 'uppy-StatusBar-actionBtn', 'uppy-StatusBar-actionBtn--upload', 'uppy-c-btn-primary');
      // Add a custom attribute to the button element
      button.setAttribute('data-uppy-super-focusable', 'true');
      button.addEventListener('click', () => {
        this.returnFile(file);
      });
      uploadButton.appendChild(button);
      // change the attribute [aria-hidden] to false 
      statusBar.setAttribute('aria-hidden', 'false');
    }

[MentalGear]

I'd be great if there was a var that would allow us to plug custom html in for additional buttons in the bottom bar. Use Case: For many users, it's not obvious how to add additional files, a new button "Add more" next to the standard Upload button would help a lot.