FileUploaderDropContainer - Cannot read property 'uuid' of undefined when dragging a file

[zbeedatm]

What package(s) are you using?

• carbon-components
• carbon-components-react

Summary

two issues:-

1. When dropping a file into the drag & drop panel I'm getting this error:
   "Uncaught TypeError: Cannot read property 'uuid' of undefined"

BTW: same issue with the example provided by carbon in this sandbox:
https://codesandbox.io/s/github/emyarod/carbon/tree/dnd-uploader-codesandbox/packages/react/examples/drag-and-drop-file-uploader

2. I had set multiple: false to prevent from selecting more than one file.
   So currently I can choose one file each time I browse, but the list of files will be incremented each time I pick a new file.

How to force the list items to display only the last selected one?

Relevant information

Sandbox:
https://codesandbox.io/s/brave-voice-bdrx0

[asudoh]

@emyarod Any thoughts...? Thanks!

[zbeedatm]

Can you please update...
Regards

[emyarod]

your code sandbox doesn't have the drag and drop uploader configured correctly and I cannot make any drop uploads. when I drop a file the browser will open the file (this doesn't happen in the Carbon component). the issue in the Carbon example is CORS related (ref codesandbox/codesandbox-client#667) and does not occur when testing outside of Code Sandbox

to only display the last selected file you will have to call setFiles and modify the files array after an upload action

[zbeedatm]

Thanks emyarod.
I had tested it on 2 modes:

1. Dev mode:
   =========
   1.1 - using localhost:3000
   When dropping a file nothing happens, when debugging I see that I'm reaching the onAddfiles but with empty files:

1.2. - using localhost:3000/MyAppName
MyAppName is a value that i sat in my router to enable navigating from a production mode when deploying the site into tomcat container:

<Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyAppName'}>

But then, when dropping a file it's opened in the browser (like it was dropped outside the container):

2. Production mode
   =============
   I built my site and deployed it on tomcat with port 8080, where my rest server side is setting there too... so there is no CORS issue!
   But facing same behavior as in 1.2. and getting this erro in Browser console:

Uncaught TypeError: Cannot read property 'uuid' of undefined

Besides

If the other functionality of browsing is working correctly, why it should differes with the dropping mode! If there is a CORS issue it will be for both behaviors as I get it!

[emyarod]

as mentioned in #4637 (comment), you can provide a value for the accept attribute as a workaround currently

[zbeedatm]

Still not working!

I'll explain...

1. I sat the accept value to my file extension (".dfproj")
   When dropping a file that doesn't fit the accept file extension values nothing happens and that is OK, but when dropping a file that fits the accept value the file is shown on the browser (as I showed in screenshot)

NOTE: the .dfproj file actually contains xml structure inside. it's an xml file

WORKAROUND: I used accept: [".xml",".dfproj"],

2. I tried to set the accept=[".jpg"], when I dropped a png image the image was opened on the browser (instead of my page, I need to do back to get back to my page).
   BUT, when I dropped a jpg image it WORKED FINE and the image was attached to the files set.

So, seems there is an issue with the mime types of some other extensions that you don't support.

[emyarod]

does this persist in #4681?