Homework/Fakogram REACT project/node_modules/react-dropzone/examples/validator

By providing validator prop you can specify custom validation for files.

The value must be a function that accepts File object and returns null if file should be accepted or error object/array of error objects if file should be rejected.

```jsx harmony import React from 'react'; import {useDropzone} from 'react-dropzone';

const maxLength = 20;

function nameLengthValidator(file) { if (file.name.length > maxLength) {

return {
  code: "name-too-large",
  message: `Name is larger than ${maxLength} characters`
};

}

return null }

function CustomValidation(props) { const {

acceptedFiles,
fileRejections,
getRootProps,
getInputProps

} = useDropzone({

validator: nameLengthValidator

});

const acceptedFileItems = acceptedFiles.map(file => (

<li key={file.path}>
  {file.path} - {file.size} bytes
</li>

));

const fileRejectionItems = fileRejections.map(({ file, errors }) => (

<li key={file.path}>
  {file.path} - {file.size} bytes
  <ul>
    {errors.map(e => (
      <li key={e.code}>{e.message}</li>
    ))}
  </ul>
</li>

));

return (

<section className="container">
  <div {...getRootProps({ className: 'dropzone' })}>
    <input {...getInputProps()} />
    <p>Drag 'n' drop some files here, or click to select files</p>
    <em>(Only files with name less than 20 characters will be accepted)</em>
  </div>
  <aside>
    <h4>Accepted files</h4>
    <ul>{acceptedFileItems}</ul>
    <h4>Rejected files</h4>
    <ul>{fileRejectionItems}</ul>
  </aside>
</section>

); }

```