```js
const express = require("express");
const fileUpload = require("express-fileupload");
// ... some code
app.post("/upload-my-file", async (req, res) => {
try {
if (!req.files) {
res.send({
status: false,
message: "There was no file found in request",
payload: {},
});
} else {
//Use the name of the input field (i.e. "file") to retrieve the uploaded file
let file = req.files.file;
//Use the mv() method to place the file in upload directory (i.e. "uploads")
file.mv("./uploads/" + file.name);
//send response
res.send({
status: true,
message: "File was uploaded successfuly",
payload: {
name: file.name,
mimetype: file.mimetype,
size: file.size,
path: "/files/uploads/",
url: "https://my-ftp-server.com/bjYJGFYgjfVGHVb",
},
});
}
} catch (err) {
res.status(500).send({
status: false,
message: "Unexpected problem",
payload: {},
});
}
});
```
# Localization
Dropzone-ui is available in different languages. So far, we only support `English`, `Spanish`, `French` and `Portuguese`. In next releases this list will be increased.
| Language | Code | Example |
| ---------------------------------------- | ------- | ---------------------- |
| English :us: :uk: | `EN-en` | localization="`EN-en`" |
| Spanish :peru: :mexico: :argentina: :es: | `ES-es` | localization="`ES-es`" |
| Fench :fr: | `FR-fr` | localization="`FR-fr`" |
| Italian :it: | `IT-it` | localization="`IT-it`" |
| Portuguese :brazil: :portugal: | `PT-pt` | localization="`PT-pt`" |
| Russian :ru: | `RU-ru` | localization="`RU-ru`" |
| Chinese(simplified) :cn: | `ZH-cn` | localization="`ZH-cn`" |
| Chinese(traditional) :cn: | `ZH-hk` | localization="`ZH-hk`" |
# Dropzone UI react Components API
- [< Dropzone />](#dropzone-api)
- [< FileItem />](#fileitem-api)
- [< FullScreenPreview />](#fullscreenpreview-api)
- [< VideoPreview />](#videopreview-api)
[](http://www.dropzone-ui.com)
- [< FileItemContainer />](#fileitemcontainer-api)
- [< InputButton />](#inputbutton-api)
- [Special Types](#special-types-api)
## Dropzone API
### Props
| Name | Type | Default | Description |
| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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) . |
| 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 |
| children | `node` | `true` | The content of the component. Normally a list of `FileItem` components or a label |
| clickable | `boolean` | `true` | If true, the dropzone component itself will be clickable |
| config | Object | { headers: { "content-type": "multipart/form-data;", }, } | Extra configuration for uploading, normally an object with headers or bearer token- |
| disableScroll [](http://www.dropzone-ui.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"`. |
| fakeUploading | `boolean` | `undefined` | If true, this flag will make dropzone to simulate a server upload. Use only in development. |
| footer | `boolean` | `true` | if true, shows the dropzone footer |
| header | `boolean` | `true` | if true, shows the dropzone header |
| label | `string` | "Drop your files here" | Label to place when no files selected |
| 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. |
| method | `"POST"` \| `"PUT"` \| `"PATCH"` | `"POST"` | The method for uploading. |
| 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. |
| maxFileSize | `number` | `undefined` | max file size allowed in bytes. if not preent, will not be considered on validating the file |
| 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. |
| 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. |
| 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 |
| onChangeView | `Function` | `undefined` | Event that ocurs when view mode has changed. First parameter is the current view mode. |
| 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) |
| 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" |
| 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). |
| 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 |
| url | `string` | `undefined` | The url endpoint to upload the files. Server response must match [DropzoneUIResponse](#dropzoneuiresponse) structure |
| 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. |
| 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. |
| value | `FIleValidated[]` | [ ] | The current list of Files |
## FileItem API
### Props
| Name | Type | Default | Description |
| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| alwaysActive [](http://www.dropzone-ui.com) | `boolean` | `false` | Flag that makes all buttons visible. If false, the buttons and info will be visible on hover |
| file | `File` | `undefined` | The actual `File` object instance |
| errors | `string[]` | `undefined` | The list of errors according to the validation criteria or custom validation function given. |
| elevation [](http://www.dropzone-ui.com) | `"1"` \| `"2"` \| `"3"` \| `"4"` \| `1` \| `2` \| `3` \| `4` \| `false` | `undefined` | Shadow depth for the FileItem container. |
| hd | `boolean` | `undefined` | If present, preview on full screen will be presented in the real image resolution |
| id | `string` \| `number` | `undefined` | identifier for the file |
| info | `boolean` | `false` | If present, the info layer and the info button will ve visible |
| imageUrl | `string` | `undefined` | A string base64 representation or web url of the image that will be set to the `"src"` prop of an `
