Drag & Drop functionality

app/static/app/js/components/ProjectListItem.jsx

@@ -199,7 +199,8 @@ class ProjectListItem extends React.Component {
   render() {
     return (
       <li className="project-list-item list-group-item"
-         href="javascript:void(0);">
+         href="javascript:void(0);"
+         ref={this.setRef("dropzone")}>
         <div className="row no-margin">
           <div className="btn-group pull-right">
             <button type="button" 
@@ -242,12 +243,8 @@ class ProjectListItem extends React.Component {
             </a>
           </div>
         </div>
+        <i className="drag-drop-icon fa fa-inbox"></i>
         <div className="row">
-          <div className="dropzone" ref={this.setRef("dropzone")}>
-              <div className="dz-default dz-message text-center">
-              </div>
-          </div>
-
           {this.state.upload.showEditTask ? <UploadProgressBar {...this.state.upload}/> : ""}
           
           {this.state.upload.error !== "" ? 

app/static/app/js/css/ProjectListItem.scss

@@ -5,6 +5,39 @@
         font-weight: bold;
     }
 
+    .drag-drop-icon{
+        display: none;
+        position: absolute;
+        border-radius: 100%;
+        padding: 16px;
+        left: 48%;
+        top: 0;
+        font-size: 300%;
+        -webkit-animation: pulsate 0.5s ease-out;
+        -webkit-animation-iteration-count: infinite; 
+        animation: pulsate 0.5s ease-out;
+        animation-iteration-count: infinite; 
+        opacity: 0.5;
+    }
+
+    @-webkit-keyframes pulsate {
+        0% {opacity: 0.5;}
+        50% {opacity: 1.0;}
+        100% {opacity: 0.5;}
+    }
+     @keyframes pulsate {
+        0% {opacity: 0.5;}
+        50% {opacity: 1.0;}
+        100% {opacity: 0.5;}
+    }
+
+    &.dz-drag-hover{
+        .drag-drop-icon{
+            display: block;
+        }
+        background-color: #f7f7f7;
+    }
+
     .project-links{
         font-size: 90%;
         i{

app/templates/app/dashboard.html

@@ -25,7 +25,7 @@
 		{% if no_tasks %}
 			{% trans 'Upload Images' as upload_images %}
 			<p>
-				{% blocktrans %} To create a map, press the "{{ upload_images }}" button. {% endblocktrans %}
+				{% blocktrans %} To create a map, press the "{{ upload_images }}" button, or drag and drop some images into a project. {% endblocktrans %}
 			</p>
 			<p>
 				<ul>