UNPKG

36 kBMarkdownView Raw
1:rocket:[English](https://github.com/dropzone-ui/dropzone-ui#readme)
2
3<p align="center">
4<img align="center" with="128px" height="128px" src="https://user-images.githubusercontent.com/43678736/132112022-0ca409ae-cca2-43c8-be89-110376260a3f.png" alt="dropone-ui-logo">
5
6<h1 align="center"> Dropzone-UI </h1>
7
8</p>
9
10[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dropzone-ui/react/blob/HEAD/LICENSE)
11[![npm latest package](https://img.shields.io/npm/v/@dropzone-ui/react.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/@dropzone-ui/react)
12[![Rate on Openbase](https://badges.openbase.com/js/rating/@dropzone-ui/react.svg)](https://openbase.com/js/@dropzone-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
13[![Build Status](https://app.travis-ci.com/dropzone-ui/react.svg?branch=master)](https://app.travis-ci.com/dropzone-ui/react)
14[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/dropzone-ui/dropzone-ui.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/dropzone-ui/dropzone-ui/context:javascript)
15[![Total alerts](https://img.shields.io/lgtm/alerts/g/dropzone-ui/dropzone-ui.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/dropzone-ui/dropzone-ui/alerts/)
16[![Known Vulnerabilities](https://snyk.io/test/github/dropzone-ui/react/badge.svg)](https://snyk.io/test/github/dropzone-ui/react)
17[![Package Quality](https://packagequality.com/shield/dropzone-ui.svg)](https://packagequality.com/#?package=dropzone-ui)
18[![install size](https://packagephobia.com/badge?p=@dropzone-ui/react)](https://packagephobia.com/result?p=@dropzone-ui/react)
19[![dependencies Status](https://status.david-dm.org/gh/dropzone-ui/react.svg)](https://david-dm.org/dropzone-ui/react)
20[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/dropzone-ui/react.svg)](http://isitmaintained.com/project/dropzone-ui/react)
21[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
22
23Dropzone UI es un pequeño set de componentes [React](https://reactjs.org/) para manejar cargas de archivo y vista previa de imágenes en la interfaz gráfica. Ya existen algunas buenas librerías; Sin embargo, **inspirados** en aquellas, hemos creado algo **nuevo** y más **potente**. Los principios de Google Material Design fueron considerados en el desarrollo. De hecho, todos los iconos vienen de [Material design icons](https://fonts.google.com/icons).
24
25## Nota
26Es posible que, eventualmente, este archivo no tenga las últimas actualizaciones. De ser así, por favor revisa la version en [inglés](https://github.com/dropzone-ui/dropzone-ui#readme).
27## Ejemplo de resultado:
28
29En operaciones `Drag`, `Drop` ,`Upload`, y vista previa en pantalla completa. (también cambiando el modo de vista de `grid` a `list`).
30
31¿Te gustó el proyecto? No olvides regalarnos una :star: estrella en :octocat: [github](https://github.com/dropzone-ui/dropzone-ui) :D
32
33<p align="center">
34<img align="center" width="35%" src="https://user-images.githubusercontent.com/43678736/132642335-dc7e7ceb-ae86-4f81-8625-4ee28dc5f593.png" alt="dropone-ui-logo"><img align="center" width="35%" src="https://user-images.githubusercontent.com/43678736/132642336-e295d84d-d950-43b2-b9fc-0529b4ecfe46.png" alt="dropone-ui-logo"><img align="center" width="35%" src="https://user-images.githubusercontent.com/43678736/132642339-2cd996a3-7754-46c9-89ed-56291972154f.png" alt="dropone-ui-logo"><img align="center" width="35%" src="https://user-images.githubusercontent.com/43678736/132642341-b1eb2bfe-8134-4cdf-a808-62b14058b4c1.png" alt="dropone-ui-logo">
35
36</p>
37
38</p>
39
40<p align="center">
41<img align="center" width=70%" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wxk14o6zhloz2z3zypy.png" alt="dropone-ui-logo">
42</p>
43
44## Instalación
45
46@dropzone-ui/react está disponible como un [paquete npm](https://www.npmjs.com/package/@dropzone-ui/react).
47Para subir archivos a un servidor, la dependencia peer [axios](https://www.npmjs.com/package/axios) debe ser instalada en conjunto con `dropzone-ui`
48
49```sh
50// con npm
51npm i @dropzone-ui/react axios
52```
53
54```sh
55// con yarn
56yarn add @dropzone-ui/react axios
57```
58
59## Uso y ejemplos
60
61Aquí hay un ejemplo rápido para que te inicies, **es todo lo que necesitas**:
62
63```jsx
64import React from "react";
65import ReactDOM from "react-dom";
66import { Dropzone, FileItem } from "@dropzone-ui/react";
67Function App() {
68 const [files, setFiles] = useState([]);
69 const updateFiles = (incommingFiles) => {
70 setFiles(incommingFiles);
71 };
72 return (
73 <Dropzone onChange={updateFiles} value={files}>
74 {files.map((file) => (
75 <FileItem {...file} preview />
76 ))}
77 </Dropzone>
78 );
79}
80
81ReactDOM.render(<App />, document.querySelector("#app"));
82```
83
84Si, esto es todo lo que necesitas para iniciarte como puedes observar en estos demos interactivos:
85| Nombre | Enlace a Codesandbox |
86|-|-|
87|Dropzone Ejemplo básico|[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/basic-3j01v?file=/src/index.js)|
88|Dropzone Ejemplo completo|[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/complete-946hz?file=/src/index.js)|
89|props de FileItem|[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fileitem-props-o0w5x)|
90|FileItem sin vista previa de imagen|[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dropzone-ui-file-item-with-no-image-preview-14i2m) |
91|InputFileButton & FileItemContainer|[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/inputbutton-example-poqsn?file=/src/App.js)|
92|Ejemplo de `localización`|[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/localization-6ew1i?file=/src/App.js)|
93|Ejemplo de servidor de carga de archivos | https://github.com/dropzone-ui/file-upload-server-side/tree/main/expressjs |
94# Localización
95
96Dropzone-ui está disponible en diferentes lenguajes. Hasta ahora, solo están disponibles `Inglés`, `Español`, `Francés` y `Portugués`. Sin embargo, pretendemos expandirnos a más idiomas.
97
98| Idioma | Código | Ejemplo |
99| ----------------------------------- | ------- | ---------------------- |
100| Inglés :us: :uk: | `EN-en` | localization="`EN-en`" |
101| Español :peru: :mexico: :argentina: | `ES-es` | localization="`ES-es`" |
102| Frances :fr: | `FR-fr` | localization="`FR-fr`" |
103| Portugués :brazil: :portugal: | `PT-pt` | localization="`PT-pt`" |
104
105# API de los Componentes Dropzone-UI
106
107- [\<Dropzone/>](#dropzone-api)
108- [\<FileItem />](#fileitem-api)
109- [\<FullScreenPreview />](#fullscreenpreview-api)
110- [\<FileItemContainer />](#fileitemcontainer-api)
111- [\<InputButton />](#inputbutton-api)
112
113## Dropzone API
114
115### Props
116
117| Nombre | Tipo | valor por defecto | Descripción |
118| --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
119| accept | `string` | `undefined` | Es una cadena de caracteres que contiene una lista de mime types y extenciones de archivo (`.extension`) separados por comas, el cual se compara con los atributos de un archivo para determinar si es válido o no. P.E.: `"image/\*, application/pdf, .psd"` |
120| behaviour | `"add"` \| `"replace"` | `"add"` | EL comportamiento al soltar archivos (onDrop). Si el valor es `"add"` , este atributo hará que el `Dropzone` agregue archivos. Si el valor es `"replace"`, la `Dropzone` reemplazará la lista de archivos actual. |
121| children | `node` | `true` | El contenido del componente. Normalmente una lista de componentes `FileItem` o una etiqueta |
122| clickable | `boolean` | `true` | Si es verdadero, el componente será clickeable |
123| config | Object | { headers: { "content-type": "multipart/form-data;", }, } | Configuración ectra para la subida de archivos, normalmente un objeto con cabeceras o token bearer |
124| fakeUploading | `boolean` | `undefined` | Si es verdadera, esta bandera hará que la dropzone simule la subida de archivos. Usarlo únicamente en desarrollo. |
125| footer | `boolean` | `true` | Si es verdadero, muestra el footer del componente |
126| header | `boolean` | `true` | Si es verdadero, muestra el la cabecera del componente |
127| label | `string` | "Drop your files here" | Etiqueta o texto a mostrar cuando no hay archivos soltados o seleccionados |
128| localization [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://img.shields.io/badge/new-feature-green) | `"EN-en"` \| `"ES-es"`\| `"FR-fr"` \|`"PT-pt"` | `"EN-en"` | El idioma en el cual se presentan las etiquetas. Solo están soportados `ingles`, `francés`, `portugués` y `español` por ahora. |
129| method | `"POST"` \| `"PUT"` \| `"PATCH"` | `"POST"` | El tipo de método HTTP para subir el archivo |
130| maxFiles | `number` | 7 | Max `number` of files to be accepted. If the value is 1, will click event dialog to allow just asingle file |
131| maxFileSize | `number` | `undefined` | Tamaño máximo de archivo admitido. Si no esta presente, no será considerado el tamaño del archivo enla validación. |
132| maxHeight | `string` | "500px" | El tamaño máximo del contenedor en formato string. p.e. `'50vh' , '20%', '40em', '1rem'` |
133| onChange | `Function` | `undefined` | El evento `onChange` ocurre cuando el valor de la lista de archivos cambia. |
134| onChangeView | `Function` | `undefined` | El evento `onChangeView` ocurre cuando el modo de vista ha cambiado. El primer parámetro es el valor actual de tipo de vista (`view`) |
135| onDrop | `Function` | `undefined` | El evento `onDrop` es disparado cuando se sueltan archivos al interior de la dropzone. Normalmente se utiliza para recibir los nuevos archivos que fueron soltados. |
136| uploadOnDrop | `boolean` | `false` | Si es verdadero, el evento `onDrop` retirnará una lista de archivos, pero también subirá los archivos si es que la url fue dada |
137| url | `string` | `undefined` | La url o endpoint hacia donde subir los archivos |
138| validator | `(f: File) => boolean` | undefined | Debe ser una función que reciba como primer parámetro un objeto `File` y debe retornar un valor booleano. Esta funcón será empleada en lugar del validador por defecto. |
139| view | `"grid"` \| `"list"` | `"grid"` | `grid` mustra los archivos en una distribucion de grilla. `list` mostraá los items en una lista horizontal. Conveniente para guardar espacio en la página. |
140| value | `FIleValidated[]` | [ ] | La lista actual de archivos |
141
142## FileItem API
143
144### Props
145
146| Name | Type | Default | Description | |
147| --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
148| file | `File` | `undefined` | El archivo en si mismo. (objeto `File`) |
149| hd | `boolean` | `undefined` | Si está presente, la vista previa en pantalla completa será presentada en la resolución real de la imagen |
150| id | `string` \| `number` | `undefined` | identificador del archivo |
151| info | `boolean` | `false` | Si está presente, el boton de "info" y la capa de información serán visibles. |
152| localization [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://img.shields.io/badge/new-feature-green) | `"EN-en"` \| `"ES-es"` \|`"FR-fr"` \|`"PT-pt"` | `"EN-en"` | El idioma en el cual se presentan las etiquetas. Solo están soportados `ingles`, `francés`, `portugués` y `español` por ahora. |
153| onDelete | `Function` | `undefined` | Una funcion `Function` que describe que hacer cuando el boton "close" ha sido clickeado o presionado. |
154| onSee | `Function` | `undefined` | Una función `Function` que describe que hacer cuando el botón "see" es presionado o clickeado. Retorna como primer parámetro la url de la imagen en formato `string`. Si además, el prop `hd` está presente, esta función retornarála url de la imagen en su calidad máxima. De otra forma, retornará una imagen con la resolucion minimizada en aras de mejorar el rendimiento. |
155| preview | `boolean` | `false` | Si esta presente, y si `onSee` está presente, el botón "see" será visible y disparaá la función `onSee` |
156| uploadMessage | `string` | `undefined` | El mensaje para mostrar cuando el servidor responda. |
157| uploadStatus | `undefined` \| `"uploading"` \| `"success"` \| `"error"` | `undefined` | El estado del proceso de subida de archivo |
158| valid | `boolean` | `false` | Indica si mostrar un mensaje de valido o rechazado ("valid", "denied"). Por defecto el valor de `valid` es `false` (si no está presente, también es `false`) Este valor afecta el comportamento de la vista previa. Si no es valido el archivo, la vista previa no será mostrada, tampoco el botón para abrir la vista previa, aún cuando `onSee` y `preview` están presentes. La funcionalidad para ´permitir mostrar la vista previa, aún cuando el archivo de imagen es no valido, es una caracteristica que se agregará en futuras versiones. |
159
160## FullScreenPreview API
161
162### Props
163
164| Name | Type | Default | Description |
165| --------- | ---------- | ----------- | ----------------------------------------------------------------- |
166| imgSource | `string` | `undefined` | La representacionen string-url de la imagen |
167| onClose | `Function` | `undefined` | Funcion que describe el comportamiento al cerrar la vista previa. |
168| openImage | `boolean` | `false` | Flag que inica si abrir o cerrar la vista previa |
169
170## FileItemContainer API
171
172### Props
173
174| Name | Type | Default | Description |
175| -------- | -------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
176| children | `node` | `true` | El contenido del componente. Normalmente una lista de `FileItem` components. Por defecto, el componente `Dropzone` ya utiliza este componente para contener la lista de componentes `FileItem`. |
177| view | `"grid"` \| `"list"` | `"grid"` | `grid` mustra los archivos en una distribucion de grilla. `list` mostrará los items en una lista horizontal. Conveniente para guardar espacio en la página. |
178
179## InputButton API
180
181### Props
182
183| Name | Type | Default | Description |
184| ----------- | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
185| accept | `string` | `undefined` | Es una cadena de caracteres que contiene una lista de mime types y extenciones de archivo (`.extension`) separados por comas, el cual se compara con los atributos de un archivo para determinar si es válido o no. P.E.: `"image/\*, application/pdf, .psd"` |
186| color | `string` | `"#071e25"` | El color principal del botón. (p.e. "#FFFFFF", "rgb(255,12,45)") |
187| disabled | `boolean` | `false` | define si el botón estará deshabilitado o no. |
188| id | `string` | `undefined` | el id del componente |
189| label | `string` | "Browse ..." | Si está presente, tomara este valor como la etiqueta del botón |
190| maxFileSize | `number` | `undefined` | Tamaño máximo de archivo permitido en bytes |
191| multiple | `boolean` | `false` | Si esta presente o es verdadero, aceptará multiples archivos. |
192| onChange | `Function` | `undefined` | Función que describe que hacer luego de seleccionar los archivos. Retorna un objeto File[] como primer parámetro |
193| style | `React.CSSProperties` | {} | El estilo objeto de estilo in-line |
194| text | `"uppercase"` \| `"capitalize"` \| `"lowercase"` \| `"none"` | `"capitalize"` | La transformación del texto dentro del botón. |
195| textColor | `string` | "white" | El color de la letra en caso la variante (`variant`) sea `"contained"` |
196| validator | (f: `File`) => `boolean` | `undefined` | Debe ser una función que reciba como primer parámetro un objeto `File` y debe retornar un valor booleano. Esta función, si está presente, será usada en lugar de la función de validación por defecto. |
197| variant | `"text"` \| `"outlined"` \| `"contained"` | `"contained"` | La variante del botón |
198
199## License
200
201Este proyecto está licenciado bajo los terminos de la
202[Licencia MIT](/LICENSE).