Skip to main content

ClassNames

The UpupUploader component was designed using Tailwind CSS v.3.3.5, and is fully customisable using the classNames prop object. All keys of the classNames object props expect classname values as string: whether TailwindCSS classes or not.

note

It is important to note that:

  • the full UpupUploader has a height of 480px and will occupy the width of its container until a max-width of 600px
  • the mini UpupUploader has a height of 3970px and will occupy the width of its container until a max-width of 280px

Categories​

We've split the classnames into groups for easier understanding

Adapter Button​

These classNames style the buttons that let users select different upload methods (Google Drive, Camera, etc.).

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
adapterButtonclassNames={{adapterButton: "my-classname"}}stringoptionalgroup flex items-center gap-[6px] border-b border-gray-200 px-2 py-1 @cs/main:flex-col @cs/main:justify-center @cs/main:rounded-lg @cs/main:border-none @cs/main:p-0border-[#6D6D6D] dark:border-[#6D6D6D]
adapterButtonIconclassNames={{adapterButtonIcon: "my-classname"}}stringoptionalscale-75 rounded-lg bg-white p-0 text-2xl font-semibold group-hover:scale-90 @cs/main:scale-100 @cs/main:p-[6px] @cs/main:shadow @cs/main:group-hover:scale-110bg-[#323232] dark:bg-[#323232]
adapterButtonListclassNames={{adapterButtonList: "my-classname"}}stringoptionalflex w-full flex-col justify-center gap-1 @cs/main:flex-row @cs/main:flex-wrap @cs/main:items-center @cs/main:gap-[30px] @cs/main:px-[30px]N/A
adapterButtonTextclassNames={{adapterButtonText: "my-classname"}}stringoptionaltext-xs text-[#242634]text-[#6D6D6D] dark:text-[#6D6D6D]

Adapter View​

These classNames style the specific upload method interfaces (Google Drive, Camera, etc.) after selection.

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
adapterViewclassNames={{adapterView: "my-classname"}}stringoptionalflex items-center justify-center overflow-hidden bg-black/[0.075]bg-white/10 text-[#FAFAFA] dark:bg-white/10 dark:text-[#FAFAFA]
adapterViewCancelButtonclassNames={{adapterViewCancelButton: "my-classname"}}stringoptionalrounded-md p-1 text-blue-600 transition-all duration-300text-[#30C5F7] dark:text-[#30C5F7]
adapterViewHeaderclassNames={{adapterViewHeader: "my-classname"}}stringoptionalshadow-bottom flex items-center justify-between bg-black/[0.025] px-3 py-2 text-sm font-medium text-[#1b5dab]bg-white/5 text-[#FAFAFA] dark:bg-white/5 dark:text-[#FAFAFA]

Camera Adapter​

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
cameraAddButtonclassNames={{cameraAddButton: "my-class"}}stringoptionalmt-2 w-full rounded-md bg-blue-600 p-2 text-white transition-all duration-300bg-[#59D1F9] dark:bg-[#59D1F9]
cameraCaptureButtonclassNames={{cameraCaptureButton: "my-class"}}stringoptionalmt-2 flex w-1/3 flex-col items-center justify-center rounded-md bg-blue-600 p-2 text-white transition-all duration-300bg-[#59D1F9] dark:bg-[#59D1F9]
cameraDeleteButtonclassNames={{cameraDeleteButton: "my-class"}}stringoptionalabsolute -right-2 -top-2 z-10 rounded-full bg-[#272727] p-1 text-xl text-[#f5f5f5]N/A
cameraPreviewContainerclassNames={{cameraPreviewContainer: "my-class"}}stringoptionalrelative aspect-video bg-black/[0.025] bg-contain bg-center bg-no-repeat shadow-xlbg-white/5 dark:bg-white/5
cameraRotateButtonclassNames={{cameraRotateButton: "my-class"}}stringoptionalmt-2 flex w-1/3 flex-col items-center rounded-md bg-gray-500 p-2 text-white transition-all duration-300 hover:bg-gray-600N/A

Container​

These classNames are responsible for the general look and feel of the component container class.

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
containerAddMoreButtonclassNames={{containerAddMoreButton: "my-classname"}}stringoptionalcol-start-3 col-end-5 flex items-center justify-end gap-1 p-1 text-sm text-blue-600 @cs/main:col-start-4text-[#30C5F7] dark:text-[#30C5F7]
containerCancelButtonclassNames={{containerCancelButton: "my-classname"}}stringoptionalmax-md col-start-1 col-end-3 row-start-2 p-1 text-left text-sm text-blue-600 @cs/main:col-end-2 @cs/main:row-start-1text-[#30C5F7] dark:text-[#30C5F7]
containerFullclassNames={{containerFull: "my-classname"}}stringoptionalshadow-wrapper flex h-full w-full select-none flex-col gap-3 overflow-hidden rounded-2xl bg-white px-5 py-4bg-[#232323] dark:bg-[#232323]
containerHeaderclassNames={{containerHeader: "my-classname"}}stringoptionalshadow-bottom absolute left-0 right-0 top-0 z-10 grid grid-cols-4 grid-rows-2 items-center justify-between rounded-t-lg bg-black/[0.025] px-3 py-2 @cs/main:grid-rows-1bg-white/5 dark:bg-white/5
containerMiniclassNames={{containerMini: "my-classname"}}stringoptionalshadow-bottom absolute left-0 right-0 top-0 z-10 grid grid-cols-4 grid-rows-2 items-center justify-between rounded-t-lg bg-black/[0.025] px-3 py-2 @cs/main:grid-rows-1bg-white/5 dark:bg-white/5

Drive​

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
driveAddFilesButtonclassNames={{driveAddFilesButton: "my-class"}}stringoptionalrounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white transition-all duration-300bg-[#30C5F7] dark:bg-[#30C5F7]
driveBodyclassNames={{driveBody: "my-class"}}stringoptionalh-full overflow-y-scroll bg-black/[0.075] pt-2bg-white/10 text-[#fafafa] dark:bg-white/10 dark:text-[#fafafa]
driveCancelFilesButtonclassNames={{driveCancelFilesButton: "my-class"}}stringoptionalml-auto rounded-md p-1 text-sm text-blue-600 transition-all duration-300text-[#30C5F7] dark:text-[#30C5F7]
driveFooterclassNames={{driveFooter: "my-class"}}stringoptionalflex origin-bottom items-center justify-start gap-4 bg-black/[0.025] px-3 py-2bg-white/5 text-[#fafafa] dark:bg-white/5 dark:text-[#fafafa]
driveHeaderclassNames={{driveHeader: "my-class"}}stringoptionalshadow-bottom grid grid-cols-[1fr,auto] bg-black/[0.025] px-3 py-2 text-xs font-medium text-[#333]bg-white/5 text-[#FAFAFA] dark:bg-white/5 dark:text-[#FAFAFA]
driveItemContainerDefaultclassNames={{driveItemContainerDefault: "my-class"}}stringoptionalgroup mb-1 flex cursor-pointer items-center justify-between gap-2 rounded-md p-1 py-2 hover:bg-[#bab4b499]N/A
driveItemContainerInnerclassNames={{driveItemContainerInner: "my-class"}}stringoptionalflex items-center gap-2N/A
driveItemContainerSelectedclassNames={{driveItemContainerSelected: "my-class"}}stringoptionalbg-[#bab4b499]N/A
driveItemInnerTextclassNames={{driveItemInnerText: "my-class"}}stringoptionaltext-wrap break-all text-xstext-[#e0e0e0] dark:text-[#e0e0e0]
driveLoadingclassNames={{driveLoading: "my-class"}}stringoptionalflex items-center justify-center overflow-hidden bg-black/[0.075]bg-white/10 text-[#FAFAFA] dark:bg-white/10 dark:text-[#FAFAFA]
driveLogoutButtonclassNames={{driveLogoutButton: "my-class"}}stringoptionaltext-blue-600 hover:underlinetext-[#30C5F7] dark:text-[#30C5F7]
driveSearchContainerclassNames={{driveSearchContainer: "my-class"}}stringoptionalrelative h-fit bg-black/[0.025] px-3 py-2bg-white/5 text-[#fafafa] dark:bg-white/5 dark:text-[#fafafa]
driveSearchInputclassNames={{driveSearchInput: "my-class"}}stringoptionalh-fit w-full rounded-md bg-black/[0.025] px-3 py-2 pl-8 text-xs outline-none transition-all duration-300bg-white/5 text-[#6D6D6D] dark:bg-white/5 dark:text-[#6D6D6D]

File​

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
fileDeleteButtonclassNames={{fileDeleteButton: "my-class"}}stringoptionalz-1 absolute -right-[10px] -top-[10px] scale-90 rounded-full @cs/main:scale-100N/A
fileInfoclassNames={{fileInfo: "my-class"}}stringoptionalflex flex-col items-start justify-between p-2 pt-0 @cs/main:p-0N/A
fileItemMultipleclassNames={{fileItemMultiple: "my-class"}}stringoptionalrelative flex flex-1 gap-2 rounded border border-[#6D6D6D] bg-white @cs/main:static @cs/main:basis-32 @cs/main:rounded-none @cs/main:border-none @cs/main:bg-transparent @cs/main:flex-colbg-[#1F1F1F] @cs/main:bg-transparent dark:bg-[#1F1F1F] @cs/main:dark:bg-transparent
fileItemSingleclassNames={{fileItemSingle: "my-class"}}stringoptionalrelative flex flex-1 gap-2 rounded border border-[#6D6D6D] bg-white @cs/main:static @cs/main:basis-32 @cs/main:rounded-none @cs/main:border-none @cs/main:bg-transparent flex-colbg-[#1F1F1F] @cs/main:bg-transparent dark:bg-[#1F1F1F] @cs/main:dark:bg-transparent
fileListContainerclassNames={{fileListContainer: "my-class"}}stringoptionalpreview-scroll flex flex-1 flex-col overflow-y-auto bg-black/[0.075] p-3bg-white/10 dark:bg-white/10
fileListContainerInnerMultipleclassNames={{fileListContainerInnerMultiple: "my-class"}}stringoptionalflex flex-col gap-4 @cs/main:grid @cs/main:gap-y-6 @cs/main:grid-cols-3N/A
fileListContainerInnerSingleclassNames={{fileListContainerInnerSingle: "my-class"}}stringoptionalflex flex-col gap-4 @cs/main:grid @cs/main:gap-y-6 flex-1N/A
fileListFooterclassNames={{fileListFooter: "my-class"}}stringoptionalshadow-top flex items-center gap-3 rounded-b-lg bg-black/[0.025] px-3 py-2bg-white/5 dark:bg-white/5
fileNameclassNames={{fileName: "my-class"}}stringoptionalflex-1 text-xs text-[#0B0B0B]text-white dark:text-white
filePreviewButtonclassNames={{filePreviewButton: "my-class"}}stringoptionaltext-xs text-blue-600text-[#59D1F9] dark:text-[#59D1F9]
filePreviewPortalclassNames={{filePreviewPortal: "my-class"}}stringoptionalabsolute inset-0 m-4 bg-whitebg-[#232323] dark:bg-[#232323]
fileSizeclassNames={{fileSize: "my-class"}}stringoptionaltext-xs text-[#6D6D6D]N/A
fileThumbnailMultipleclassNames={{fileThumbnailMultiple: "my-class"}}stringoptionalshadow-right flex cursor-pointer items-center justify-center rounded-l bg-white bg-contain bg-center bg-no-repeat @cs/main:relative @cs/main:rounded-r @cs/main:shadow-md aspect-square w-14 @cs/main:w-fullbg-[#232323] dark:bg-[#232323]
fileThumbnailSingleclassNames={{fileThumbnailSingle: "my-class"}}stringoptionalshadow-right flex cursor-pointer items-center justify-center rounded-l bg-white bg-contain bg-center bg-no-repeat @cs/main:relative @cs/main:rounded-r @cs/main:shadow-md flex-1bg-[#232323] dark:bg-[#232323]

Progress​

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
progressBarContainerclassNames={{progressBarContainer: "my-class"}}stringoptionalflex items-center gap-2N/A
progressBarclassNames={{progressBar: "my-class"}}stringoptionalh-[6px] flex-1 overflow-hidden bg-[#F5F5F5]N/A
progressBarInnerclassNames={{progressBarInner: "my-class"}}stringoptionalh-full rounded-[4px] bg-[#8EA5E7]N/A
progressBarTextclassNames={{progressBarText: "my-class"}}stringoptionaltext-xs font-semiboldN/A

Upload​

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
uploadButtonclassNames={{uploadButton: "my-class"}}stringoptionalml-auto rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white disabled:animate-pulsebg-[#30C5F7] dark:bg-[#30C5F7]
uploadDoneButtonclassNames={{uploadDoneButton: "my-class"}}stringoptionalml-auto rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white disabled:animate-pulsebg-[#30C5F7] dark:bg-[#30C5F7]

URL Adapter​

KeyExampleTypeStatusDefault Value (Light Mode)Added Default Value (Dark Mode)
urlInputclassNames={{urlInput: "my-class"}}stringoptionalw-full rounded-md border-2 border-[#e0e0e0] bg-transparent px-3 py-2 outline-noneborder-[#6D6D6D] text-[#6D6D6D] dark:border-[#6D6D6D] dark:text-[#6D6D6D]
urlFetchButtonclassNames={{urlFetchButton: "my-class"}}stringoptionalmt-2 w-full rounded-md bg-blue-600 p-2 text-white transition-all duration-300 disabled:bg-[#e0e0e0]bg-[#59D1F9] disabled:bg-[#6D6D6D] dark:bg-[#59D1F9] dark:disabled:bg-[#6D6D6D]

Responsive Styling​

The UpupUploader component uses container queries for responsive layout adjustments. The @cs/main utility class applies styles when the container width is above 475px. The following values for containerFull will translate to the following CSS style:

import { UpupUploader, UpupProvider } from "upup-react-file-uploader";
import 'upup-react-file-uploader/styles'

export default function Uploader() {
  return (
    <UpupUploader
      classNames={{
        containerFull: "pt-0 @cs/main:pt-4",
      }}
      provider={UpupProvider.AWS} // assuming we are uploading to AWS
      tokenEndpoint="http://<path_to_your_server>/api/upload-token" // Path to your server route that calls our exported upload utilities
    />
  );
}
.pt-0 {
  padding-top: 0px; /* 0 top padding when the component width < 475px */
}

@container main (min-width: 475px) {
  .\@cs\/main\:pt-4 {
    padding-top: 1rem; /* 1rem or 16px top padding when the component width >= 475px */
  }
}
note

This doesn't apply to the mini UpupUploader as it's maximum width is 280px

Tailwind Important Modifier​

When using Tailwind in your application, some default styles of the UpupUploader component require !important override due to specificity. For example:

<UpupUploader
  provider={UpupProvider.BackBlaze}
  tokenEndpoint="http://localhost:3000/api/upload"
  classNames={{
    adapterButton: "bg-white !scale-[200%]",
    containerHeader: "border !border-black",
    containerCancelButton: "!bg-red-800",
    containerAddMoreButton: "!bg-pink-300",
    adapterView: "!border-4 !border-red-300",
  }}
/>
warning
  • Use ! sparingly - only when normal classes don't override defaults
  • Test overrides in both light/dark modes
  • Combine with state variants when needed
note

The File Preview Portal uses an extreme z-index value (z-[2147483647]) to:

  1. Ensure it always appears above all other elements
  2. Prevent interference from third-party libraries
  3. Maintain visibility during complex upload scenarios

These patterns ensure proper styling control while maintaining the component's responsive behaviour and dark mode compatibility.