'DropzoneAreaBase' is not exported from 'material-ui-dropzone'

[Kaliyani]

Bug Report

Describe the bug

Getting error like 'DropzoneAreaBase' not exported

Steps to reproduce

Installed material-ui-dropzone version 3.0.0
Please find my code below
``
import React, { useState } from "react";
import { DropzoneAreaBase } from "material-ui-dropzone";
import { Description, AttachFile } from "@material-ui/icons";
import WordImage from "assets/word.png";
import ExcelImage from "assets/excel.png";

export default function UploadPage() {
const [fileObjects, setFileObjects] = useState([]);
const handlePreviewIcon = (fileObject, classes) => {
const { type } = fileObject.file;
const iconProps = {
className: classes.image,
};

switch (type) {
  case "application/msword":
  case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
    return <Description icon={<img src={WordImage} />} {...iconProps} />;
  case "application/vnd.ms-excel":
  case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
    return <Description icon={<img src={ExcelImage} />} {...iconProps} />;
  default:
    return <AttachFile {...iconProps} />;
}

};
return (
<DropzoneAreaBase
fileObjects={fileObjects}
onAdd={(newFileObjs) => {
console.log("onAdd", newFileObjs);
setFileObjects([].concat(fileObjects, newFileObjs));
}}
onDelete={(deleteFileObj) => {
console.log("onDelete", deleteFileObj);
}}
getPreviewIcon={handlePreviewIcon}
/>
);
}
``

Expected behavior

Need to get DropzoneAreaBase as exported component from material-ui-dropzone

Versions

• OS: Windows
• Browser: NA
• @material-ui/core version: 4.9.2
• material-ui-dropzone version: 3.0.0

Additional context

Here i have attached my package.json file for more information.

[panz3r]

Hi @Kaliyani ,

Thanks for your feedback, DropzoneAreaBase and DropzoneDialogBase components are available with version 3.2.0 which is yet to be published to npm.

for now if you need to upgrade you can install the module directly from GitHub

❯ npm i yuvaleros/material-ui-dropzone#4fda0ea

(the same also works with yarn)

Thanks for your feedback and patience.

[Kaliyani]

Hi @panz3r,

I have downloaded the package from below GitHub,

npm i yuvaleros/material-ui-dropzone#4fda0ea

Still i am getting the same error. Please find the below screen shot.

Also i could see the component name DropzoneAreaBase is missspelled as DrozponeAreaBase.

My package.json file now looks like below,

[panz3r]

Hi @Kaliyani ,

Thanks again for your feedback, I checked and fixed an issue with the Typescript typings (the Drozpone typo).

You can try out with the latest version, installable by running

❯ npm i yuvaleros/material-ui-dropzone#34290a7

The component is correctly exported as DropzoneAreaBase (the actual issue was with the TS typings).

[Alarees]

hi, i have the same problem, the above npm code not working, it results error :

undefined ls-remote -h -t ssh://[email protected]/yuvaleros/material-ui-dropzone.git

@panz3r

[panz3r]

Hi @Alarees ,

Thanks for your feedback, I just made a quick test ( I created a new app using create-react-app and added material-ui-dropzone using yarn add yuvaleros/material-ui-dropzone#34290a7) and can confirm it worked.

The error you posted seems related to an npm or git issue.

[juanigaray]

Note that for panz3r's workaround to work you must have yarn installed!

[Sxoo]

Hey @panz3r,

Will 3.2.0 be added to npm anytime soon?

[panz3r]

Hi @Sxoo ,

Actually version 3.2.0 was wrongly published to NPM as version 3.1.0 😅 , unfortunately that version includes wrong TS typings so it's causing some issues (see #172 and #184 ).

I just pushed a fix for that to master and they will be published as version 3.2.1.

[panz3r]

Hi,

Version 3.2.1 is now complete but not yet released to npm.

In the meanwhile to install it you can do the following

❯ npm i yuvaleros/material-ui-dropzone#v3.2.1

(the same also works with yarn add)