With these you can determine the limit, size, maximum and minimum width and length of the images and prevent them from loading. You can display the appropriate message with two parameters, (key, rules), using onWarning to warn the blocked images.

It can be used to inquire, display in modal, or display a message before it is deleted using features like onConfirmDelete, onDeleted, onClick, onSuccess.

A library that will make things easier within the React framework for galleries used for an article, product or advertisement system in general. You can set rules, track errors, make a special request, and customize all features.

$3

- Components
-
-
-
-
-

$3

| Props | Type | Default | Description |
|:------- |:------- |:-------- |:------- |
| action | String | empty | Route to upload. |
| className | String | empty | Classes to add to the parent component. |
| ssrSupport | Bolean | false | With true 'you can hide components on the service side. |
| inOrder | Bolean | false | With true adding can be done sequentially. |
| autoUpload | Bolean | true | Automatic upload after files are selected. |
| send | Object | {} | In addition to the base64 or blob URL data sent with the name data, different values can be sent. |
| headers | Object | {} | The data sent here is added to the Request Headers.
| style | Object | {} | Added to the parent component as a style property |
| accept | Array | ['jpg', 'jpeg', 'png', 'gif'] | It will block files sent outside the types of the requested types |
| initialState | Array | [] | Existing data is added to the state of type [{source: 'image url', name: '...'}]. |
| type | String | card | There are two different display options available in the package. These are card and list |
| sorting | Bolean OR Object | true | You can turn off sorting or customize it using false. Sorting |
| header | Bolean OR Function | true | You can close or add a custom holder. function({ images, accept, uploadFiles, openDialogue }) |
| footer | Bolean Or Function | false | function({ images, accept, uploadFiles, openDialogue }) |
| rules | Object | null | size, limit, width, height features can be limited. Rules |
| customRequest | Function | null | You can customize the http request in your own way. CustomRequest |
| source | Function | null | Enter the url of the photo from the returned answer. (response) => response.url |
| alias | Function | null | Can include the data of the image to be loaded in the object and change its name. (response) => ({ id: response.imageID, slug: response.slug }) |
| onSuccess | Function | empty | Return for uploaded image. function(image) |
| onWarning | Function | empty | Returns elements that do not conform to rules created in accept or rules. Rules |
| onDeleted | Function | empty | Returns the information of the deleted image. function(image) |
| onChange | Function | empty | Works when application starts and any state changes. |
| onSortEnd | Function | empty | It works when the position of pictures changes. function(images, { oldIndex, newIndex }) |
| onError | Function | empty | Returns status, response if http request fails. function({ status, response, image }) |
| onClick | Function | empty | Keeps clicks on the display card. onClick |
| onConfirmDelete | Function | empty | Attempting to delete the image will ask you one last time. onConfirmDelete

#### Sorting
Options for this feature can be found at this address. Sorting Props

`javascript

// OR

`

#### Rules
Images that do not comply with the specified rules will be eliminated during loading. Eliminated images will be returned in File format with the rules used in the type parameter.

`javascript
rules={{
limit: 10,
size: 20,
width: {
min: 1280,
max: 1920,
},
height: {
min: 720,
max: 1080
}
}}

accept={['jpg', 'jpeg']}

onWarning={(type, rules) => {
switch(type) {
case 'accept':
console.log(Only ${rules.accept.join(', ')})

case 'limit':
console.log('limit <= ', rules.limit)

case 'size':
console.log('max size <= ', rules.size)

case 'minWidth': case 'minHeight':
console.log('Dimensions > ', ${rules.width.min}x${rules.height.min})

case 'maxWidth': case 'maxHeight':
console.log('Dimensions < ', ${rules.width.max}x${rules.height.max})

default:
}
}}
/>
`

#### CustomRequest
With this feature, you can make the request more easily and how the values should be sent. The request in the package sends the data object received with blob as Content-Type: Application / json. In some cases, APIs may request data as a file or as a blob. In the case of a font that must be returned, the first parameter must be fixed as uid. onError is fully optional. Axios Example
`javascript
customRequest={({
uid,
file,
data, // blob
send,
action,
headers,
onProgress,
onSuccess,
onError
}) => {
const response = { url: '...' }

onProgress(uid, response)
onSuccess(uid, response)
onError(uid, {
action,
status,
response
})

return {
abort() {
// for cancels the request
}
}
}

source={response => response.url}
/>
`

#### onChange
With this feature, any changes work when a new image is added, deleted, or changed in order. The package will run once when it first starts.
`javascript
onChange={(images) => {
this.setState({ images }) // save current component
}}
/>
`

#### onClick
You can use it to hold clicks on the image. For example, you can save the sent parameter in state and use select, remove, abort, refresh functions.
`javascript
onClick={(image) => this.setState({ image })}
/>
`

#### onConfirmDelete
A nice solution to check the image one last time before it is deleted. Returns true 'by default. This confirms the deletion. You can return Promise data in the function.
``javascript
onConfirmDelete={(currentImage, images) => {
return window.confirm('Are you sure you want to delete?')
}}
/>
`
OR Promise alternative.

`javascript
onConfirmDelete={(currentImage, images) => {
return new Promise(resolve => {
// For example, you can affect the loading screen here
this.setState({ loading: true })

setTimeout(() => resolve(true), 1000)
})
}}
/>
`

$3

`javascript
import RUG, { DragArea, DropArea, Card, List } from 'react-upload-gallery'
`

#### DragArea
Thanks to the DragArea component you can import elements from the callback if you want to create a special image. To use the features [here] (https://github.com/clauderic/react-sortable-hoc#prop-types) you can look.

`javascript


{
(image) =>