Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    UploadButton

    The UploadButton component allows users to upload a file with a button.

    View source code
    • Usage
    • Props
    • onUpload
      (files: FileList) => void | Promise<void>

      Handler that is called when a file is submitted.

    • text
      string

      The text to display in the button.

    • accept
      string

      One or more unique file type specifiers describing file types to allow. Cf https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers

      Default:
    • ariaLabel
      string

      aria-label for the input.

    • className
      string

      className for the element.

    • fit
      "content" | "parent"

      Specifies the width of the element.

    • hasNoHorizontalPadding
      boolean

      Whether the button should have no horizontal padding. Has effect only on tertiary variant

      Default: false
    • iconName
      "adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-merge" | "arrow-path" | "arrow-pointing-out" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | ... 143 more ...

      The icon to display in the button.

    • iconPosition
      "left" | "right"

      Specifies where the icon is positioned.

    • isDisabled
      boolean

      Whether the button should be disabled.

    • isMultiple
      boolean

      Be able to select more than one file.

      Default: false
    • variant
      "primaryAlert" | "primaryBrand" | "primaryInfo" | "primarySuccess" | "primaryWarning" | "secondaryAlert" | "secondaryBrand" | "secondaryInfo" | "secondaryNeutral" | "secondarySuccess" | "secondaryWarning" | "tertiaryAlert" | "tertiaryBrand" | "tertiaryComplementary" | "tertiaryInfo" | "tertiaryNeutral" | ... 2 more ...

      The visual style of the button

      Default: primaryBrand