few changes

daleharvey · Aug 9, 2010 · b89f4d1 · b89f4d1
1 parent cfed3c8
commit b89f4d1
Show file tree

Hide file tree

Showing 8 changed files with 440 additions and 62 deletions.
diff --git a/docroot/client.dropup.js b/docroot/client.dropup.js
@@ -21,7 +21,7 @@ var DropUp = (function() {
 
         xhr.onload = function(event) { 
 
-			li.className = "loaded";
+            $(li).addClass("loaded");
 
             desc.innerHTML = "<a href='/" + xhr.responseText + ".html'>" + 
                 xhr.responseText + "</a>";
@@ -43,7 +43,7 @@ var DropUp = (function() {
 		    file                = event.target.file,
      		getBinaryDataReader = new FileReader();
 
-        li.className      = "uploading";
+        li.className      = "item";
         progress.className = "progress";
         loading.className = "loading";
         div.className     = "wrapper";
@@ -68,24 +68,34 @@ var DropUp = (function() {
 
     function drop(e) { 
 
-        var i, len, files;
+        var i, len, files, file;
 
         e.stopPropagation();  
         e.preventDefault();  
 
         files = e.dataTransfer.files;  
 
 		for (i = 0; i < files.length; i++) {
-			if(files[i].size < 1048576) {
-				reader = new FileReader();
-				reader.index = i;
-				reader.file = files[i];
-
-				reader.addEventListener("loadend", fileLoaded, false);
-				reader.readAsDataURL(files[i]);
-			} else {
-				alert("file is too big, needs to be below 1mb");
-			}
+
+            file = files[i];
+
+			if (file.size > 1048576) {
+                $(target).append("<li class='item warning'>1MB Limit</li>");
+                continue;
+            }
+
+            if (!file.type.match(/image.png/)) { 
+                $(target).append("<li class='item warning'>Sorry, you can " + 
+                                 "only upload png files</li>");
+                continue;
+            }
+
+			reader = new FileReader();
+			reader.index = i;
+			reader.file = file;
+
+			reader.addEventListener("loadend", fileLoaded, false);
+			reader.readAsDataURL(file);
 		}
     };
 
@@ -104,6 +114,3 @@ var DropUp = (function() {
         "init":init
     };
 })();
-
-
-DropUp.init();
diff --git a/docroot/index.html b/docroot/index.html
@@ -9,18 +9,20 @@
 
   <body>
 
-    <header class="clearfix">
-      <h1><a href="/">drop<span>up</span></a></h1>
-    </header>
-
-    <div id="wrapper">
+    <div id="indexwrapper">
 
+      <header class="clearfix">
+        <h1><a href="/">drop<span>up</span></a></h1>
+      </header>
+
       <p>
         The simplest way to share images, just drag and drop your images 
         onto this page.
       </p>
 
-      <ul id="target" class="clearfix"></ul>
+      <div id="dropzone">
+        <ul id="target" class="clearfix"></ul>
+      </div>
 
       <p id="warnings">
         * Images are public, and will be deleted after 24 hours
@@ -29,7 +31,23 @@ <h1><a href="/">drop<span>up</span></a></h1>
     </div>
 
     <script src="/jquery-1.4.2.min.js"></script>
+    <script src="/modernizr-1.5.min.js"></script>
     <script src="/client.dropup.js"></script>
 
+    <script>
+
+      Modernizr.addTest('filereader', function() {
+         return typeof window.FileReader === "function";
+      });
+
+      if (Modernizr.filereader && Modernizr.draganddrop) { 
+         DropUp.init();
+      } else { 
+        $("#dropzone").html("<p>Sorry, your browser is not supported</p>")
+          .addClass("inactive");
+      }
+    </script>
+
+
   </body>
 </html>
diff --git a/docroot/modernizr-1.5.min.js b/docroot/modernizr-1.5.min.js
diff --git a/docroot/screen.css b/docroot/screen.css
@@ -14,6 +14,10 @@ body {
 }
 
 header { display:block; margin:10px; position:relative; }
+
+#indexwrapper header { margin:10px 0px 0px 0px; }
+
+p { margin:0px 0px 10px 0px; }
 
 h1 { 
     font-family: ChunkFiveRegular;
@@ -27,36 +31,44 @@ h1 span {
     color:#DDD; 
 }
 
-
 ul { 
     list-style-type:none; 
 }
-.uploading, .loaded {
-    border:1px solid #666; 
+.item {
     padding:5px; 
     background:#111; 
     float:left;
-    margin:5px; 
+    margin:5px 5px 5px 0px; 
+    width:200px;
+    height:155px;
     position:relative; 
 }
-.uploading img, .loaded img { 
-    max-height:130px; 
-    max-width:200px; 
+.item img { 
+    vertical-align:middle;
+    max-height:100%; 
+    max-width:100%; 
     opacity: 0.1; 
 }
 
-.uploading p, .loaded p { 
+.item { 
     text-align:center;
 }
 
 .wrapper { 
     text-align:center;  
-    width:200px; 
     height: 130px;     
     overflow:hidden; 
  }
-.loading { background:#000; width: 180px; margin:0px 10px; 
-           position:absolute; bottom: 60px; height:5px; }
+.loading { 
+    background:#000; 
+    width: 180px; 
+    margin:0px 10px; 
+    position:absolute; 
+    bottom: 90px; 
+    height:5px; 
+}
+
+#dropzone { background:#666; min-height:175px; padding-left:5px; }
 
 .loaded img { opacity:1; }
 .loaded .loading { display:none; }
@@ -85,10 +97,14 @@ a { text-decoration:none; color:orange; font-size:90%; }
 
 #original { position:absolute; bottom:5px; right:10px; } 
 
-#wrapper { padding: 0px 10px; }
+#indexwrapper { padding: 0px 10px; width:650px; margin:0px auto; }
 
 #warnings { color:#666; font-size:80%; }
 
+.warning { vertical-align:middle; color: #666; }
+
+.inactive { text-align:center; }
+
 .clearfix:after {clear: both;
 content: '.';
 display: block;