Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-dropzone

Package Overview
Dependencies
Maintainers
1
Versions
189
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dropzone - npm Package Compare versions

Comparing version 1.2.4 to 1.3.0

27

index.js
var React = require('react');
var Dropzone = React.createClass({
displayName: 'Dropzone',
getDefaultProps: function() {

@@ -21,9 +24,10 @@ return {

onDragLeave: React.PropTypes.func,
size: React.PropTypes.number,
width: React.PropTypes.number,
height: React.PropTypes.number,
style: React.PropTypes.object,
className: React.PropTypes.string,
activeClassName: React.PropTypes.string,
supportClick: React.PropTypes.bool,
accept: React.PropTypes.string,
multiple: React.PropTypes.bool
multiple: React.PropTypes.bool,
},

@@ -46,11 +50,2 @@

// set active drag state only when file is dragged into
// (in mozilla when file is dragged effect is "uninitialized")
var effectAllowed = e.dataTransfer.effectAllowed;
if (effectAllowed === 'all' || effectAllowed === 'uninitialized') {
this.setState({
isDragActive: true
});
}
if (this.props.onDragOver) {

@@ -101,3 +96,3 @@ this.props.onDragOver(e);

if (this.state.isDragActive) {
className += ' active';
className += (' ' + this.props.activeClassName) || ' active';
}

@@ -110,4 +105,4 @@

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

@@ -114,0 +109,0 @@ };

2

package.json
{
"name": "react-dropzone",
"version": "1.2.4",
"version": "1.3.0",
"description": "Simple HTML5 drag-drop zone in React",

@@ -5,0 +5,0 @@ "main": "index.js",

78

README.md
react-dropzone
=================
==============
Simple HTML5 drag-drop zone for file uploads in React.js.
Simple HTML5 drag-drop zone for files in React.js.

@@ -11,5 +11,7 @@ [![Screenshot of Dropzone](https://raw.githubusercontent.com/paramaggarwal/react-dropzone/master/screenshot.png)](http://paramaggarwal.github.io/react-dropzone/)

Installation
=====
============
The easiest way to use react-dropzone is to install it from npm and include it in your React build process (using [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/), etc).
```sh
```
npm install --save react-dropzone

@@ -21,14 +23,6 @@ ```

Simply `require('react-dropzone')` and specify an `onDrop` method that accepts an array of dropped files. You can customize the content of the Dropzone by specifying children to the component.
Simply `require('react-dropzone')` and specify an `onDrop` method that accepts an array of dropped files.
You can specify a `style` object to apply some basic styles to the `Dropzone` component, or alternatively use the `className` property to style the component with custom CSS.
You can customize `<Dropzone>` by specifying children and passing a `style` or `className`. By default, the component picks up some default styling to get you started.
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.
You can alternatively specify a `size` property which is an integer that sets both `style.width` and `style.height` to the same value.
By default the drop zone can be clicked to bring up the browser file picker. To disable this the `supportClick` property should be set to `false`.
Also multiple files can be uploaded to the drop zone, but this can be disabled by setting the `multiple` property to `false`. The allowed file types can be controlled by the `accept` property, using the same syntax as the [HTML <input> accept Attribute](http://www.w3schools.com/tags/att_input_accept.asp).
Example

@@ -51,3 +45,3 @@ =====

<div>
<Dropzone onDrop={this.onDrop} width={150} height={100}>
<Dropzone onDrop={this.onDrop}>
<div>Try dropping some files here, or click to select files to upload.</div>

@@ -63,27 +57,14 @@ </Dropzone>

Using `react-dropzone` is similar to using a file form field, but instead of getting the `files` property from the field, you listen to the `onDrop` callback to handle the files. Simple explanation here: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax
Features
========
The `onDrop` provides you with an array of [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) which you can then send to a server. For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
- `supportClick` - Clicking the `<Dropzone>` brings up the browser file picker. To disable, set to `false`.
- `multiple` - To accept only a single file, set this to `false`.
- `accept` - The allowed file types can be controlled by the `accept` property, using the same syntax as the [HTML <input> accept Attribute](http://www.w3schools.com/tags/att_input_accept.asp).
```javascript
onDrop: function(files){
var req = request.post('/upload');
files.forEach((file)=> {
req.attach(file.name, file);
});
req.end(callback);
}
```
To show a preview of the dropped file while it uploads, use the `file.preview` property. Use `<img src={file.preview} />` to display a preview of the image dropped.
Starting `v1.1`, you can now immediately show a preview of the dropped file while it uploads. The `file.preview` property can be specified as the image source: `<img src={file.preview} />` to display a preview of the image dropped.
To trigger the dropzone manually (open the file prompt), call the component's `open` function.
Triggers
========
It may be useful to trigger the dropzone manually (opening the file prompt), to do that, you can call the component's `open` function.
For example:
```jsx
/** @jsx React.DOM */

@@ -95,3 +76,5 @@ var React = require('react');

onDrop: function (files) {
console.log('Received files: ', files);
this.setState({
files: files
});
},

@@ -106,3 +89,3 @@

<div>
<Dropzone ref="dropzone" onDrop={this.onDrop} size={150} >
<Dropzone ref="dropzone" onDrop={this.onDrop} >
<div>Try dropping some files here, or click to select files to upload.</div>

@@ -113,2 +96,6 @@ </Dropzone>

</button>
{this.state.files ? <div>
<h2>Uploading {files.length} files...</h2>
<div>this.state.files.map((file) => <img src={file.preview} />)</div>
</div> : null}
</div>

@@ -122,2 +109,19 @@ );

Uploads
=======
Using `react-dropzone` is similar to using a file form field, but instead of getting the `files` property from the field, you listen to the `onDrop` callback to handle the files. Simple explanation here: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax
Specifying the `onDrop` method, provides you with an array of [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) which you can then send to a server. For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
```javascript
onDrop: function(files){
var req = request.post('/upload');
files.forEach((file)=> {
req.attach(file.name, file);
});
req.end(callback);
}
```
License

@@ -124,0 +128,0 @@ =======

.editorconfig
.eslintrc
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc