Added support for multiple drag/drop images, as well as successive images.

css/app.css

@@ -229,18 +229,26 @@ strong {
 
 /* Drag and Drop area */
 /* line 84, ../sass/app.sass */
-#dropZone {
+.dropZone {
+  width: 900px;
+  height: 200px;
+  margin-bottom: 60px;
   background: url("../img/drag_placeholder.png");
 }
-/* line 86, ../sass/app.sass */
-#dropZone.dragging {
+/* line 89, ../sass/app.sass */
+.dropZone.dragging {
   -webkit-box-shadow: inset 0 1px 10px #09a1ec;
   -moz-box-shadow: inset 0 1px 10px #09a1ec;
   box-shadow: inset 0 1px 10px #09a1ec;
 }
 
+/* line 91, ../sass/app.sass */
+.droppedImage {
+  display: none;
+}
+
 /* Forms */
-/* line 93, ../sass/app.sass */
+/* line 99, ../sass/app.sass */
 input[type=text], input[type=password] {
   background: #fafafa;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -255,7 +263,7 @@ input[type=text], input[type=password] {
   border-radius: 4px;
 }
 
-/* line 100, ../sass/app.sass */
+/* line 106, ../sass/app.sass */
 textarea {
   background: #fafafa;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -270,44 +278,44 @@ textarea {
   border-radius: 4px;
 }
 
-/* line 107, ../sass/app.sass */
+/* line 113, ../sass/app.sass */
 input[type=text]:focus {
   color: #373737;
 }
 
-/* line 110, ../sass/app.sass */
+/* line 116, ../sass/app.sass */
 textarea {
   padding-left: 3px;
   width: 98%;
 }
-/* line 111, ../sass/app.sass */
+/* line 117, ../sass/app.sass */
 textarea:focus {
   color: #373737;
 }
 
-/* line 116, ../sass/app.sass */
+/* line 122, ../sass/app.sass */
 input[type=text] {
   padding: 3px;
 }
 
 /* Links */
-/* line 121, ../sass/app.sass */
+/* line 127, ../sass/app.sass */
 a {
   color: #09a1ec;
   text-decoration: none;
 }
-/* line 124, ../sass/app.sass */
+/* line 130, ../sass/app.sass */
 a:hover {
   color: #7fd2fa;
 }
 
-/* line 127, ../sass/app.sass */
+/* line 133, ../sass/app.sass */
 #container {
   width: 900px;
   margin: 0 auto;
 }
 
