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-uploaderAdditional props are passed to the <FileUploader> element. See input docs for a list of props accepted by the <FileUploader> element.
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. |
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. |