File uploader
El componente File Uploader permite hacer upload de archivos.
import React from "react";
import { FileUploader } from "@nimbus-ds/components";
const Example: React.FC = () => (
<FileUploader placeholder="Helper text" width="104px" />
);
export default Example;El componente se compone de una caja con icono de suma y un label opcional.
Usamos este componente para recibir archivos por medio de un upload.
El componente no posee tamaños fijos, de modo que su altura y ancho pueden ser definidos. De todas formas, existen proporciones recomendadas que siguen el mismo patrón del componente Thumbnail. También es posible utilizar la proporción flexible de acuerdo con la necesidad de los archivos.
- Cuadrada - 1:1
- Rectangular - 4:3 y 3:4
- Rectangular Wide - 16:9 y 9:16
- Rectangular Extra Wide - 2:1 y 1:2
- Flexible - Proporción libre
El componente cuenta con dos opciones de orientación para el helper text e icono, siendo ellas horizontal y vertical que pueden ser elegidas de acuerdo con el tamaño y proporción utilizados.
- Recibir comprobantes de pago.
- Recibir imágenes de productos.
- Recibir planillas con datos de productos.
- Thumbnail - Puede ser usado para exhibir imágenes de productos en una galería.
Instalá el componente via terminal.
npm install @nimbus-ds/file-uploaderLas propiedades adicionales se pasan al elemento <FileUploader>. Consultá la documentación para ver la lista de atributos aceptados por el 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 |