File uploader
O componente File Uploader é utilizado para fazer o upload de arquivos.
import React from "react";
import { FileUploader } from "@nimbus-ds/components";
const Example: React.FC = () => (
<FileUploader placeholder="Helper text" width="104px" />
);
export default Example;O componente é composto por um caixa com ícone de mais e um label opcional.
Utilizamos esse componente para receber arquivos por meio de um upload.
O componente não possui tamanhos fixos, ou seja sua altura ou largura podem ser definidos, contudo existem proporções recomendadas que seguem o mesmo padrão do componente Thumbnail. Também é possível utilizar a proporção flexível de acordo com a necessidade dos arquivos.
- Quadrada - 1:1
- Retangular - 4:3 e 3:4
- Retangular Wide - 16:9 e 9:16
- Retangular Extra Wide - 2:1 e 1:2
- Flexível - Proporção livre
O componente conta com duas opções de orientação para o helper text e ícone, são elas a horizontal e vertical que podem ser escolhidas de acordo com o tamanho e proporção utilizadas.
- Receber comprovantes de pagamento
- Receber imagens de produtos
- Receber planilhas com dados de produtos
- Thumbnail - Pode ser utilizado para exibir imagens de produtos em uma galeria.
Instale o componente via terminal.
npm install @nimbus-ds/file-uploaderPropriedades adicionais são repassadas ao elemento <FileUploader>. Consulte a documentação do elemento div para ver a lista de atributos aceitos pelo elemento <FileUploader>.
FileUploader
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | Provide additional context to the action. | |
accept | string | 'image/jpeg,image/gif,image/png' | Accept file types |
height | string | '100%' | Height value of the file uploader. Defaults to 100%. |
width | string | '100%' | Width value of the file uploader. Defaults to 100%. |
aspectRatio | '1/1' | '1/1' | Permitted aspect ratios for the size of the file uploader. |
flexDirection | 'column' | 'column' | Defines the position of the placeholder in relation to the icon. |
onDrop | object | Callback fired when files are dropped (before validation) | |
onDropReject | object | Callback fired when all dropped files are rejected due to file type validation | |
onDropSuccess | object | Callback fired when files are successfully accepted and processed | |
onError | object | Callback fired when an error occurs during file drop processing | |
children | React.ReactNode | Content to render inside the file uploader container | |
dragOverlay | React.ReactNode | Custom overlay element to render when dragging files over the uploader. When defined, this overlay will be displayed instead of children during drag operations. | |
disableClickUpload | boolean | 'false' | When true, the file uploader will not be clickable and files can only be uploaded by dragging and dropping. Useful for invisible upload areas used along FileUploader.Overlay. |
asOverlay | boolean | 'false' | When true, the file uploader will be rendered as an overlay. Useful for invisible upload areas used along FileUploader.Overlay. |
FileUploader.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
height | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
aspectRatio | '1/1' | '1/1' | Permitted aspect ratios for the size of the file uploader. |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
FileUploader.Overlay
| Name | Type | Default | Description |
|---|---|---|---|
title | string | Title text displayed in the overlay | |
subtitle | string | Subtitle text displayed below the title | |
imageSrc | string | Source URL for the image displayed in the overlay | |
imageAlt | string | Alt text for the image | |
borderColor | 'ai-generativeInteractiveHover' | 'primary-interactive' | Border color of the overlay |
backgroundColor | 'neutral-background' | 'primary-surface' | Background color of the overlay |
borderRadius | '0-5' | '2' | Border radius of the overlay |
children | React.ReactNode | Content to render inside the overlay |