Hi Guys, I'm working with the package for a while now, So far is working great with 1 file upload but for some reason I can't make it work with multiple files.

FIrst let me tell you my stack:
In the back I'm using as follows:

• Nodejs
• Express js
• Type-Graphql
• Typeorm

In the front:

• Nextjs
• MUI
• Apollo Client.

So this is what is happening:

• When I make a submit with 1 file, we have no issues, it gets upload, creates the url and everything works nice.
• The problem is when uploading multiple files. So far I've been trying to change everything in the back, and for some reason I'm unable to make it work.
• But when I try to make a simple it actually works the uploading.
• So what I was able to figure it out. Is that the component is giving me an array of files .... But for some reason the input is generating something called 'fileList' (unfortunately is read only so I can't create that object) so I tried to create an object from the array, but still I was unable to make it work (Adding some screenshots)

So my question is, is there any form we can make this 'fileList' as result when using multiple files instead of just making an array of files ?

I'm happy to pair to figure out the issue/any solution, just send me an email ([email protected]

Regards,

Pablo.

In the console when I install this package
incomprehensible warnings are generated, these errors are related to internal files,

when i set the maxFiles={1}, the box aways show all the files i selected before, how to set the box only show the latest file i selected?

Hi,
not sure what you change after version 2.X but I install the new version of dropzone and its start complaning that I should install @types/dropzone-ui, but it looks like that something is wrong.

Could not find a declaration file for module 'dropzone-ui'. '/xxx/node_modules/dropzone-ui/build/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/dropzone-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'dropzone-ui';`

When I open the npm_modules the structure not look right I add the screenshot of that. Could you help me with that ?

config prop is not working

Add config object into config prop and nothing happens

The content in the children's prop should be visible always so you can add custom content when there are no items. This would allow you to add a image and anything else you want to the dropzone when it loads. However, the children's prop only shows once you select items to upload.

• Prop Name: children
• Prop Type: Node
• Prop Desc: The content of the component. Normally a list of FileItem components or a label

Describe the bug
Going to https://dropzone-ui.herokuapp.com/ renders a page with an Application Error from Heroku

To Reproduce
Steps to reproduce the behavior:

1. Go to https://dropzone-ui.herokuapp.com/
2. See error

Expected behavior
This URL would load the "Live demo and code generator", as indicated in the README

Screenshots

Desktop (please complete the following information):

• OS: OSX Ventura / 13.0.1 (22A400)
• Browser: Chrome
• Version: 108.0.5359.94 (Official Build) (arm64)

Additional context
N/A

Describe the bug
This domain is available for sale!

Describe the bug
I wanna to upload one picture. Then I delete it and then I would like to upload it again.
It doesn't work. I need to upload another picture and then I'll be able to upload the picture I wanted.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/complete-946hz?file=/src/index.js
2. Click on the dropzone
3. Upload one picture as for example then try to upload the same picture
4. You can't upload the same picture

Expected behavior
I would like to add a picture, then remove it add the same picture.

Desktop (please complete the following information):

• OS: windows 10
• Browser: chrome
• Version: 97

Hi there, as always, this is an amazing development you have over here. But I'm currently developing an application with the Backend using TypeGraphql so no need for axios. And I did not had it installed in the front-end but suddenly when I was implementing the dropzone component I got this error:

Which kind of force me to install axios.

Is there any chance we can make the package 'axios' independent ?

I placed it as a bug, but if is not up to you guys, feel free to close it.

Let me know if I can help you somehow.

@JinSSJ3 you already have my email so feel free to drop any question and if you like to pair also let me know.

Regards,

Pablo.

Describe the bug
on any action, console.log is called

"hideViewIcon false" on DropzoneHeader.tsx:41

To Reproduce
Do any action on

Any change on having more flexibility for the upload button.
location, styling, ...

Describe the bug
When you select same image as before to upload. It doesn't work. However this only happens in case of on click and not in case of drop.

To Reproduce
Steps to reproduce the behavior:

1. Click on dropzone.
2. Click on image to select from file manager.
3. Delete the file from dropzone.
4. Click on file menu to select same image again.
5. You'll see it's not showing in the dropzone.

Expected behavior
Image gets selected and previewed second time too via on click manner.

Describe the bug
Setting the following 2 props should result in replacing a single file, however it produces an error every other time. Also not crazy about the end-user experience of showing the files over the maxFile limit with errors on each. It should just replace the files up to the maxFiles size. (I have a workaround for both of these issues in the comment below).
maxFiles={1}
behaviour="replace"

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/dropzone-ui-complete-forked-4wempi
2. Drop a single image multiple times. Every other drop will produce a max files error

Expected behavior
No error should happen for a single file dropped multiple times.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hello,

I encountered a syntax error while using the '@dropzone-ui/react' library in my project. The error message is:

Compiled with problems:

ERROR in ./node_modules/@dropzone-ui/react/build/index.es.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\adiha\OneDrive\Desktop\projects\projects_frontend\node_modules\@dropzone-ui\react\build\index.es.js: Identifier 'e' has already been declared. (1:447)

I have tried the following steps to resolve the issue, but none of them worked:

1. Updating the package to the latest version.
2. Uninstalling and reinstalling the package.

I am using the following dependencies:

"dependencies": {
    "@dropzone-ui/react": "^7.0.2",
    "@react-oauth/google": "^0.9.0",
    "@reduxjs/toolkit": "^1.8.6",
    "@tinymce/tinymce-react": "^4.2.0",
    "aws-sdk": "^2.1361.0",
    "axios": "^0.26.1",
    "dropzone": "^6.0.0-beta.2",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.37",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-feather": "^2.0.10",
    "react-image-gallery": "^1.2.11",
    "react-loading-skeleton": "^3.1.0",
    "react-nl2br": "^1.0.4",
    "react-redux": "^8.0.4",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.0",
    "react-show-more-text": "^1.6.2",
    "react-slick": "^0.29.0",
    "react-tag-input": "^6.8.1",
    "react-waypoint": "^10.3.0",
    "redux-persist": "^6.0.0",
    "slick-carousel": "^1.8.1",
    "underscore": "^1.13.6"
  },

It would be great if you could look into this issue and provide some guidance on how to resolve it. If you need any further information or details, please let me know.

Thank you for your assistance!

Will there be an update to DropZone UI React to support React 18? Currently I am trying to upgrade my project to use 18 but I am unable to due to dropzone using react 17. I really like using DropZone UI and hope it will be upgraded soon.

Everytime I select multiple itens just for view, not upload, and I delete them to select new ones, the last deleted file comes back with selected files.
e.g.: I select files: 'a', 'b', 'c', and I delete all, being 'c' the last one deleted. Then I select 'd' and 'e', in this new selection, file 'c' appears in the list too.

Anyone has already seen something like this? And how could I solve it?
Note: I used the complete example to make a custom dropzone. In my case, the file list appears above dropzone, not inside.

The url information on the server does not appear in the preview!

Describe the bug
Whenever I try to use Dropzone component with children it shows

Property 'children' does not exist on type 'IntrinsicAttributes & DropzoneProps'

To Reproduce
Steps to reproduce the behavior:

1. Just try to use in project with React 18 and Typescript.

Expected behavior
It should allow me to use the Dropzone

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser: Any
• Version: 6.7.10

Is your feature request related to a problem? Please describe.
We need a className prop for header/footer to be added to "dz-ui-header" "and dz-ui-footer".

Describe the solution you'd like
Add headerClassName footerClassName to specify custom className for header and footer like

<Dropzone
    headerClassName={"headerCustomClass"}
    footerClassName={"footerCustomClass"}
>
  ...
</Dropzone>

Additional context
I tried to specify more than 10 file types with "accept" prop, and the width of the footer is too long, we have a custom css class to wrap the words to prevent line goes offscreen, but there is no way to add our custom class to footer. You can see an example in the following image:

Problem:
You are actually calling url : https://user-images.githubusercontent.com/43678736/132086672-3a856fda-823d-4997-b802-c7c640e6ef44.png to download image icon inside the dropzone. I would like to avoid using external url.

Idea:
It would be nice to set up image inside the repository or set up a param to request internal images.