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 " + _this.maxTempLayerSize + " bytes";
-    } else {
-      err.message = "Data error";
-    }
+    err.message = "File is bigger than 10 MB.";
     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,14 +33,12 @@ 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!";
-              writeMessage(err);
-            })
-          }
+          shp(reader.result).then(function (geojson) {
+            addLayer(geojson);
+          }).catch(function (err) {
+            err.message = "Not a proper zipped shapefile " + file.name;
+            writeMessage(err);
+          })
         }
       }
       reader.readAsArrayBuffer(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,44 +284,34 @@ class Map extends React.Component {
     if (this.shareButton) this.shareButton.hidePopup();
   }
 
-  onDrop(file, reject, _this) {
-    addTempLayer(file, reject, _this);
-  }
-
   render() {
     return (
-      <Dropzone
-      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 style={{height: "100%"}} className="map">
+        <ErrorMessage bind={[this, 'error']} />
 
-            <div {...getInputProps()}
-              style={{ height: "100%" }}
-              ref={(domNode) => (this.container = domNode)}
-              onMouseDown={this.handleMapMouseDown}
-            >
-            </div>
+        <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) ?
-                <ShareButton
-                  ref={(ref) => { this.shareButton = ref; }}
-                  task={this.state.singleTask}
-                  linksTarget="map"
-                />
-                : ""}
-              <SwitchModeButton
-                task={this.state.singleTask}
-                type="mapToModel"
-                public={this.props.public} />
-            </div>
-          </div>
-          )}
-      </Dropzone>
+        <div className="actionButtons">
+          {this.state.pluginActionButtons.map((button, i) => <div key={i}>{button}</div>)}
+          {(!this.props.public && this.state.singleTask !== null) ? 
+            <ShareButton 
+              ref={(ref) => { this.shareButton = ref; }}
+              task={this.state.singleTask} 
+              linksTarget="map"
+            />
+          : ""}
+          <SwitchModeButton 
+            task={this.state.singleTask}
+            type="mapToModel" 
+            public={this.props.public} />
+        </div>
+      </div>
     );
   }
 }

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",