MAJOR: Fixed broken JS events

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+venv

static/data/uploads/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

static/js/controller.js

@@ -35,25 +35,26 @@ define(["lib/jquery", "lib/underscore", "js/upload", "js/colors", "js/pattern",
 
 		// Colors -> Pattern
 		// Generate pattern when we click
-		colors.on("generate-pattern", function() {
+		$('#generate-pattern').on('click', function () {
 			// Get colors
-			var pattern_colors = colors.get("colors").slice(0);
-            var gauge = colors.get("size.gauge");
-			var width = colors.get("size.width");
+			const pattern_colors = colors.get("colors").slice(0);
+			const gauge = colors.get("size.gauge");
+			const width = colors.get("size.width");
 
 			// Collect data
-			var params = collect_params();
+			const params = collect_params();
 
 			// Replace PNG with gif of spinning gear
-			var image = new Image();
-			var path = "/static/images/generate.gif";
-			image.onload = function(){ // always fires the event.
-				colors.set('generate.src', path)
-                // Send JSON
-                $.getJSON("/pattern.json", params, function(data) {
-                    pattern.init(data.data, pattern_colors, gauge, width);
-                    colors.set('generate.src', "/static/images/generate.png");
-                });
+			const image = new Image();
+			const path = "/static/images/generate.gif";
+
+			image.onload = function () { // always fires the event.
+				colors.set('generate.src', path);
+				// Send JSON
+				$.getJSON("/pattern.json", params, function (data) {
+					pattern.init(data.data, pattern_colors, gauge, width);
+					colors.set('generate.src', "/static/images/generate.png");
+				});
 			};
 			image.src = path;
 		});

static/js/pattern.js

@@ -81,8 +81,7 @@ define(["lib/jquery", "lib/underscore", "text!templates/pattern.html", "ractive"
 		view.on("save-pattern", save_pattern);
 
 		// Save pattern
-        view.off("download-pattern")
-		view.on("download-pattern", download);
+		$('#download-pattern').off('click').on('click', download);
 	}
 
 	////////////////////////////////////////

static/js/upload.js

@@ -37,18 +37,22 @@ define(["lib/jquery", "js/capture", "text!templates/upload.html", "ractive", "ra
 	view.events = function() {
 
 		// For uploading an image
-		view.on("upload-image", function() {
-			$("#upload-input").click();
+		$('#upload-image').on('click', () => {
+			$('#upload-input').click() // triggers the file input dialog
 		})
 
 		// Show preview once the image has been uploaded
-		view.observe("upload.file", upload_image)
+		// view.observe("upload.file", upload_image)
+		$('#upload-input').on('change', upload_image)
 
         // For uploading from web
-        view.on("upload-web-enable", upload_web_enable);
+        // view.on("upload-web-enable", upload_web_enable);
+		$('#upload-web-enable').on('click', upload_web_enable)
 
 		// For capturing image with webcam
-		view.on("upload-web", upload_web);
+		// view.on("upload-web", upload_web);
+		$('#upload-web').on('click', upload_web)
+
 
         // Make sure we delete the image before leaving the page
         $(window).on('beforeunload', view.cleanUp);
@@ -112,33 +116,37 @@ define(["lib/jquery", "js/capture", "text!templates/upload.html", "ractive", "ra
 
 
 	// Uploads image to server and receives the url back
-	var upload_image = function(new_value, old_value) {
+	var upload_image = (new_value) => {
+		const file = new_value.target.files?.[0]
+
+		if (!file) {
+			return
+		}
 
-		view.set("upload.file_name", new_value[0].name);
+		view.set("upload.file_name", file.name)
 
-		// Now upload image
-		var data = new FormData();
-		data.append('image', new_value[0]);
+		var data = new FormData()
+		data.append('image', file)
 
-        // Set listener for progress
-        var xhr_provider = init_progress();
+		var xhr_provider = init_progress()
 
 		$.ajax({
 			url: '/upload/',
 			data: data,
 			cache: false,
-            xhr : xhr_provider,
+			xhr: xhr_provider,
 			contentType: false,
 			processData: false,
 			type: 'POST',
 			success: function(response){
-                progress(0);
+				progress(0);
 				view.show_preview($.parseJSON(response).path);
-			}
-		});
+			},
+		})
 	}
 
 
+
     view.cleanUp = function() {
         var file = _(view.get("preview.src").split("/")).last();
         $.ajax({