yuvaleros / material-ui-dropzone Goto Github PK

Would be great if support for withMobileDialog higher order component could be added.
Thanks!

After moving from v2.4.1 to v2.4.3

My app throws:

Warning: Failed prop type: DropzoneArea: prop type initialFiles is invalid; it must be a function, usually from the prop-types package, but received undefined.

Would a single file mode fit into this project roadmap ?
By single file mode I mean :

• Can select maximum one file
• If new file is selected, replace the previous one
• Preview in the drop zone area

If this feature fits in this library, I would gladly work on a PR.

I am successfully using version 2.4.0 with material-ui 4 and suggest the dependencies are updated accordingly:

"@material-ui/core": "^3.6.1 || ^4.0.0",
"@material-ui/icons": "^3.0.2 || ^4.0.0",

OnDrop is returning each file one at a time but should be returning all dropped files

I need to customize the colors at the time of dragenter and dragleave to be able to assign a class when that event is executed. Please help-me
acceptClassName: classes.stripes,
rejectClassName: classes.rejectStripes,

Hi, the value of dropzoneText is now read from the component state and not the prop. Its value in the state is set only in componentDidUpdate, when the previous and current value of the dropzoneText-prop are different, what will normally not happen.

Updating this field's value will get rid from this MUI warning.

the state could be initialized from props so we can show the previw of existing files

We're already using snackbars in other parts of our app, and it would be great if we could style the material-ui-dropzone snackbars background colour to be what we want (so we can make it the same as in the rest of the app).

For example, our colour for success is not the green[600] used here

Cannot provide custom maxWidth example “md” or “lg” etc. to dialog.

Warning: Failed prop type: The fab variant will be removed in the next major release. The <Fab> component is equivalent and should be used instead.

I keep getting this warning when i drop files to dropzone

hey,
I really liked this component, thanks a lot...

Um,
I want to create my own custom file preview after each file's added to the dropzone area.
So, I need to define a new deleteHanlder

I absolutely know how to remove the file from files array
but don't know how to trigger the Dropzone removeHandler to delete the file from the area

Hi

I was wondering if there is a way to change / translate the static texts like "Drag and drop an image file here or click" or "Preview"?

Thanks for any help and great work!

Hi!

I really like this Dropzone, and the alerts are just awesome! However, it should be possible to change the text that appears inside each alert type.

Is that possible?

Hey first, cool lib guys 👍 thx

I would like to upload only one file, but I would like to be able to override my file loaded by uploading a new file without removing the first file uploaded before.

Is there an existing way to do that ?

Hi there,

(JSX attribute) DropzoneAreaProps.dropzoneText?: string | undefined

I think it woud be better to change the type to :

React.ReactNode | undefined

I got an error as below when I try to use material-ui-dropzone in ReactJs

ERROR in ./node_modules/material-ui-dropzone/src/index.js
Module parse failed: /home/buddhik/Documents/InternWork/React/licensemanager/node_modules/material-ui-dropzone/src/index.js Unexpected token (106:31)
You may need an appropriate loader to handle this file type.
|     }
|
|     handleRequestCloseSnackBar = () => {
|         this.setState({
|             openSnackBar: false,
 @ ./src/scenes/license/RequestLicense.jsx 13:26-57
 @ ./src/app.jsx
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
webpack: Failed to compile.

Here is my webpack.config.js file.

const path = require('path');

module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        index: './index.js',
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                }],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015', 'react'],
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpg|svg|cur|gif|eot|svg|ttf|woff|woff2)$/,
                use: ['url-loader'],
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: 'style-loader',
                }, {
                    loader: 'css-loader',
                }, {
                    loader: 'sass-loader',
                }],
            },

        ],
    },
    resolve: {
        extensions: ['.js', '.json', '.jsx', '.scss'],
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        publicPath: '/dist',
        historyApiFallback: {
            index: '/dist/bundle.js',
          }
    },

};

And here my package.json file.

