File Upload CSS API Reference

All Common CSS variables:

    Specific CSS variables for File Upload styling:

    • --smart-file-upload-default-width: Default width of the FileUpload.
    • --smart-file-upload-browse-button-width: Default width of the browse button.
    • --smart-file-upload-browse-button-height: Default height of the browse button.
    • --smart-file-upload-footer-button-width: Default height of the FileUpload's footer buttons.
    • --smart-file-upload-footer-button-height: Default height of the smartFileUpload's footer buttons.
    • --smart-file-upload-text-content-uploading-start: Default text content of the pseudo element shown when upload starts.
    • --smart-file-upload-text-content-uploading: Default text content of the pseudo element shown during the upload.
    • --smart-file-upload-text-content-error: Default text content of the pseudo element shown on error.
    • --smart-file-upload-text-content-pause: Default text content of the pseudo element shown when upload is paused.
    • --smart-file-upload-text-content-drop-zone: Default text content of the pseudo element shown where is the drop zone.
    • --smart-file-upload-text-content-drop-zone-over: Default text content of the pseudo element shown when dragged files are over the drop zone.
    • --smart-file-upload-container-min-height: Sets minimmum height of the drop zone and file zone containers.
    • --smart-file-upload-total-files-min-height: Sets min height of the container where total numbers of items is displayed.

    The following CSS selectors can be used to style FileUpload:

    • smart-file-upload - the element itself. Can be used to set width and height for the whole element.
      • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
        • .smart-file-upload-header - an HTML DIV element, used as container for the browsing elements.
          • .smart-browse-button - smart-button element, used as browse button.
          • .smart-browse-input - the input element used for browsing files.
        • .smart-file-upload-container - an HTML DIV element, used as container for the drop zone and file list.
          • .smart-drop-zone - an HTML DIV element, used as container, where files can be dropped and then uploaded.
          • .smart-selected-files - an HTML DIV element, used as container of the files list.
        • .smart-file - an HTML DIV element, used as container of the files list.
          • .smart-item-name - an HTML DIV element, used as container of a file item.
          • .smart-item-upload-button - an HTML SPAN element, used as item's upload button.
          • .smart-item-cancel-button - an HTML SPAN element, used as item's cancel button.
          • .smart-item-pause-button - an HTML SPAN element, used as item's pause button.
          • smart-progress-bar - smart-progress-bar element, used to be shown the uploading progress when showProgress element's property is se t to true.
        • .smart-total-files - an HTML DIV element, used do display the total number of selected files.It's shown when there is not enought spase all files to be rendered.
        • .smart-file-upload-footer - an HTML DIV element, used as container of the common buttons.
          • .smart-upload-all-button - smart-button element, used as Upload All files button.
          • .smart-cancel-all-button - smart-button element, used as Cancel All files button.
          • .smart-pause-all-button - smart-button element, used as Pause All files button.

    Demo

    <style>
        #fileupload{
                --smart-file-upload-default-width: 100%;
                --smart-file-upload-browse-button-width: 50%;
                --smart-file-upload-browse-button-height: 50px;
        }
</style>