upload

examples/contact/index.html

@@ -17,15 +17,6 @@
 					display: inline-block;
 					width: 15%;
 				}
-				.loading {
-				  animation: pulse 2s infinite;
-				}
-				@keyframes pulse
-				{
-				  0% {opacity: 1;}
-				  50% {opacity: 0.5;}
-				  100% {opacity: 1;}
-				}
 			</style>
 			<form id="inup" class="sign pad center">
 				<div class="loud">Welcome,</div>
@@ -212,10 +203,10 @@ <h2 name="name" contenteditable="true">Name</h2>
 						c.tell("Passphrase needs to be longer than 9 characters.");
 						return;
 					}
-					but.addClass('loading');
+					but.addClass('pulse');
 					data.alias = data.alias.toLowerCase();
 					user.create(data.alias, data.pass, function(ack){
-						if(!ack.wait){ but.removeClass('loading') }
+						if(!ack.wait){ but.removeClass('pulse') }
 						if(ack.err){ c.tell(ack.err); return }
 						if(ack.pub){
 							gun.get('users').get(data.alias).put(gun.get('alias/'+data.alias));
@@ -237,10 +228,10 @@ <h2 name="name" contenteditable="true">Name</h2>
 						return;
 					}
 					var but = form.find('button:first');
-					but.addClass('loading');
+					but.addClass('pulse');
 					data.alias = data.alias.toLowerCase();
 					user.auth(data.alias, data.pass, function(ack){
-						if(!ack.wait){ but.removeClass('loading') }
+						if(!ack.wait){ but.removeClass('pulse') }
 						if(ack.err){ c.tell(ack.err); return }
 						session(data);
 					});

examples/style.css

@@ -132,6 +132,17 @@ ul, li {
 	color: white;
 }
 
+.pulse {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse
+{
+  0% {opacity: 1;}
+  50% {opacity: 0.5;}
+  100% {opacity: 1;}
+}
+
 .hue {
   background: #4D79D8;
   -webkit-animation: hue 900s infinite;

lib/upload.js

@@ -0,0 +1,40 @@
+;(function(){
+	function upload(cb, opt){
+		var el = $(this); cb = cb || function(){}; opt = opt || {};
+		el.on('drop', function(e){
+			e.preventDefault();
+			upload.drop(((e.originalEvent||{}).dataTransfer||{}).files, 0);
+		}).on('dragover', function(e){
+		    e.preventDefault();
+		});
+		upload.drop = function(files,i){
+			if(opt.max && (files[i].fileSize > opt.max || files[i].size > opt.max)){
+				cb({err: "File size is too large.", file: file[i]}, upload);
+				if(files[++i]){ upload.drop(files,i) }
+				return false;
+			}
+			reader = new FileReader();
+			reader.onload = function(e){
+				cb({file: files[i], event: e, id: i}, upload);
+				if(files[++i]){ upload.drop(files,i) }
+			};
+			if(files[i]){ reader.readAsDataURL(files[i]) }
+		}
+	}
+	upload.shrink = function(e, cb, w, h){ // via stackoverflow
+		if(!e){ return cb && cb({err: "No file!"}) }
+		if(e.err){ return }
+		var file = (((e.event || e).target || e).result || e), img = new Image();
+    img.src = file;
+    img.onload = function(){
+      if(!h && img.width > w){ h = img.height * (w / img.width) }
+			var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d');
+	    canvas.width = w;
+	    canvas.height = h;
+	    ctx.drawImage(img, 0, 0, w, h); // draw source image to canvas.
+	    var b64 = e.base64 = canvas.toDataURL(); // base64 the compressed image.
+	    cb((e.base64 && e) || b64); 
+    };
+	}
+	$.fn.upload = upload;
+}());