{
  "name": "reference-react-app",
  "version": "1.0.0",
  "description": "Reference React App",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean": "rimraf dist",
    "dev": "webpack-dev-server --hot --inline --progress --history-api-fallback",
    "lint": "eslint . --ext .jsx --ext .js",
    "build": "webpack -p"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "axios": "^0.17.0",
    "history": "^4.7.2",
    "material-design-icons": "^3.0.1",
    "material-ui": "^0.19.4",
    "material-ui-dropzone": "^1.0.3",
    "react": "^15.6.1",
    "react-cookies": "^0.1.0",
    "react-dom": "^15.6.1",
    "react-pagination-table": "^1.1.0",
    "react-router": "^2.8.1",
    "react-router-server-location": "^2.0.0",
    "resolve-url-loader": "^2.1.1",
    "universal-cookie": "^2.1.2",
    "url-loader": "^0.6.2"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "eslint": "^4.3.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0",
    "html-loader": "^0.5.0",
    "rimraf": "^2.6.1",
    "react-router": "^2.8.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

Environment

Steps to reproduce

The issue occurs whenever a snackbar is supposed to be shown.

I reverted back to v.2.0.0 and there it works as intended.

Stack trace

index.es.js:1448 Uncaught ReferenceError: classNames is not defined
at SnackbarContentWrapper (index.es.js:1448)
at mountIndeterminateComponent (react-dom.development.js:14592)
at beginWork (react-dom.development.js:15082)
at performUnitOfWork (react-dom.development.js:17903)
at workLoop (react-dom.development.js:17944)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at replayUnitOfWork (react-dom.development.js:17224)
at renderRoot (react-dom.development.js:18037)
at performWorkOnRoot (react-dom.development.js:18919)
at performWork (react-dom.development.js:18826)
at performSyncWork (react-dom.development.js:18799)
at requestWork (react-dom.development.js:18676)
at scheduleWork (react-dom.development.js:18480)
at Object.enqueueSetState (react-dom.development.js:12143)
at DropzoneArea.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:386)
at FileReader.reader.onload (index.es.js:1666)

The DropzoneDialog currently does not accept many of the arguments the default DropzoneArea does.

How to hide console logs when drag file and submit

As the library already uses Material-UI I would make use of the <Typography/> component for texts to make sure it works well with the current's app theme.

When using the dropzonearea the property dropzonetext is available. For the dialog it should be possible to adapt dropzonetext, dialogtitle and buttoncaptions.

It would be more consistant if material-ui-dropzone only used CSS or JSS, instead of both. An all JSS solution might be the better route to align with Material-UI v4 goals.

Is there any plan to update the codebase to support the new material-ui versions (v3)? and react-dropzone?

