Top
Uploader - Styling & Theming
Uploader
To style and customize the appearance of <Uploader />, you can use one of the following strategies:
  • Specify a style prop with the desired values
  • Specify a className for the <Uploader /> - note that this will not override the default <Uploader /> className of zippy-react-uploader, but rather will be appended to the classes the component already has.
Below you can find a list with all the css classes applied to <Uploader /> components and when/how they are applied.
ClassNameDescription
zippy-react-uploader--menu-[POSITION]
Applied with the value of the uploaderMenuPosition prop .
zippy-react-uploader--hasmenu
Applied if renderToolbar prop is not a falsy value, indicating that there will be no menubar rendedred.
zippy-react-uploader--inprogress
Applied when the file upload is in progress and at least one file is being uploaded at this moment.
zippy-react-uploader--singlefile
Applied when the file <Uploader /> is configured with just one file to be uploaded once. This does not mean that multiple files cannot exists in the <Uploader /> at once, but that only one at a time can be send to the server.
zippy-react-uploader--disabled
Applied if disabled prop is not a falsy value.
zippy-react-uploader
Applied on the whole uploader's container.
zippy-react-file-drop-zone
Applied on the drop zone of the uploader.
zippy-react-uploader__menu-layout
Applied on the uploader's menu.
zippy-react-file-item
Applied on each item in the <Uploader />'s list.
zippy-react-file-item__extension__layout
Applied on the item's extension icon.
zippy-react-file-item__name__layout
Applied on the item's name container.
zippy-react-file-item__succes__layout
Applied on the item's name container, with the uploading succes message.
zippy-react-file-item__progress__layout
Applied on the item's name container, with the uploading progress message.
zippy-react-file-item__upload-button__layout
Applied on the item's upload button container, with the uploading state message (Upload, Queued, Uploading, Uploaded). For each state, the button has a custom className. The className is composed of react-file-item__upload-button__trigger and the button's state (Upload, Queued, Uploading, Uploaded). i.e. react-file-item__upload-button__trigger--Uploading