So I like your module it's simple and easy to work with but now I have decided to try it with multiple files but it doesn't work. My code looks like this: <FileUploader multiple={true} ... But it's still not able to upload multiple files. I tried also passing true argument as string but didn't work. Is this problem on my side or anybody has this issue too? Can you please fix this? Thanx.

Summary

This package would have some strange behaviors in Next.js where the file upload window would pop up twice when the upload button was clicked. Upon investigation it was seen that the click event fired twice when the component was clicked. Adding a event.stopPropagaiton to the UploadWrapper and the input component stops this behavior, allowing the component to function as intended.

Key Changes

• Added event.stopPropagation to the UploadWrapper and input components.

Check List

• [ ] The changes to the "Readme" file(if needed)
• [ ] The changes not breaking any old rule of the library or usage

Summary

[Removed Console Regarding the Potential Risk?]

Key Changes

• [List the changes to look for in this PR]

Check List

• [x] The changes to the "Readme" file(if needed)
• [x] The changes not break any old rule of the library or usage

No problems in Chrome. When I DnD a file in Firefox, my React app blows up with:

NoModificationAllowedError: Modifications are not allowed for this document

Per https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/clearData

Note: This method can only be used in the handler for the [dragstart](https://developer.mozilla.org/en-US/docs/Web/API/Document/dragstart_event) event, because that's the only time the drag operation's data store is writeable.

It looks like this code is doing clearData() in the drop handler: https://github.com/KarimMokhtar/react-drag-drop-files/blob/dev/src/useDragging.tsx#L56

This Stack Overflow is related: https://stackoverflow.com/questions/58201273/nomodificationallowederror-in-firefox-when-using-dnd-events

Hello, thank you for your job! I have a problem in Google Chrome when I try to reload the same file another time. If I upload a file, then change the state to null, and try to upload the same file again, the onChange or onSelect event doesn't fire. Prop value fileOrFiles={state} doesn't work

Summary

The typescript output was actually just es code output, not types. This fixes it so that the output is the actual declarations.

Key Changes

• Change build system to use esbuild, which is significantly faster
• Change test system to use vitest, which is significantly faster
• Change playground to use vite
• Fix typescript output
• Bump package versions

Version: 2.3.2

By default, when user drags file over drop zone, "Drop here" text appears. This is controlled with the hoverTitle property. For our use case, we want to disable this hover text completely. However, the hoverTitle does not seem to provide a way to disable this completely. Setting a blank string (''), null, or false all result in the default "Drop here" text showing. I can set to a single space hoverTitle=' ', but this still results in a gray dot showing upon hover.

Thanks @KarimMokhtar, for creating and sharing your work!

When we upload an image, and then try to upload the same image again, change event is not firing. Also is it possible to make it compatible with react 17?

Thanks for this well built library. In some projects, there was some need to add styles depends dragenter, dragout.

I think it would be better if parent component knows useDragging value is true or not.

I used forwardRef, useImperativeHandle.

Summary

Add a prop called 'dropMessageStyle' to style the HoverMsg element

Key Changes

• Add a type dropMessageStyle inside Props type
• Add style={dropMessageStyle} inside HoverMsg element

Check List

• [X] The changes to the "Readme" file(if needed)
• [X] The changes not breaking any old rule of the library or usage

Changes done:

• added multiple in FileUploader.tsx
• renamed file to fileOrFiles, as it can be an array of files now
• almost all the file change handler can now have either File or Array<File> based on multiple

the logic is pretty much the same, didn't changed any!

Merging this will resolve #31

I have recently started using this project, but I ran into a feature limitation.

I was wondering if it is possible to make the FileUploader only be drag and drop? I am using it to overlay a table, so it would be preferred if it does not open the select file dialog when clicking a cell.

Summary

Improved keyboard support for accessibility. And added basic required support.

I use the FileUploader component to push multiple files into an array. If users don't submit any files, I want the form to be invalid.

Example:

<FileUploader required={filesArray.length === 0} />

• When no files are submitted into the array, length is 0, mark the field as required and prevent progression (the input field itself has no value).
• When there are files in the array, remove the required attribute allowing progression.

Key Changes

• ability to toggle input required attribute
• improves accessibility by allowing the drop-zone to receive keyboard focus and show a visible focus indicator.

Check List

• [x] The changes to the "Readme" file(if needed)
• [x] The changes not breaking any old rule of the library or usage

It would be great if basic required validation was added. E.g:

<FileUploader required={isRequired} />

• add required as a prop
• apply required prop to input field
• change input css from display: none to display: block
• add input css opacity: 0;
• add input css position: absolute;
• add input css pointer-events: none;

The CSS changes mean:

• Native browser validation prompts display when required is set to true.
• The dropzone can receive keyboard focus and have a visible focus indicator (for accessibility, see WCAG 2.4.7)

Hi, I noticed the first two images take a long time to upload, about 7/8 seconds each. I've seen the same problem happen in the demo on codesandbox as well. There is something wrong on my side or it's a known bug? Thansk

I am having problem with file types. I want to accept *.lic files, and I can not get it to work... Here is my code:

import { FileUploader } from "react-drag-drop-files";

const fileTypes = ['lic'];

<FileUploader 
  label="Drop your license (*.lic) file here"
  handleChange={handleChange} 
  name="file" 
  types={fileTypes} 
/>

When I drag and drop my file DWX-J13M-DRCI-JQR1.lic the component would say error File type/size error, Hovered on types!.

What am I doing wrong?

Summary

The typescript output was actually just es code output, not types. This fixes it so that the output is the actual declarations.

Key Changes

• Change build system to use esbuild, which is significantly faster
• Change test system to use vitest, which is significantly faster
• Change playground to use vite
• Fix typescript output
• Bump package versions

Re-creates #77 with only one commit