UNPKG

62.3 kBMarkdownView Raw
1:rocket: [Spanish README](./README_ES.md)
2
3# Dropzone UI
4
5The `best`, most complete and `easy to use`, [React](https://reactjs.org/) file upload library.
6
7:zap: Live demo and code generator : [dropzone-ui.com](https://dropzone-ui.herokuapp.com/)
8
9:heart: it ?, support us by giving a :star: on :octocat: [Github](https://github.com/dropzone-ui/dropzone-ui) :D
10
11[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dropzone-ui/react/blob/HEAD/LICENSE)
12[![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)
13[![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)
14[![kandi X-Ray](https://kandi.openweaver.com/badges/xray.svg)](https://kandi.openweaver.com/typescript/dropzone-ui/dropzone-ui-react)
15[![Node.js CI](https://github.com/dropzone-ui/react-dropzone/actions/workflows/node.js.yml/badge.svg)](https://github.com/dropzone-ui/dropzone-ui-react)
16[![Build Status](https://app.travis-ci.com/dropzone-ui/dropzone-ui-react.svg?branch=master)](https://app.travis-ci.com/dropzone-ui/dropzone-ui-react)
17[![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)
18[![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/)
19[![Known Vulnerabilities](https://snyk.io/test/github/dropzone-ui/react/badge.svg)](https://snyk.io/test/github/dropzone-ui/react)
20[![Package Quality](https://packagequality.com/shield/dropzone-ui.svg)](https://packagequality.com/#?package=dropzone-ui)
21[![install size](https://packagephobia.com/badge?p=@dropzone-ui/react)](https://packagephobia.com/result?p=@dropzone-ui/react)
22[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/dropzone-ui/react.svg)](http://isitmaintained.com/project/dropzone-ui/react)
23[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
24[![GitHub Repo stars](https://img.shields.io/github/stars/dropzone-ui/react?label=Star%20me%20please%20:D&style=social)](https://github.com/dropzone-ui/react)
25
26<p align="center">
27 <img src="https://user-images.githubusercontent.com/43678736/148801752-954fa819-023d-4596-b557-56f7a38f4745.png" align="center">
28</p>
29
30## Key Features
31
32- :white_check_mark: File validation: Validate files before uploading.
33- :art: File Image previews: See a thumbnail preview
34- :framed_picture: [Full screen image previews](#image-full-screen-preview): Add more interacion with a full screen preview of images
35- :movie_camera: [Full screen video previews](#video-full-screen-preview). Play the video before uploading. [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://github.com/dropzone-ui/react-dropzone/releases/tag/v6.4.0)
36- :eyes: status visualization: validation and upload status is shown on a [Tooltip](https://codesandbox.io/s/dropzone-ui-fileitem-resultontooltip-h6hu7) or on [Info Layer](https://codesandbox.io/s/dropzone-ui-fileitem-resultontooltip-h6hu7).
37- :airplane: File upload: Upload valid files to a server.
38- :performing_arts: Out of the box design and style.
39- :cake: Easy to use. Probably, this is the killer feature you are looking for in a package.
40
41## Main Content
42
43Ordered by use:
44
45- :books: [\<Full Documentation\>](#dropzone-ui-react-components-api)
46
47- :performing_arts: [\<Examples and use cases\>](#Usage-and-examples)
48
49- :computer: [\<Server side implementation/>](#uploading)
50
51- :earth_americas: [\<Localization\>](#localization)
52
53- [Code generator](#code-generator)
54
55- [Supporters](#supporters)
56
57## Sample result:
58
59On `Drag`, `Drop`, `Upload` and full screen `preview`. (also changing view mode from `grid` to `list`).
60
61<p align="center">
62<a href="https://github.com/dropzone-ui/react#readme">
63<img align="center" width="100%" src="https://user-images.githubusercontent.com/43678736/139614260-602b512c-cf78-48fe-ae57-1057e7ec8135.gif" alt="dropone-ui-preview">
64</a>
65
66</p>
67
68- More previews [here](#more-previews).
69
70- Did you like the project? Please don't forget to give us a :star: star on :octocat: [GitHub](https://github.com/dropzone-ui/dropzone-ui) :D
71
72## Code generator
73
74Want to generate the code that fits your needs? Just interact with the code generator [here](https://dropzone-ui.herokuapp.com/).
75
76## Requirement
77
78`@dropzone-ui/react` is based on [React Hooks](https://reactjs.org/docs/hooks-intro.html). It requires `react v16.8+`.
79
80`@dropzone-ui/react` uses [axios](https://www.npmjs.com/package/axios) for uploading files. It requires `axios v0.24.0+`.
81
82## Installation
83
84@dropzone-ui/react is available as an [npm package](https://www.npmjs.com/package/@dropzone-ui/react).
85
86For uploading files, peer dependency [axios](https://www.npmjs.com/package/axios) must be also installed together with `dropzone-ui`.
87
88```sh
89// with npm
90npm i @dropzone-ui/react axios
91```
92
93```sh
94// with yarn
95yarn add @dropzone-ui/react axios
96```
97
98## Usage and examples
99
100Here is a quick example to get you started, **it's all you need**:
101
102```jsx
103import * as React from "react";
104import ReactDOM from "react-dom";
105import { Dropzone, FileItem } from "@dropzone-ui/react";
106Function App() {
107 const [files, setFiles] = React.useState([]);
108 const updateFiles = (incommingFiles) => {
109 setFiles(incommingFiles);
110 };
111 return (
112 <Dropzone onChange={updateFiles} value={files}>
113 {files.map((file) => (
114 <FileItem {...file} preview />
115 ))}
116 </Dropzone>
117 );
118}
119
120ReactDOM.render(<App />, document.querySelector("#app"));
121```
122
123Yes, it's really all you need to get started as you can see in these live and interactive demos:
124
125| Name | Codesandbox link |
126| --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
127| Dropzone Basic example | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/basic-3j01v?file=/src/index.js) |
128| Dropzone Complete example | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/complete-946hz?file=/src/index.js) |
129| File item props | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fileitem-props-o0w5x) |
130| VideoPreview [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dropzone-ui-videopreview-6m6he?file=/src/App.js) |
131| FileItem `alwaysActive` Prop [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/alwaysactive-w15h3) |
132| FileItem `resultOnTooltip` Prop [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dropzone-ui-fileitem-resultontooltip-h6hu7?file=/src/App.js) |
133| FileItem with no image preview | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dropzone-ui-file-item-with-no-image-preview-14i2m) |
134| InputFileButton & FileItemContainer | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/inputbutton-example-poqsn?file=/src/App.js) |
135| `localización`: multilanguage example | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/localization-6ew1i?file=/src/App.js) |
136| File Item `imageUrl` and synthetic files | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/imageurl-to-fileitem-m4801?file=/src/App.js) |
137| Default previews extensive list | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/defautl-preview-extensive-list-hrwm5?file=/src/App.js) |
138| headerClassName & footerClassName | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/headerclassname-footerclassname-m6dudw) |
139
140# Uploading
141
142Dropzone-ui provides a way to upload files to a server. However, in case you want to make your own upload function, you can take the files that Dropzone `onChange` event returns.
143
144For uploading files through dropzone-ui, you should follow at least this guidelines:
145
146- Server Endpoint should get the file from `req.files.file`.
147- Server Response should follow the [`DropzoneUIResponse`](#dropzoneuiresponse) structure for returning a response.
148
149## Server example
150
151Bellow, there is an example built in [Express.js](https://www.npmjs.com/package/express) wich you can use to create your own server side implementation. Other languages implementations are in construction.
152
153The complete code can be found [here](https://github.com/dropzone-ui/file-upload-server-side#readme).
154
155<a href="https://github.com/dropzone-ui/file-upload-server-side#readme">
156<img src="https://i.cloudup.com/zfY6lL7eFa-300x300.png" width="120px" height="35px" alt="server"/>
157</a>
158
159```js
160const express = require("express");
161const fileUpload = require("express-fileupload");
162// ... some code
163app.post("/upload-my-file", async (req, res) => {
164 try {
165 if (!req.files) {
166 res.send({
167 success: false,
168 message: "There was no file found in request",
169 payload: {},
170 });
171 } else {
172 //Use the name of the input field (i.e. "file") to retrieve the uploaded file
173 let file = req.files.file;
174 //Use the mv() method to place the file in upload directory (i.e. "uploads")
175 file.mv("./uploads/" + file.name);
176 //send response
177 res.send({
178 success: true,
179 message: "File was uploaded successfuly",
180 payload: {
181 name: file.name,
182 mimetype: file.mimetype,
183 size: file.size,
184 path: "/files/uploads/",
185 url: "https://my-ftp-server.com/bjYJGFYgjfVGHVb",
186 },
187 });
188 }
189 } catch (err) {
190 res.status(500).send({
191 status: false,
192 message: "Unexpected problem",
193 payload: {},
194 });
195 }
196});
197```
198
199# Localization
200
201Dropzone-ui is available in different languages. So far, we only support `English`, `Spanish`, `French` and `Portuguese`. In next releases this list will be increased.
202
203| Language | Code | Example |
204| ---------------------------------------- | ------- | ---------------------- |
205| English :us: :uk: | `EN-en` | localization="`EN-en`" |
206| Spanish :peru: :mexico: :argentina: :es: | `ES-es` | localization="`ES-es`" |
207| Fench :fr: | `FR-fr` | localization="`FR-fr`" |
208| Italian :it: | `IT-it` | localization="`IT-it`" |
209| Portuguese :brazil: :portugal: | `PT-pt` | localization="`PT-pt`" |
210| Russian :ru: | `RU-ru` | localization="`RU-ru`" |
211| Chinese(simplified) :cn: | `ZH-cn` | localization="`ZH-cn`" |
212| Chinese(traditional) :cn: | `ZH-hk` | localization="`ZH-hk`" |
213
214# Dropzone UI react Components API
215
216- [< Dropzone />](#dropzone-api)
217- [< FileItem />](#fileitem-api)
218- [< FullScreenPreview />](#fullscreenpreview-api)
219- [< VideoPreview />](#videopreview-api)
220 [![new-component](https://img.shields.io/badge/new-component-green.svg)](https://dropzone-ui.herokuapp.com)
221- [< FileItemContainer />](#fileitemcontainer-api)
222- [< InputButton />](#inputbutton-api)
223- [Special Types](#special-types-api)
224
225## Dropzone API
226
227### Props
228
229| Name | Type | Default | Description |
230| --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
231| accept | `string` | `undefined` | The accept attribute value is a string that defines the file types the `Dropzone` should accept. This string is a comma-separated list of unique file type specifiers, wich is compared with the file attributes in order to determine whether that file is valid or not: `"image/*, application/pdf, .psd"`. More info on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) . |
232| behaviour | `"add"` \| `"replace"` | `"add"` | The behaviour on drop files. `"add"` option will make `Dropzone` to add files to the current file list. `"replace"` option will make `Dropzone` to replace the current list of files |
233| children | `node` | `true` | The content of the component. Normally a list of `FileItem` components or a label |
234| clickable | `boolean` | `true` | If true, the dropzone component itself will be clickable |
235| config | Object | { headers: { "content-type": "multipart/form-data;", }, } | Extra configuration for uploading, normally an object with headers or bearer token- |
236| disableScroll [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | `boolean` | `undefined` | if present or `true`, removes scrolls and sets the `Dropzone` content (FileItemContainer) in a `grid` view. It also disables `maxHeight` prop. Only `minHeight` prop will work. This feature was added to work together with `resultOnTooltip` prop of `FileItem`. If not present or `false` , FileItemContainer will set csss property `"overflow"` as `"auto"`. |
237| fakeUploading | `boolean` | `undefined` | If true, this flag will make dropzone to simulate a server upload. Use only in development. |
238| footer | `boolean` | `true` | if true, shows the dropzone footer |
239| footerClassName | `string` | `undefined` | if given, css styles for fotter will be overriden.footer |
240| header | `boolean` | `true` | if true, shows the dropzone header |
241| headerClassName | `string` | `undefined` | if given, css styles for header will be overriden. |
242| label | `string` | "Drop your files here" | Label to place when no files selected |
243| localization | `"EN-en"` \| `"ES-es"` \| `"FR-fr"` \| `"PT-pt"`\| `"RU-ru"`\| `"ZH-cn"`\| `"ZH-hk"` | `"EN-en"` | The language to present labels. So far, only `English`, `Portuguese`, `French`,`Russian`, `Chinese` (simplifyed and traditional) and `Spanish` are suported. |
244| method | `"POST"` \| `"PUT"` \| `"PATCH"` | `"POST"` | The method for uploading. |
245| maxFiles | `number` | `undefined` | Max `number` of files to be accepted. If the value is 1, click event dialog will allow just a select a single file. (`multiple` prop on input tag will be false). If not set, vlidation will not consider a max amount of files and user will be allowed to drop or select `Infinity` files. |
246| maxFileSize | `number` | `undefined` | max file size allowed in bytes. if not preent, will not be considered on validating the file |
247| minHeight | `string` | "280px" | The min height of the container in string format. e.g. '50vh' , '20%', '40em', '1rem' . This not consider the space for Footer and Header. |
248| maxHeight | `string` | "450px" | The max height of the container in string format. e.g. '50vh' , '20%', '40em', '1rem'. This not consider the space for Footer and Header. |
249| onChange | (files: `FileValidated[]` ) => `void` | `undefined` | Probably one of the most important methods. The `onChange` event occurs when the value of the file list is changed. Returns as first paramater a list of [FileValidated](#filevalidated) . This event is also triggered when upload starts and when upload finishes for each file in order to update the props on very FIleItem |
250| onChangeView | `Function` | `undefined` | Event that ocurs when view mode has changed. First parameter is the current view mode. |
251| onDrop | (filesDropped: `FileValidated[]`)=> `void` | `undefined` | The onDrop event occurs when files are dropped indide the Dropzone or selected from file dialog. Normally used for retrieving the new files dropped as a list of [FileValidated](#filevalidated) |
252| onUploadStart | (files: `FileValidated[]`) => `void` | `undefined` | This event is triggered when upload process starts. Returns as first parameter the list of [FileValidated](#filevalidated) that will be uploaded. Unlike Onchange, onUploadStart will only return a list of files thta are candidates to be uploaded, in case they are valid or upload status is "error" |
253| onUploadFinish | onUploadFinish?: ( responses: `FileDuiResponse[]` ) => `void`; | `undefined` | This event returns as first aparameter the list of responses for each file after upload process. Responses are instances of [`FileDuiResponse`](#fileduiresponse). |
254| uploadOnDrop | `boolean` | `false` | If true, onDrop event will return the list of files, but also will upload the files if url was set, and also config |
255| url | `string` | `undefined` | The url endpoint to upload the files. Server response must match [DropzoneUIResponse](#dropzoneuiresponse) structure |
256| validator | (f: `File`) => `CustomValidateFileResponse` | `undefined` | Must be a function that recieves as first parameter a File Object instance and must return a [CustomValidateFileResponse](#customvalidatefileresponse) object with 2 fields: valid (boolean value) and `errors` a string array of errors. This function will be used instead of the default validator. |
257| view | `"grid"` \| `"list"` | `"grid"` | `grid` will display files in a grid layout. `list` will display files in a horizontal list. Convenient for saving space in page. If not given, `Dropzone` component will show "change view" button. If `view` is given, it´ll be hidden. |
258| value | `FIleValidated[]` | [ ] | The current list of Files |
259
260## FileItem API
261
262### Props
263
264| Name | Type | Default | Description |
265| ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
266| alwaysActive [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | `boolean` | `false` | Flag that makes all buttons visible. If false, the buttons and info will be visible on hover |
267| file | `File` | `undefined` | The actual `File` object instance |
268| errors | `string[]` | `undefined` | The list of errors according to the validation criteria or custom validation function given. |
269| elevation [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | `"1"` \| `"2"` \| `"3"` \| `"4"` \| `1` \| `2` \| `3` \| `4` \| `false` | `undefined` | Shadow depth for the FileItem container. |
270| hd | `boolean` | `undefined` | If present, preview on full screen will be presented in the real image resolution |
271| id | `string` \| `number` | `undefined` | identifier for the file |
272| info | `boolean` | `false` | If present, the info layer and the info button will ve visible |
273| imageUrl | `string` | `undefined` | A string base64 representation or web url of the image that will be set to the `"src"` prop of an `<img/>` tag `<img src={imageUrl} />`. If given, FileItem componnet will use this image instead of reading the image file. |
274| localization | `"EN-en"` \| `"ES-es"` \| `"FR-fr"` \| `"PT-pt"`\| `"RU-ru"`\| `"ZH-cn"`\| `"ZH-hk"` | `"EN-en"` | The language to present labels. So far, only `English`, `Portuguese`, `French`,`Russian`, `Chinese` (simplifyed and traditional) and `Spanish` are suported. |
275| onDelete | (id: `number` \| `string` \| `undefined`) => `void` | `undefined` | This event is triggered when close button is pressed or clicked. Returns as first parameter the if of the corresponding `FileItem` . If not given, `"delete"` button will not be visible. |
276| onSee | `Function` | `undefined` | This event is triggered when "see" button is pressed or clicked. Returns as first parameter the image url in string format. Normally used in `FullScreenPeview` component. If `hd` present, will return the image url in the real quality. Otherwise, will return a minimized image with less resolution in order to save memory. |
277| onWatch [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | `Function` | `undefined` | This event is triggered when "play" button is pressed or clicked. Returns as first parameter the video file object. Normally used in `VideoPreview` component. |
278| preview | `boolean` | `false` | If present, and if `onSee` present, "see" button will be visible and on click will trigger `onSee` function |
279| resultOnTooltip [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | `boolean` | `undefined` | Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem. |
280| uploadMessage | `string` | `undefined` | The message to display when server responds. The server response should follow the structure of an instance of [DropzoneUIResponse](#dropzoneuiresponse) |
281| uploadStatus | `undefined` \| `"uploading"` \| `"success"` \| `"error"` | `undefined` | The status of the upload process |
282| valid | `boolean` | `false` | whether to show a "valid" or "rejected" message ("valid", "denied"). By default valid is `false` (if not present, it's `false` too)This value will affect preview behaviour. If not valid, the preview will not be shown, nor the view button even when `onSee` and `preview` props are present. The functionality to allow to show preview despite of a not valid image file, is a feature that will be added in future releases. |
283
284## FullScreenPreview API
285
286### Props
287
288| Name | Type | Default | Description |
289| --------- | ---------- | ----------- | ----------------------------------------------------------------- |
290| imgSource | `string` | `undefined` | The url string representation of the image |
291| onClose | `Function` | `undefined` | A function that describes the close behaviour |
292| openImage | `boolean` | `false` | Flag that indicates whether to open the image preview or close it |
293
294## VideoPreview API
295
296### Props
297
298| Name | Type | Default | Description |
299| ----------- | ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
300| videoSource | `string` | `undefined` | The video source in `string` format or `File` object. When a File object is given `VideoPreview` component will check if video type is included in the supported formats. (`video/mp4`, `video/ogg`, `video/webm`). Normally used with `FileItem` component when returns this value in `onWatch` handler. |
301| onClose | `Function` | `undefined` | A function that describes the close behaviour |
302| openVideo | `boolean` | `undefined` | Flag that indicates whether to open the video preview or close it |
303| autoplay | `boolean` | `undefined` | Flag that indicates whether to play automatically the video or not. |
304| controls | `boolean` | `undefined` | Flag that indicates whether to display the controls in the video player or not. |
305
306## FileItemContainer API
307
308### Props
309
310| Name | Type | Default | Description |
311| --------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
312| children | `node` | `true` | The content of he component. Normally a list of `FileItem`. By default `Dropzone` component already uses this component for containing the `FileItem` list children. |
313| view | `"grid"` \| `"list"` | `"grid"` | `grid` will display files in a grid layout. `list` will display files in a horizontal list. Convenient for saving space in page. |
314| disableScroll [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://dropzone-ui.herokuapp.com) | `boolean` | `undefined` | if present or `true`, removes scrolls and sets the `FileItemContainer` in a `grid` view. It also disables `maxHeight` prop. Only `minHeight` prop will work. This feature was added to work together with `resultOnTooltip` prop of `FileItem`. |
315
316## InputButton API
317
318### Props
319
320| Name | Type | Default | Description |
321| ----------- | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
322| accept | `string` | `undefined` | The accept attribute value is a string that defines the file types the `InputButton` should accept. This string is a comma-separated list of unique file type specifiers, wich is compared with the file attributes in order to determine whether that file is valid or not: `"image/*, application/pdf, .psd"`. More info on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) . |
323| color | `string` | `"#071e25"` | The main color for the button. (e.g. "#FFFFFF", "rgb(255,12,45)") |
324| disabled | `boolean` | `false` | whether the button will be disabled or not |
325| id | `string` | `undefined` | the id of the component |
326| label | `string` | "Browse ..." | If given, this label will be showed inside the button |
327| maxFileSize | `number` | `undefined` | max file size allowed in bytes |
328| multiple | `boolean` | `false` | whether to accept multiple files or not |
329| onChange | `Function` | `undefined` | What to do after selecting the files. Returns the File[] as first parameter |
330| style | `React.CSSProperties` | {} | the in-line style object |
331| text | `"uppercase"` \| `"capitalize"` \| `"lowercase"` \| `"none"` | `"capitalize"` | The text transform for the text inside the button label |
332| textColor | `string` | "white" | The font color in case variant is `"contained"` |
333| validator | (f: `File`) => `CustomValidateFileResponse` | `undefined` | Must be a function that recieves as first parameter a File Object instance and must return a [CustomValidateFileResponse](#customvalidatefileresponse) object with 2 fields: valid (boolean value) and `errors` a string array of errors. This function will be used instead of the default validator. |
334| variant | `"text"` \| `"outlined"` \| `"contained"` | `"contained"` | The variant of the button |
335
336# Special Types Api
337
338## FileValidated
339
340This is the file structure that is used in `onChange` event from Dropzone. This object contains all the required props to work dynamically with `FileItem` component.
341
342```jsx
343export enum UPLOADSTATUS {
344 uploading = "uploading",
345 success = "success",
346 error = "error"
347}
348export interface FileValidated {
349 file: File;
350 valid: boolean;
351 id: number| string | undefined;
352 errors?: string[];
353 uploadMessage?: string;
354 uploadStatus?: undefined | UPLOADSTATUS;
355}
356```
357
358## FileDuiResponse
359
360This is the object structure for responses thatcomes from server when Dropzone `onUploadFinish` event is triggeed. This event returns an array of `FileDuiResponse` objects
361
362```jsx
363export interface FileDuiResponse {
364 id: number | string | undefined;
365 serverResponse: DropzoneUIResponse | {};
366}
367```
368
369## DropzoneUIResponse
370
371This is the response structure for each file that server must send when Dropzone perfoms the upload process.
372
373```jsx
374export interface DropzoneUIResponse {
375 status: boolean;
376 message: string;
377 payload: any;
378}
379```
380
381## UploadPromiseAxiosResponse
382
383This is the response object after uploading each file.
384
385```jsx
386export interface UploadPromiseAxiosResponse {
387 serverResponse: FileDuiResponse;
388 uploadedFile: FileValidated;
389}
390```
391
392## CustomValidateFileResponse
393
394This is the response structure for each file that server must send when Dropzone performs the upload process.
395
396```jsx
397export interface CustomValidateFileResponse {
398 valid: boolean;
399 errors?: string[];
400}
401```
402
403## Supporters
404
405Special thanks to these amazing people :star: :
406
407### :clap: Stargazers
408
409[![Stargazers repo roster for @dropzone-ui/dropzone-ui-react](https://reporoster.com/stars/dropzone-ui/dropzone-ui-react)](https://github.com/dropzone-ui/dropzone-ui-react/stargazers)
410
411### :clap: Forkers
412
413[![Forkers repo roster for @dropzone-ui/dropzone-ui-react](https://reporoster.com/forks/dropzone-ui/dropzone-ui-react)](https://github.com/dropzone-ui/dropzone-ui-react/network/members)
414
415## More Previews
416
417### Image full screen preview
418
419<p align="center"><img src="https://camo.githubusercontent.com/58e1d2e245bdd8a4eb7302bc0749ce9fd39bfade9838c4ed7fe9272d94e54eb4/68747470733a2f2f6465762d746f2d75706c6f6164732e73332e616d617a6f6e6177732e636f6d2f75706c6f6164732f61727469636c65732f3577786b31346f367a686c6f7a327a337a7970792e706e67" alt="Image full screen preview" width="100%"/></p>
420
421### Video full screen preview
422
423<p align="center"><img src="https://user-images.githubusercontent.com/43678736/148802895-9a5349a7-224d-44df-854b-19d6a1f2d30e.png" alt="Video full screen preview" width="100%"/></p>
424
425## License
426
427This project is licensed under the terms of the
428[MIT license](/LICENSE).
429
430<p align="center"><a href="https://github.com/dropzone-ui/react-dropzone#"><img src="http://randojs.com/images/barsSmallTransparentBackground.gif" alt="Animated footer bars" width="100%"/></a></p>
431
432<br/>
433<p align="center"><a href="https://github.com/dropzone-ui/react-dropzone#readme"><img src="http://randojs.com/images/backToTopButtonTransparentBackground.png" alt="Back to top" height="28"/></a></p>