react-dropzone / react-dropzone Goto Github PK

For activeClassName or rejectClassName to work, className must be set.

This looks like a great component I'd use someday. Could you make the styles optional? If I were to use this in any real project, I'd want to control the styling myself.

I tried to this component but end up with error:

Here is my code:

var Dropzone = require('react-dropzone');

var PfUpload = React.createClass({
    render: function () {

        var style = {
            backgroundImage: "url(" + this.props.img + ")",
            position: 'relative'
        };

        if(this.props.editing) {
            return (
                <div id="pf-upload" style={style}>
                    <Dropzone onDrop={this._onDrop} size={42}>
                    </Dropzone>
                </div>
            );
        }

        return (
            <div id="pf-upload" style={style}>
            </div>
        );
    },

    _onDrop: function(file) {
        console.log(file);
    }
});

module.exports = PfUpload;

Hi,
Is it only me or there are really unbalanced brackets in sample code.
And how on earth it is working here on github in read.me file?

I don't even dare to ask about the magic that lets HTML in render function to return successfully (no quoting?).

var component = React.createClass({

  fileHandler: function(file) {
      uploadScript(file, uploadURL, function(err, res) {
        if (res.code == 200) {console.log("Upload success.")}
      });
    }
  },

  render: function() {
    return (
      <div>
        <Dropzone handler={this.fileHandler} size={200} message="Drag and drop a file here"/>
      </div>
    );
  }
});

I had to modify the onDragOver() to get it to work.

I am using Chrome Version 45.0.2426.0 canary (64-bit)

It seems like its common practice from this post: http://stackoverflow.com/a/9319200/130910

Steps to reproduce:

1. Choose a file A from file system in dropzone
2. onDrop does fire, the file eventuanaly sent
3. Modify body of the file A
4. Choose the same file
5. onDrop does not fire since it mapped to onChange form's event

Could fix if by adding the following line to onClick function.

React.findDOMNode(this.refs.fileInput).value = null;

When having a dropzone component on the page, but dropping a file outside it, browser is performing a default action (like, displaying an image or downloading a file etc.) for this file. This is very annoying IMO. I think better UX would be to prevent the default action on the whole document when dropzone is present on the page. I'm not sure if this might cause some inconsistent behavior with other components, but I don't believe so. Anyway, I think this should be an opt-out prop (enabled by default).

This project needs build scripts / build instructions to help people contribute to the project.

I tried just putting the generated markup in the Dropzone tag but it complained about the DOM being mutated.

<Dropzone onDrop={(files) => this.handleFileUpload(files) } multiple={false}>
    <div>Try dropping some a file here, or click to select a file to upload.</div>
    {filesMarkup}
</Dropzone>

In your example code this.state may be null causing the this.state.files to error out on the console.

                {this.state.files ? <div>
                    <h>Uploading {files.length} files...</h>
                </div> : null}

For the file input, I'd like to be able to not have "multiple" set to true, and to configure the "accept" attribute. It would be nice to pass those attributes down in props.

I encountered this in an isomorphic app, I'm importing dropzone at the top of a component:

import Dropzone from 'react-dropzone';

However, when the Express server is executed, it returns ReferenceError: document is not defined for the following line:

var supportMultiple = document && document.createElement ? 'multiple' in document.createElement('input') : true;

I haven't looked at the changes that were introduced to know what the best solution is, however, since document doesn't exist in node, maybe the assignment to supportMultiple could be done in componentDidMount instead.

Moving back to =3.1.0 works for now

Newbie here guys. I could not get the component to render and it is showing me this error.

Below are my codes and it was working fine until I added the component in App.js.

Any help will be appreciated!

Is it possible to filter files when Dialog is open, I would like user to see only image files: png & jpg.

A check should be made that those classes are defined before adding them

Hi,
Could you create additional example how to use react-dropzone to upload file?

if in component set param accept, when user drops file into dropZone returns exception
http://screencast.com/t/VCM8DHhWGfds

<Dropzone
onDrop={this.props.onDrop}
className={className}
accept=".docx"
disableClick="true" ref="dropzone"
activeClassName="dropzone_active_yes"

When i try to add the file to the dropzone again, my ondrop doesnt do anything. Even in the demo, the received files doesnt change

Tried this on ios and pop up to select camera/camera roll does not appear.

Please get rid of forced inline width and height styling, styling should be left to css.

Same with DragActive, it should just add / remove a class