When completing a file drag action, I get the following error log in the console. (I thing it's just a log and not a true error).

Not presenting this as critical, just reporting the error message in case it's helpful. I tried stepping through the debug logs things quickly got convoluted so I'm not sure I can offer much help beyond sharing the message and that SnackbarContentWrapper seems to be the only class using theme.spacing.unit

index.js:1375 Warning: Material-UI: theme.spacing.unit usage has been deprecated.
It will be removed in v5.
You can replace `theme.spacing.unit * y` with `theme.spacing(y)`.

You can use the `https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api` migration helper to make the process smoother.

I am trying to add xml files but it is unable to support it.Would be great if this feature is added.

Thanks

Hello there !

It seems the interface for DropzoneArea is missing some styling props :

export interface DropzoneAreaProps { acceptedFiles?: string[]; filesLimit?: number; maxFileSize?: number; dropzoneText?: string; showPreviews?: boolean; showPreviewsInDropzone?: boolean; showFileNamesInPreview?: boolean; showAlerts?: boolean; clearOnUnmount?: boolean; onChange?: (files: any) => void; onDrop?: (files: any) => void; onDropRejected?: (files: any, evt: any) => void; onDelete?: (file: any) => void; }

props I need :

<DropzoneArea ... dropZoneClass ... dropzoneParagraphClass ... />

Thanks 👍

Hey there !

It would be nice to have props to be able to translate the alerts texts (file added, removed, bad type, too large, ...)

Is there any way to initialize the drop-zone area with existing files?
As i want to add images with already uploaded images, so want to initialize the drop-zone area with existing and show to the user in drop-zone area.

How do I change the icon to use the CloudUploadOutlined icon in the dropzone for consistency within my app? Maybe introduce a prop for it?

How to reset/clear dropzone after a function call or api call.

The property showFileNamesInPreview did not drag across to the type defintions (index.d.ts) of of DropzoneArea. It can therefore not be used in typescript. I'll create a pull request.

Hey!

I created TS definition based on code source. Could you please include it?

File: index.d.ts

Source Code :

export interface DropzoneAreaProps {
        acceptedFiles?: string[];
        filesLimit?: number;
        maxFileSize?: number;
        dropzoneText?: string;
        showPreviews?: boolean;
        showPreviewsInDropzone?: boolean;
        showAlerts?: boolean;
        clearOnUnmount?: boolean;
        onChange?: (files: any) => void;
        onDrop?: (files: any) => void;
        onDropRejected?: (files: any, evt: any) => void;
        onDelete?: (file: any) => void;
    }
export const DropzoneArea: React.ComponentType<DropzoneAreaProps>;

export interface DropzoneDialogProps {
        open: boolean
        onSave?: (files: any) => void;
        onDelete?: (file: any) => void;
        onClose?: () => void; 
        onChange?: (files: any) => void; 
        onDrop?: (files: any) => void; 
        onDropRejected?: (files: any, evt: any) => void; 
        acceptedFiles?: string[];
        filesLimit?: number; 
        maxFileSize?: number 
        showPreviews?: boolean;
        showPreviewsInDropzone?: boolean; 
        showAlerts?: boolean; 
        clearOnUnmount?: boolean; 
}
export const DropzoneDialog: React.ComponentType<DropzoneDialogProps>;

I find this pretty misleading:

message += File ${file.name} successfully uploaded. ;
To where uploaded? Isn't it just selected that moment?

@Yuvaleros @skoging Hey guys. I would like to know when is the new release going to happen with the current changes.

Thanks.

Hi, I am trying to get the file names to show up in the preview. I set the prop showFileNamesInPreview=true inside and but the names do not show up. The files imported are txt and pdf files.

Thanks in advance

I wanted to add new styles such as padding, text color, background etc. I tried using the dropzoneClass attribute to do so. But the UI is not updating. Can you please provide an example on how to add custom styles?

Hello

I see your changes but it's not published yet can you publish it so we can use latest functionality, it's still showing v2.3.5

it's show published 2 month ago

https://www.npmjs.com/package/material-ui-dropzone

Thanks

When I set the filesLimit={3}, drag and drop more than 3 files, it accepts and does not alert.

Module not found: Can't resolve '@material-ui/icons/CloudUpload

Needs an additional npm install @material-ui/icons --save to resolve

it should be declared as other class methods

Following the documentation example:

class DropzoneAreaExample extends Component{
  constructor(props){
    super(props);
    this.state = {
      files: []
    };
  }
  handleChange(files){
    this.setState({
      files: files
    });
  }
  render(){
    return (
      <DropzoneArea 
        onChange={this.handleChange.bind(this)}
        />
    )  
  }
} 

I keep track of all files dropped. Then I want to do something with them, e.g. when the user clicks a Submit button I send them to the server. At this point I want to clear the list of files, because they have been processed. I can clear the files array within the state of DropzoneAreaExample but I don't have control over the list of fileObjects internal to DropzoneArea! That list only clears on unmount!

I managed a hack by setting the key property of DropzoneArea to an incrementing counter, which triggers the unmount and re-renders as I want it but it would be nice if there was a better way to handle this.

How does everyone else do it anyway?
I suppose I could bind to onDrop instead of onChange but then I can't make good use of the preview anymore

Allow the abillity of change anchorOrigin of snackbar.
Could be great to add this feature, i´ve allready do it in local.

Only this changes:
Dropzone.propTypes:

  snackBarAnchorOrigin: PropTypes.object,

Dropzone.defaultProps

Dropzone.defaultProps = {
  preventDropOnDocument: true,
  disabled: false,
  disableClick: false,
  inputProps: {},
  multiple: true,
  maxSize: Infinity,
  minSize: 0,
  getDataTransferItems: getDataTransferItems,
  snackBarAnchorOrigin:{
      vertical: 'bottom',
      horizontal: 'left'
  }
};

and render

this.props.showAlerts && React.createElement(
Snackbar,
  {
    anchorOrigin: this.props.snackBarAnchorOrigin,
    open: this.state.openSnackBar,
    autoHideDuration: 6000,
    onClose: this.onCloseSnackbar
  },

Use:

 <DropzoneArea snackBarAnchorOrigin={{ vertical: 'top', horizontal: 'right' }} />

I have the dropzone in a stepper. If I loose the focus, I want to re-display the files that were initially uploaded.

After upgrading from 2.4.1 to 2.4.2, I'm now seeing the following error:

ReferenceError: regeneratorRuntime is not defined

The error for when the file size is too large is confusing, because it says it is the wrong type, when really it's too large.

Hi! Great component.
Just, it does not change the name of the dropzoneArea:

      <DropzoneArea
        dropzoneText={'Upload files.'}
         .....

I have tried with brackets, without, etc... It does not change :D
Any help is very welcome, as well as this awesome tool.