fortana-co / react-dropzone-uploader

React file dropzone and uploader
https://react-dropzone-uploader.js.org/
MIT License
446 stars 183 forks source link

Typescript errors #161

Open ericehamlin opened 3 years ago

ericehamlin commented 3 years ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-dropzone-uploader@2.11.0 for the project I'm working on.

When using this library with typescript, there were a couple of errors during compilation resulting from assigning potentially undefined values to typed values.

Here is the diff that solved my problem:

diff --git a/node_modules/react-dropzone-uploader/dist/Dropzone.tsx b/node_modules/react-dropzone-uploader/dist/Dropzone.tsx
index da29a80..4133ead 100644
--- a/node_modules/react-dropzone-uploader/dist/Dropzone.tsx
+++ b/node_modules/react-dropzone-uploader/dist/Dropzone.tsx
@@ -518,8 +518,10 @@ class Dropzone extends React.Component<IDropzoneProps, { active: boolean; dragge
     const formData = new FormData()
     xhr.open(method, url, true)

+    // @ts-ignore
     for (const field of Object.keys(fields)) formData.append(field, fields[field])
     xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+    // @ts-ignore
     for (const header of Object.keys(headers)) xhr.setRequestHeader(header, headers[header])
     fileWithMeta.meta = { ...fileWithMeta.meta, ...extraMeta }

@@ -714,6 +716,7 @@ class Dropzone extends React.Component<IDropzoneProps, { active: boolean; dragge
         submitButton={submitButton}
         dropzoneProps={{
           ref: this.dropzone,
+          // @ts-ignore
           className,
           style: style as React.CSSProperties,
           onDragEnter: this.handleDragEnter,

This issue body was partially generated by patch-package.

prmichaelsen commented 2 years ago

see https://github.com/fortana-co/react-dropzone-uploader/issues/108#issuecomment-1083621257

c0ncentus commented 1 year ago

see #108 (comment)

I look into the code deeply. I have a "soft ts-compiler" (strict false, null and no strict on null/undefined) and raise big error when delete it.

all "@ts-ignore " is an issue itself because javascript code can works with typescript like this.

im working to make modern dropzone with functions only (working with react v18.2, and will have less feature, I trying to compact the code also) ... so i'll post my code as alternative ...

I thinking this issue pointing the root of all evil....

PS: maybe at all, i will make real basic dopzone with W3C and MDN content lol : /