used Dropzone instead of react-dropzone

app/static/app/js/classes/TempLayer.js

@@ -1,9 +1,11 @@
 import shp from 'shpjs';
 import Spinner from 'spin';
 
-export function addTempLayer(file, rejected, _this) {
+export function addTempLayer(file, _this) {
+  let maxSize = 10485760;
+
   //random color for each feature
-  let getColor = (_geojson) => {
+  let getColor = () => {
     return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
   }
 
@@ -16,17 +18,13 @@ export function addTempLayer(file, rejected, _this) {
   //show wait spinner
   var spinner = new Spinner({ color: '#fff', lines: 12 }).spin(_this.map._container);
 
-  if (typeof rejected !== 'undefined' && rejected.length > 0) {
+  if (file && file.size > maxSize) {
     let err = {};
-    if (rejected[0].size > _this.maxTempLayerSize) {
+    err.message = "File is bigger than 10 MB.";
-      err.message = "File is bigger than " + _this.maxTempLayerSize + " bytes";
-    } else {
-      err.message = "Data error";
-    }
     writeMessage(err);
   } else {
     //get just the first file
-    file = file[0];
+    //file = file[0];
     let reader = new FileReader();
     let isZipFile = file.name.slice(-3) === 'zip';
     if (isZipFile) {
@@ -35,16 +33,14 @@ export function addTempLayer(file, rejected, _this) {
         if (reader.readyState != 2 || reader.error) {
           return;
         } else {
-          if (isZipFile) {
           shp(reader.result).then(function (geojson) {
             addLayer(geojson);
           }).catch(function (err) {
-              err.message = "Not a proper zipped shapefile!";
+            err.message = "Not a proper zipped shapefile " + file.name;
             writeMessage(err);
           })
         }
       }
-      }
       reader.readAsArrayBuffer(file);
     } else {
       //geojson file
@@ -53,7 +49,7 @@ export function addTempLayer(file, rejected, _this) {
           let geojson = JSON.parse(reader.result);
           addLayer(geojson);
         } catch (err) {
-          err.message = "Not a proper json file!";
+          err.message = "Not a proper json file " + file.name;
           writeMessage(err);
         }
       }

app/static/app/js/components/Map.jsx

@@ -7,17 +7,17 @@ import '../vendor/leaflet/L.Control.MousePosition.css';
 import '../vendor/leaflet/L.Control.MousePosition';
 import '../vendor/leaflet/Leaflet.Autolayers/css/leaflet.auto-layers.css';
 import '../vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers';
+import Dropzone from '../vendor/dropzone';
 import $ from 'jquery';
 import ErrorMessage from './ErrorMessage';
 import SwitchModeButton from './SwitchModeButton';
 import ShareButton from './ShareButton';
 import AssetDownloads from '../classes/AssetDownloads';
-import {addTempLayer} from '../classes/TemplateLayer';
+import {addTempLayer} from '../classes/TempLayer';
 import PropTypes from 'prop-types';
 import PluginsAPI from '../classes/plugins/API';
 import Basemaps from '../classes/Basemaps';
 import update from 'immutability-helper';
-import Dropzone from 'react-dropzone';
 
 class Map extends React.Component {
   static defaultProps = {
@@ -174,6 +174,15 @@ class Map extends React.Component {
   }
 
   componentDidMount() {
+    var thisComponent = this;
+    var mapTempLayerDrop = new Dropzone(this.container, {url : "/", clickable : false});
+    mapTempLayerDrop.on("addedfile", function(file) {
+      addTempLayer(file, thisComponent);
+    });
+    mapTempLayerDrop.on("error", function(file) {
+      mapTempLayerDrop.removeFile(file);
+    });
+    
     const { showBackground, tiles } = this.props;
 
     this.map = Leaflet.map(this.container, {
@@ -275,27 +284,19 @@ class Map extends React.Component {
     if (this.shareButton) this.shareButton.hidePopup();
   }
 
-  onDrop(file, reject, _this) {
-    addTempLayer(file, reject, _this);
-  }
-
   render() {
     return (
-      <Dropzone
+      <div style={{height: "100%"}} className="map">
-      onDrop={(accepted, rejected) => { this.onDrop(accepted, rejected, this) }} disableClick={true} 
-      maxSize={this.maxTempLayerSize} multiple={false}
-      >
-        {({ getRootProps, getInputProps }) => (
-          <div {...getRootProps()} style={{ height: "100%" }} className="map">
         <ErrorMessage bind={[this, 'error']} />
 
-            <div {...getInputProps()}
+        <div 
           style={{height: "100%"}}
           ref={(domNode) => (this.container = domNode)}
           onMouseDown={this.handleMapMouseDown}
           >
         </div>
         
+
         <div className="actionButtons">
           {this.state.pluginActionButtons.map((button, i) => <div key={i}>{button}</div>)}
           {(!this.props.public && this.state.singleTask !== null) ? 
@@ -311,8 +312,6 @@ class Map extends React.Component {
             public={this.props.public} />
         </div>
       </div>
-          )}
-      </Dropzone>
     );
   }
 }

package.json

@@ -51,7 +51,6 @@
     "raw-loader": "^0.5.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-dropzone": "^8.0.3",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
     "react-test-renderer": "^15.6.1",