From 4118866f7b7c867bd4be65e1ee071f88c5086eb4 Mon Sep 17 00:00:00 2001
From: Justin Hawkins <justin@hawkins.id.au>
Date: Tue, 28 Dec 2021 11:27:37 +1030
Subject: [PATCH] Be able to push marked up image back to the server.

---
 upload/upload.go     |  1 +
 web/data/editor.html | 17 +++++++++++++++--
 web/server.go        | 18 ++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/upload/upload.go b/upload/upload.go
index bb742a9..66af524 100644
--- a/upload/upload.go
+++ b/upload/upload.go
@@ -50,6 +50,7 @@ type Upload struct {
 	UploadedAt time.Time `json:"uploaded_at"`
 
 	OriginalFilename      string `json:"original_file"` // path on the local disk
+	MarkedUpFilename      string `json:"markedup_file"` // a temporary file, if the user did some markup
 	TemporaryFileToUpload string // post-watermark, or just original if unwatermarked
 
 	webhookURL string
diff --git a/web/data/editor.html b/web/data/editor.html
index 2b55bf8..43c1bcc 100644
--- a/web/data/editor.html
+++ b/web/data/editor.html
@@ -1,6 +1,6 @@
 {{ define "content" }}
 
-<main role="main" class="" stylse="height:100%;" x-data="editor()" x-init="setup_canvas();">
+<main role="main" class=""  x-data="editor()" x-init="setup_canvas();">
   <div class="row">
     <div class="col">
       <canvas id="c" x-bind:style="canvas_style">
@@ -11,7 +11,7 @@
       <div id="tools-top" x-show="!toolbar">
         <button type="button" @click="add_some_text()" class="btn btn-primary">Add text</button>
         <button type="button" @click="crop()" class="btn btn-primary">Crop</button>
-        <button type="button" @click="crop()" class="btn btn-primary">Apply</button>
+        <button type="button" @click="apply()" class="btn btn-primary">Apply</button>
       </div>
       <div id="tools-delete" x-show="toolbar == 'text'">
         <button type="button" @click="delete_selected();" class="btn btn-primary" style="">delete</button>
@@ -137,6 +137,19 @@ function editor() {
 
       });
       canvas.renderAll();
+    },
+    apply() {
+      image_data = canvas.toDataURL('png');
+      let formData = new FormData();
+      formData.append('image', image_data);
+      var url = new URL(window.location);
+      var id = url.searchParams.get("id");
+      fetch('/rest/upload/'+id+'/markup', {method: 'POST', body: formData})
+          .then(response => response.json())  // convert to json
+          .then(json => {
+            console.log(json);
+          })
+
     }
     
 //    selection:cleared
diff --git a/web/server.go b/web/server.go
index 2f2a707..3800e47 100644
--- a/web/server.go
+++ b/web/server.go
@@ -2,6 +2,7 @@ package web
 
 import (
 	"embed"
+	"encoding/base64"
 	"encoding/json"
 	"fmt"
 	"html/template"
@@ -252,6 +253,23 @@ func (ws *WebService) modifyUpload(w http.ResponseWriter, r *http.Request) {
 				resString, _ := json.Marshal(res)
 				w.Write(resString)
 				return
+			} else if change == "markup" {
+				newImageData := r.FormValue("image")
+				//data:image/png;base64,xxxx
+				// I know this is dumb, we should just send binary image data, but I can't
+				// see that Fabric makes that possible.
+				if strings.Index(newImageData, "data:image/png;base64,") != 0 {
+					returnJSONError(w, "bad image data")
+					return
+				}
+				imageDataBase64 := newImageData[22:]
+				b, err := base64.StdEncoding.DecodeString(imageDataBase64)
+				if err != nil {
+					returnJSONError(w, err.Error())
+					return
+				}
+				fmt.Printf("YAY %v", b)
+
 			} else {
 				returnJSONError(w, "bad change type")
 				return