Download with XHR

Some mobile browser fails to download dynamic content with POST request.
This commit fixes that.

assets/index.es.html

@@ -143,7 +143,7 @@
 	</div>
       </form>
     </div>
-    <div class="bottom-info">
+    <div class="bottom-info address">
       <a href="https://github.com/nagadomi/waifu2x" class="gray-link" target="_blank">waifu2x</a>
     </div>
   </body>

assets/index.html

@@ -143,7 +143,7 @@
 	</div>
       </form>
     </div>
-    <div class="bottom-info">
+    <div class="bottom-info address">
       <a href="https://github.com/nagadomi/waifu2x" class="gray-link" target="_blank">waifu2x</a>
     </div>
   </body>

assets/index.ja.html

@@ -143,7 +143,7 @@
 	</div>
       </form>
     </div>
-    <div class="bottom-info">
+    <div class="bottom-info address">
       <a href="https://github.com/nagadomi/waifu2x" class="gray-link" target="_blank">waifu2x</a>
     </div>
   </body>

assets/index.pt.html

@@ -143,7 +143,7 @@
 	</div>
       </form>
     </div>
-    <div class="bottom-info">
+    <div class="bottom-info address">
       <a href="https://github.com/nagadomi/waifu2x" class="gray-link" target="_blank">waifu2x</a>
     </div>
   </body>

assets/index.ru.html

@@ -143,7 +143,7 @@
 	</div>
       </form>
     </div>
-    <div class="bottom-info">
+    <div class="bottom-info address">
       <a href="https://github.com/nagadomi/waifu2x" class="gray-link" target="_blank">waifu2x</a>
     </div>
   </body>

assets/style.css

@@ -177,15 +177,22 @@ label {
     border-radius: 1px;
     cursor: pointer;
 }
-.button:hover {
+.button:hover:enabled {
     background: #f7f7f7;
     background-image: linear-gradient(to bottom, #fefefe, #e2e2e2); 
 }
+.button:disabled {
+    background-image: none;
+    background-color: #ccc;
+    border-color: #ccc;
+}
 
 .bottom-hint {
     margin: 0.85em 0;
     color: #888;
     font-size: 0.85em;
     line-height: 1.5em;
+}
+.address {
     text-align: center;
 }

assets/ui.js

@@ -39,11 +39,53 @@ $(function (){
 	    $("input[name=scale]").filter("[value=" + $.cookie("scale") + "]").prop("checked", true)
 	}
     }
+    function uuid() 
+    {
+	// ref: http://stackoverflow.com/a/2117523
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+	    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+	    return v.toString(16);
+	});
+    }
+    function download_with_xhr(e) 
+    {
+	if (typeof window.URL.createObjectURL == "undefined" ||
+	    typeof window.Blob == "undefined" ||
+	    typeof window.XMLHttpRequest == "undefined" ||
+	    typeof window.URL.revokeObjectURL == "undefined")
+	{
+	    return;
+	}
+	$("input[name=download]").attr("disabled", "disabled");
+	e.preventDefault();
+	e.stopPropagation();
+	var xhr = new XMLHttpRequest();
+	xhr.open('POST', '/api', true);
+	xhr.responseType = 'arraybuffer';
+	xhr.onload= function(e) {
+	    if (this.status == 200) {
+		var blob = new Blob([this.response], {type : 'image/png'});
+		var a = document.createElement("a");
+		var url = URL.createObjectURL(blob);
+		a.href = url;
+		a.target = "_blank";
+		a.download = uuid() + ".png";
+		a.click();
+		URL.revokeObjectURL(url);
+		$("input[name=download]").removeAttr("disabled");
+	    } else {
+		alert("Download Error");
+		$("input[name=download]").removeAttr("disabled");
+	    }
+	};
+	xhr.send(new FormData($("form").get(0)));
+    }
     $("#url").change(clear_file);
     $("#file").change(clear_url);
     $("input[name=style]").change(on_change_style);
     $("input[name=noise]").change(on_change_noise_level);
     $("input[name=scale]").change(on_change_scale_factor);
+    $("input[name=download]").click(download_with_xhr);
 
     restore_from_cookie();
     on_change_style();

webgen/assets/style.css

@@ -177,15 +177,22 @@ label {
     border-radius: 1px;
     cursor: pointer;
 }
-.button:hover {
+.button:hover:enabled {
     background: #f7f7f7;
     background-image: linear-gradient(to bottom, #fefefe, #e2e2e2); 
 }
+.button:disabled {
+    background-image: none;
+    background-color: #ccc;
+    border-color: #ccc;
+}
 
 .bottom-hint {
     margin: 0.85em 0;
     color: #888;
     font-size: 0.85em;
     line-height: 1.5em;
+}
+.address {
     text-align: center;
 }

webgen/assets/ui.js

@@ -39,11 +39,53 @@ $(function (){
 	    $("input[name=scale]").filter("[value=" + $.cookie("scale") + "]").prop("checked", true)
 	}
     }
+    function uuid() 
+    {
+	// ref: http://stackoverflow.com/a/2117523
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+	    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+	    return v.toString(16);
+	});
+    }
+    function download_with_xhr(e) 
+    {
+	if (typeof window.URL.createObjectURL == "undefined" ||
+	    typeof window.Blob == "undefined" ||
+	    typeof window.XMLHttpRequest == "undefined" ||
+	    typeof window.URL.revokeObjectURL == "undefined")
+	{
+	    return;
+	}
+	$("input[name=download]").attr("disabled", "disabled");
+	e.preventDefault();
+	e.stopPropagation();
+	var xhr = new XMLHttpRequest();
+	xhr.open('POST', '/api', true);
+	xhr.responseType = 'arraybuffer';
+	xhr.onload= function(e) {
+	    if (this.status == 200) {
+		var blob = new Blob([this.response], {type : 'image/png'});
+		var a = document.createElement("a");
+		var url = URL.createObjectURL(blob);
+		a.href = url;
+		a.target = "_blank";
+		a.download = uuid() + ".png";
+		a.click();
+		URL.revokeObjectURL(url);
+		$("input[name=download]").removeAttr("disabled");
+	    } else {
+		alert("Download Error");
+		$("input[name=download]").removeAttr("disabled");
+	    }
+	};
+	xhr.send(new FormData($("form").get(0)));
+    }
     $("#url").change(clear_file);
     $("#file").change(clear_url);
     $("input[name=style]").change(on_change_style);
     $("input[name=noise]").change(on_change_noise_level);
     $("input[name=scale]").change(on_change_scale_factor);
+    $("input[name=download]").click(download_with_xhr);
 
     restore_from_cookie();
     on_change_style();

webgen/templates/index.html.erb

@@ -145,7 +145,7 @@
 	</div>
       </form>
     </div>
-    <div class="bottom-info">
+    <div class="bottom-info address">
       <a href="https://github.com/nagadomi/waifu2x" class="gray-link" target="_blank">waifu2x</a>
     </div>
   </body>