-/* line 131, ../sass/app.sass */
+/* line 137, ../sass/app.sass */
 header {
   padding-bottom: 40px;
   text-align: center;
@@ -315,12 +323,12 @@ header {
   margin: 0 auto;
 }
 
-/* line 137, ../sass/app.sass */
+/* line 143, ../sass/app.sass */
 .medianCutPalette h3 {
   margin-top: 20px;
 }
 
-/* line 140, ../sass/app.sass */
+/* line 146, ../sass/app.sass */
 .imageSection {
   margin-bottom: 80px;
   background: #111111;
@@ -337,7 +345,7 @@ header {
   display: table;
   clear: both;
 }
-/* line 145, ../sass/app.sass */
+/* line 151, ../sass/app.sass */
 .imageSection .imageWrap {
   -moz-border-radius-topleft: 10px;
   -webkit-border-top-left-radius: 10px;
@@ -350,23 +358,15 @@ header {
   float: left;
   margin-right: 20px;
   background: url(../img/dark_checkered_bg.png);
+  overflow: hidden;
 }
-/* line 152, ../sass/app.sass */
-.imageSection .imageWrap .targetImage {
-  -moz-border-radius-topleft: 10px;
-  -webkit-border-top-left-radius: 10px;
-  border-top-left-radius: 10px;
-  -moz-border-radius-bottomleft: 10px;
-  -webkit-border-bottom-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-/* line 154, ../sass/app.sass */
+/* line 160, ../sass/app.sass */
 .imageSection .colors {
   margin-top: 20px;
   width: 400px;
   float: left;
 }
-/* line 158, ../sass/app.sass */
+/* line 164, ../sass/app.sass */
 .imageSection .colors .function {
   clear: left;
   margin-bottom: 10px;
@@ -378,7 +378,7 @@ header {
   display: table;
   clear: both;
 }
-/* line 162, ../sass/app.sass */
+/* line 168, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch {
   width: 40px;
   height: 20px;
@@ -390,7 +390,7 @@ header {
   -o-transition: all 0.5s;
   transition: all 0.5s;
 }
-/* line 169, ../sass/app.sass */
+/* line 175, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:hover {
   -webkit-transition: none;
   -moz-transition: none;
@@ -405,7 +405,7 @@ header {
   -moz-box-shadow: 0 1px 10px black;
   box-shadow: 0 1px 10px black;
 }
-/* line 173, ../sass/app.sass */
+/* line 179, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:first-child {
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-left-radius: 4px;
@@ -414,7 +414,7 @@ header {
   -webkit-border-bottom-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
-/* line 175, ../sass/app.sass */
+/* line 181, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:last-child {
   -moz-border-radius-topright: 4px;
   -webkit-border-top-right-radius: 4px;
@@ -425,7 +425,7 @@ header {
 }
 
 /* Hardcoding the offset for the FB icon example */
-/* line 179, ../sass/app.sass */
+/* line 185, ../sass/app.sass */
 .fbIcon .imageWrap .targetImage {
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
@@ -437,7 +437,7 @@ header {
   left: 192px;
 }
 
-/* line 185, ../sass/app.sass */
+/* line 191, ../sass/app.sass */
 canvas {
   display: none;
 }

index.html

@@ -29,20 +29,12 @@
 	</header>
 
 	<div id="main" role="main">
+    <div id='dragDrop' style='display: none'>
       <h2>Test it out</h2>
-      <div class="imageSection">
-        <div id="dropZone" class="imageWrap">
-        </div>
-        <div class="colors">
-          <div class="function dominantColor">
-            <h3>Dominant Color</h3>
-            <div class="swatches"></div>
-          </div>
-          <div class="function medianCutPalette clearfix">
-            <h3>Palette</h3>
-            <div class="swatches"></div>
-          </div>
+      <div id="dropZone" class="dropZone">
       </div>
+
+      <div id="draggedImages"></div>
     </div>
 
     <h2>Examples</h2>
@@ -64,7 +56,7 @@
   {{#images}}
   <div class="imageSection {{class}} ">
     <div class="imageWrap">
-      <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
+      <img class="targetImage" src="{{file}}" data-colorcount="{{colorCount}}" />
     </div>
     <div class="colors">
       <div class="function dominantColor">

index.js

@@ -3,14 +3,17 @@ $(document).ready(function () {
     // Use mustache.js templating to create layout
 
     var imageArray = { images: [
-        {"file": "3.jpg"},
-        {"file": "4.jpg"},
-        {"file": "5.jpg"},
-        {"file": "logo1.png"},
-        {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}
+        {"file": "img/3.jpg"},
+        {"file": "img/4.jpg"},
+        {"file": "img/5.jpg"},
+        {"file": "img/logo1.png"},
+        {"file": "img/icon1.png", "colorCount": "4", "class": "fbIcon"}
     ]};
 
-    // Setup the drag and drop behavior
+    // Setup the drag and drop behavior if supported
+    if (typeof window.FileReader === 'function') {
+      $('#dragDrop').show();
+
       var $dropZone = $('#dropZone');
 
       var dragEnter = function( evt ){
@@ -38,9 +41,16 @@ $(document).ready(function () {
         var dt = evt.originalEvent.dataTransfer;
         var files = dt.files;
 
-      handleFile( files );
+        handleFiles( files );
       };
 
+      $dropZone
+        .on('dragenter', dragEnter)
+        .on('dragleave', dragLeave)
+        .on('dragover', dragOver)
+        .on('drop', drop);
+    }
+
     var displayColors = function( image ) {
       var $image = $(image);
       var imageSection = $image.closest('.imageSection');
@@ -64,32 +74,35 @@ $(document).ready(function () {
       appendColors(medianPalette, medianCutPalette);
     };
 
-    function handleFile(files) {
-      var file = files[0];
+    function handleFiles( files ) {
       var imageType = /image.*/;
+      var fileCount = files.length;
 
-      if (file.type.match(imageType)) {
-        var img = document.createElement("img");
-        img.classList.add("targetImage");
-        img.width = 400;
-        img.height = 300;
-        img.file = file;
-        $dropZone.append(img);
+      for (var i = 0; i < fileCount; i++) {
+        var file = files[i];
 
+        if ( file.type.match(imageType) ) {
           var reader = new FileReader();
-        reader.onload = function(e){
-            img.src = e.target.result;
+          reader.onload = function( e ) {
+              imageInfo = { images: [
+                  {'class': 'droppedImage', file: e.target.result}
+                ]};
+
+              var html = Mustache.to_html($('#template').html(), imageInfo);
+              $('#draggedImages').prepend( html );
+
+              var img = $('.droppedImage .targetImage').get(0);
               displayColors( img );
+              util.centerImg( img, 400, 300);
+
+              $('.droppedImage').slideDown();
             };
           reader.readAsDataURL(file);
+        } else {
+          alert('File must be a supported image type.');
+        }
       }
     }
-
-    $dropZone
-      .on('dragenter', dragEnter)
-      .on('dragleave', dragLeave)
-      .on('dragover', dragOver)
-      .on('drop', drop);
 
     var html = Mustache.to_html($('#template').html(), imageArray);
     $('#main').append(html);
@@ -104,3 +117,20 @@ $(document).ready(function () {
       displayColors( image );
     });
 });
+
+var util = {
+  centerImg: function( img, containerWidth, containerHeight) {
+      var $img = $(img);
+      var imgHeight = $img.get(0).height;
+      var imgWidth = $img.get(0).width;
+
+      if ( imgHeight < containerHeight ) {
+        var vOffset = ( containerHeight - imgHeight )/2;
+        $img.css('margin-top', ( hOffset + "px" ));
+      }
+      if ( imgWidth < containerWidth ) {
+        var hOffset = ( containerWidth - imgWidth )/2;
+        $img.css('margin-left', ( hOffset + "px" ));
+      }
+    }
+};

sass/app.sass

@@ -81,10 +81,17 @@ strong
   font-weight: bold
   
 /* Drag and Drop area */
-#dropZone
+.dropZone
+  width: 900px
+  height: 200px
+  margin-bottom: 60px
   background: url("../img/drag_placeholder.png")
   &.dragging
     +box-shadow(inset 0 1px 10px #09A1EC)
+.droppedImage
+  display: none
+  .targetImage
+    // width: 100%
     
   
 /* Forms */
@@ -148,8 +155,7 @@ header
     float: left
     margin-right: 20px
     background: url(../img/dark_checkered_bg.png)
-    .targetImage
-      +border-left-radius(10px)
+    overflow: hidden
   .colors
     margin-top: 20px
     width: 400px