FileInput

<FileInput onChange={(file) => alert(file)}>
  {(context) =>
    context.name ? (
      <Stack align="center" direction="horizontal">
        {context.name}
        <Button shape="circle" size="small" variant="transparent" onClick={context.reset}>
          <VisuallyHidden>Remove</VisuallyHidden>
          <IconClose />
        </Button>
      </Stack>
    ) : (
      <Box>{context.droppable ? 'Drop file' : 'Attach file'}</Box>
    )
  }
</FileInput>