How to customise appearance of upload list

[AndreasHald]

I can see in the source code that the class has properties such as addMoreBtnVisible but how do you access these?

The problem is that even if you don't include the cloud image editor and so forth the buttons for them are still there.

For now I have solved it using css

import * as LR from '@uploadcare/blocks';

function registerFileUploader() {
    class HeadlessModal extends LR.ShadowWrapper {
        static template = /** HTML */ `
        <lr-modal strokes block-body-scrolling>
          <lr-start-from>
            <lr-drop-area with-icon clickable></lr-drop-area>
            <lr-source-list wrap></lr-source-list>
          </lr-start-from>
          <lr-external-source></lr-external-source>
          <lr-upload-list></lr-upload-list>
        </lr-modal>

        <lr-message-box></lr-message-box>
        <lr-progress-bar-common></lr-progress-bar-common>
      `;
    }

    (HeadlessModal as any).shadowStyles = `
    .add-more-btn {
      display: none !important; 
    }
    .cancel-btn {
      display: none !important; 
    }

    .edit-btn {
      display: none !important; 
    }
    .remove-btn {
      display: none !important; 
    }
    lr-config {
      display: none !important; 
    }
    `;

    LR.registerBlocks({
        ...LR,
        HeadlessModal,
    });
}

export default registerFileUploader;

[nd0ut]

Hey @AndreasHald,

The button for controlling the cloud image editor can be managed with the useCloudImageEditor flag, as documented here: useCloudImageEditor docs.

If you want to hide other buttons such as Add more or Remove, there are a couple of approaches you can take. One approach is to use CSS for easier customization. Another option is to modify the templates for UploadList and FileItem components, as demonstrated in this example: Custom UploadList and FileItem Templates.

Let me know if you have any questions or need further assistance!