var style = this.props.style || {
  width: this.props.size || 100,  //get rid of these two lines please
  height: this.props.size || 100,  //get rid of these two lines please
  borderStyle: this.state.isDragActive ? 'solid' : 'dashed'
};

I'm getting errors on this line in the onDragEnter function:

var dataTransferItems = Array.prototype.slice.call(e.dataTransfer ? e.dataTransfer.items : e.target.files);

because e.dataTransfer.items is undefined. I believe this is supposed to read e.dataTransfer.files to match up with the rest of the usages.

For reference here's the mozilla documentation on the DataTransfer object: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

Just curious to see if there have been tests on the various browsers w/ this package... mainly for IE.

you get an error of Unexpected call to method or property access.
the error is happening here

It seems like IE only allows you access that property in the onDragStart event.

you can try a demo here: http://output.jsbin.com/vanulay

Looks like it's this issue. If I have time I'll open a PR to fix it. We're causing this with just the following code

<Dropzone className='dropzone-component' activeClassName='dropzone-component__active'
  onDrop={this.onUploadHero} size={150}>
  Upload Background Image
</Dropzone>

Greetings.
With new version 1.0.2 of https://github.com/okonet/attr-accept file upload raises error: accept is not a function.

Discussion already has been starter in #77 but I think it's easier to track as a separate issue.

My suggestion would be

1. Upgrade the code to React 0.14
2. Release a new major version 3.0 of the package
3. Leave the 2.x as a maintenance branch for React 0.13 support

WYT?

Would be nice to have support for client-side previews

Hi, while looking at the source code, it seems like the module may not fully support Radium yet, mainly due to this restriction:

style: React.PropTypes.object,
activeStyle: React.PropTypes.object,

For Radium can accept an array of style objects and merge them. Would you be willing to accept a PR which would fix this?

The legacy (string) style of ref is causing a ref error when implementing in a nested and component-passed-as-props fashion. Updating to the callback style of ref fixes the error:

change line 115 to: var fileInput = this._fileInput;

change line 180 to: ref={_ => this._fileInput = _}

I tried to make a pull request but couldn't.

