[@mantine/dropzone] Add the getFilesFromEvent and validator props

[mpinedami]

Description

Add getFilesFromEvent and validator props to the Dropzone component, both are methods that React Dropzone supports

getFilesFromEvent prop

The Dropzone component a getFilesFromEvent prop that enhances the handling of dropped file system objects and allows more flexible use of them e.g. passing a function that accepts drop event of a folder and resolves it to an array of files adds plug-in functionality of folders drag-and-drop.

Though, note that the provided getFilesFromEvent fn must return a Promise with a list of File objects (or DataTransferItem of {kind: 'file'} when data cannot be accessed). Otherwise, the results will be discarded and none of the drag events callbacks will be invoked.

In case you need to extend the File with some additional properties, you should use Object.defineProperty() so that the result will still pass through our filter:

validator prop

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.

[rtivital]

Thanks!

[porkopek]

After upgrading to 5.9.1, the Dropzone component throws this exception

getFilesFromEvent is not a function

so it seems that providing a value to the getFilesFromEvent is mandatory.
Before this, dropzone worked without this prop

[porkopek]

As a workaround, I made it work with

<Dropzone

   getFilesFromEvent={e => {
          return Promise.resolve([...(e.target as EventTarget & HTMLInputElement)?.files]);
        }}
  ...
/>