Remove and modify Upload Files Button

[kw98ftt]

Proposal: [Remove and modify Upload Files Button]

Description

I would like to remove the Upload Files Button or change its position to better fit into my UI, from what i can tell, thats not possible right now. Disabling is not an option for me, since i would like to keep the drag-and-drop functionality.

Rationale

Improving the file lists customizability should benefit everyones experience working with the toolkit.

Preferred Solution

Adding a disable option, similiar to the show more button and changing the relative position of the file upload area.

Additional Context

[musale]

@kw98ftt thank you for your proposal. What framework is your UI on? Depending on that, you can programmatically set the upload button's display to 'none' and still have the drag and drop working. At the moment, the team is not building any new features so this is not going to be prioritized.

[kw98ftt]

Thanks for the quick response! I'm using the React component for the file-list. I tried disabling it, but with not success. .mgt-file-list-upload { display: none; } This was the code I used. Could you provide additional info on how to hide the button?

[musale]

Using that approach will not work because web components use a shadow DOM and accessing it requires a little more explicitness. Using CSS, we can add a part attribute on themgt-file-list-upload component (it will need a new release). This will allow us to do something like this:

.mgt-file-list::part(mgt-file-upload-button) {
  display: 'none';
}

Having rendered the component like this:

function App () {
  return <FileList className="mgt-file-list"></FileList>
}

Alternatively, in the app, you can use a ref and try to programmatically change the value of the button. Something like this:

function App () {
  const fileListRef = useRef<HTMLElement>(null);
  useEffect(() => {
    const hideUploadBtn = () => {
      if (
        fileListRef &&
        fileListRef.current &&
        fileListRef.current.shadowRoot
      ) {
        const fileUpload =
          fileListRef.current.shadowRoot.querySelector('mgt-file-upload');
        if (fileUpload && fileUpload.shadowRoot) {
          const uploadBtn =
            fileUpload.shadowRoot.querySelector<HTMLElement>('fluent-button');
          if (uploadBtn && uploadBtn.shadowRoot) {
            uploadBtn.style.display = 'none';
          }
        }
      }
    };

    hideUploadBtn();
  }, [fileListRef]);

  return (
    <div className="app">
      <main>
        <FileList
          className="file-list"
          fileListQuery="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"
          enableFileUpload={true}
          ref={fileListRef}
        ></FileList>
      </main>
    </div>
  );
}

I'm not a react guru so these options are just suggestions based on what I've seen other developers do. You can test the second approach if it works as the first one needs a new build of the mgt-react package which you can do locally and test.