If no style or className properties are defined, the style object will default to the width and height properties (or 100px if they aren't defined) along with a borderStyle of "solid" or "dashed" depending on if drag actions are taking place.

It doesn't seem you can actually specify width or height props:

  propTypes: {
    onDrop: React.PropTypes.func.isRequired,
    size: React.PropTypes.number,
    style: React.PropTypes.object,
    supportClick: React.PropTypes.bool,
    accept: React.PropTypes.string,
    multiple: React.PropTypes.bool
  },

this.props.width and this.props.height aren't used at all in the source.

As a solution I've passed style={{width: N, height: N}} but by doing so that doesn't set the borderStyle appropriately. Since I've supplied a style prop it is ignoring the borderStyle here.

var style = this.props.style || {
    width: this.props.size || 100,
    height: this.props.size || 100, 
    borderStyle: this.state.isDragActive ? 'solid' : 'dashed'
};

I guess that is expected based on the quoted section of the README above but I don't think it's preferable since it's not really possible to recreate the borderStyle when dragging over using style.

Also the docs don't mention the supportClick, accept, or multiple properties.

To test this, pop open the demo in Chrome and head over to an OS/X application like iTunes.

Select one or more files (I am using 3 for the sake of testing) and drag them into the drop area. The hover event will fire, but onDrop never occurs and the files are never actually uploaded.

How it's supposed to validate, for example, file size? Or separate valid files from invalid ones?

How about introducing smth like validate callback? We can pass each dropped file there, split them by returned result and then pass corresponding arrays to onDropAccepted and onDropRejected.

Also, it's said "We might want to disable the preview creation to support big files", but there is no way to detect whether file is actually "big". So we should either disable previews at all, or create previews for everything. Maybe, it's worth to add another function to check whether preview for particular file should be created?

And, shouldn't it be this.props.disablePreview here?

I'm testing a prototype and wanted to include this module directly in between <script> tags like so:

<script type="text/jsx">

var Dropzone = React.createClass({

          getDefaultProps: function() {
            return {
              disableClick: false,
              multiple: true
            };
          },

          getInitialState: function() {
            return {
              isDragActive: false
            };
          },

 // etc ..

I'm also including React in my footer scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

However, this doesn't seem to be working. I get a console error around this line. Something to do with the 'style' line:

<input
                  type='file'
                  ref='fileInput'
                  style={{ display : 'none' }}
                  multiple={this.props.multiple}
                  onChange={this.onDrop}

it says unexpected :

Is it not possible to implement this way?

Hello,

When installing with npm the index.js is still in jsx format. I'd love to use it directly without having to compile it as a 3p lib within my application. Could you compile to JS as part of the build?

A bit new to react so if there is a better way I'd love to know!
Thanks.

Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

Hi,
look like 2.x issue with curly bracket as i got somewhere in commits that for disabling multiple attribute as below:
multiple={false}

The above string works perfect but below string not working
multiple="false"
multiple={this.props.multiple}

so looks like its curly bracket issue? below code does not throw error but also does not disable multiple upload.

return (
            <div>
                {this.state.files.length > 0 ? <div>
                <div>{this.state.files.map((file) => <img src={file.preview} style={{width:100}} /> )}</div>
                </div> : <Dropzone ref={this.props.id} onDrop={this.onDrop} multiple={this.props.multiple}>
                    <div>Try dropping some files here, or click to select files to upload.</div>
                </Dropzone>
                }
            </div>
        );

Related to #14

Currently, with the latest published version on npm, I cannot require and use this module (I get the following error: Cannot find module 'reactify' from 'node_modules/react-dropzone').

Looking more closely, it appears the reactify Browserify transform is listed in the package.json (recently changed to babelify on master branch, but the same issue persists).

This error is then caused because reactify (now babelify) is not listed in the dependencies section anywhere, so npm install does not install it and thus Browserify can't run the transform.

This in and of itself is an issue, but the bigger issue is that the module is requiring the consumer to perform any transpilation. Instead, the source should be transpiled before publishing to npm so that no extra build step is required for the consumer of the library.

See this StackOverflow question for more information; the general guidance is to create a separate location for your compiled code (which is optionally added to .gitignore), add your source code to .npmignore, and then add the compile step to the prepublish hook in your package.json to automate the whole thing.

Edit: In my original post I assumed Babel was being used to transpile the core component source, but I see now it is only used for the demo page. In that case the demo page should have it's own package.json which handles this so the core project can remain pure—otherwise this issue is going to persist.

for some reason if I use <Dropzone .../> without a className, everything works fine, but adding my own <Dropzone className="dropzone" ... /> breaks JSX compile because of

Error: Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string.

You'll have to use something like this:

...
var className = "dropzone",
    style = DropzoneStyle;

if (this.props.className) {
  className = this.props.className;
  style = false;
}

return (<div ... className={className} style={style} ...>
  ...
</div>);

Hi, I need to disable the click on entire dropzone box (still allowing to drop files), and I need to add a trigger to open the file prompt.

What do you think about creating a function open, that does same thing as onClick (this.refs.fileInput.getDOMNode().click()), but that can be called from outside (using this.ref.dropzoneComponent.open() for example)?

I will submit a PR for that!

As this project is picking up steam, lets plan where we should take it next.

[Updated items as per suggestions in the comments below]

• Add tests
• disabled state

file drop is super useful, but it can be made even better by giving the dropzone a "click to open a file dialog for file selection", to effect a "file drop" that way.

Looking at all regressions produced by latest PRs I feel that we should focus on stability now. This should include adding ESLint and Unit tests.

• Add linting with ESLint
• Add unit tests

When Dropping in a folder of files it treats the folder a 1 file. It would be nice if files and sub folders could be represented when one single folder is dropped in the drop zone. I'm not sure if this is a limitation of the HTML5 input file type or not.

Input is standart html tag. There should be an option for passing props to input element or option for passing custom input element which you can clone/extend in DropZone component.

The README.md shows

  fileHandler: function(file) {
    uploadScript(file, uploadURL, function(err, res) {
      if (res.code == 200) {console.log("Upload success.")}
    });
  },

but makes no mention of what uploadScript is supposed to do, or where uploadURL comes from. (just a console.log(file, uploadURL) throws an error, suggesting it doesn't actually exist for use inside the fileHandler, which means this example can't be used with the code as-is)

Where does this callback variable come from in the example in the readme here:

https://github.com/paramaggarwal/react-dropzone#uploads

Should use FormData instead. See ladjs/superagent#746

I wasn't able to diagnose the issue's root cause, but I can't get the active class to appear at all. Maybe it's because you need to preventDefault on the nativeEvent as well? Firefox seems to have strict rules about what counts as a valid drop target.