#4 Allow Change main Image

gallery.go

@@ -177,3 +177,55 @@ func galleryEdit(t template.Template,data template.Data, c flamego.Context)  {
 
 	t.HTML(http.StatusOK, "gallery_edit")
 }
+
+func galleryEditMainImage(t template.Template, data template.Data, c flamego.Context) {
+	data["id"] = c.Param("id")
+	t.HTML(http.StatusOK, "gallery_mainImage")
+}
+
+func galleryEditMainImageChange(s session.Session, c flamego.Context) {
+	log.Debug().Msg("Change Gallery Main Image")
+	c.Request().ParseMultipartForm(9001)
+
+
+	//Upload Croped Image
+	file, _, err  := c.Request().FormFile("cropImage")
+	if err != nil {
+		panic(err)
+	}
+	defer file.Close()
+
+	cropedImage, _ , err := image.Decode(file)
+	if err != nil {
+		panic(err)
+	}
+	path := fmt.Sprintf("/gallery/%v/%v/main/%v-%v", s.Get("user_id"), c.Param("id"), time.Now().UnixNano(), "crop.png")
+	uploadImageToS3(cropedImage, path)
+
+	//Upload Original Image
+	fileOrginal, fileHeaderOrginal, err  := c.Request().FormFile("orginal")
+	if err != nil {
+		panic(err)
+	}
+	defer fileOrginal.Close()
+
+	orignalImage, _ , err := image.Decode(fileOrginal)
+	if err != nil {
+		panic(err)
+	}
+	pathOrignal := fmt.Sprintf("/gallery/%v/%v/main/%v-orginal-%v", s.Get("user_id"), c.Param("id"), time.Now().UnixNano(), fileHeaderOrginal.Filename)
+	uploadImageToS3(orignalImage, pathOrignal)
+
+
+	_, err = sqlConnection.NamedExec("UPDATE gallery SET `mainImage` = :uploadPath, mainImageOriginal = :uploadPathOriginal WHERE `id` = :id LIMIT 1", map[string]interface{}{
+		"uploadPath": path,
+		"uploadPathOriginal": pathOrignal,
+		"id": c.Param("id"),
+	})
+
+	if err != nil {
+		log.Fatal().Err(err).Msg("Cant update Main Gallery")
+	}
+
+	c.ResponseWriter().Write([]byte("{\"status\": \"ok\"}"))
+}

main.go

@@ -185,6 +185,8 @@ func main() {
 	f.Get("/gallery/edit", galleryEditList)
 	f.Get("/gallery/edit/{id}", galleryEdit)
 	f.Post("/gallery/edit/{id}", galleryEditSave)
+	f.Get("/gallery/edit/{id}/image", galleryEditMainImage)
+	f.Post("/gallery/edit/{id}/image", galleryEditMainImageChange)
 
 	f.Get("/file/upload", uploadImageForm)
 	f.Post("/file/upload", uploadImage)

templates/gallery_mainImage.tmpl

@@ -0,0 +1,90 @@
+{{template "top" .}}
+<link rel="stylesheet" href="/public/croppie.css" />
+<script src="/public/croppie.js"></script>
+<div class="container"  style="margin-top: 100px;">
+<div class="row">
+    <div class="col-md-12">
+        <h1>Change Gallery Preview Image</h1>
+        <div class="row">
+            <div class="col-md-2">
+                <button class="btn btn-outline-primary" id="selectImage" onClick="onClickHandler(event)" style="width: 100%">Upload Image</button>
+            </div>
+            <div class="col-md-10">
+                <!--<img class="my-image" style="display: none;" id="galleryImage" src="demo/demo-1.jpg" />!-->
+
+                <div id="vanilla-demo"></div>
+
+                <button class="btn btn-success" id="create" style="width: 100%">Create</button>
+            </div>
+        </div>
+        <script>
+            var el = document.getElementById('vanilla-demo');
+            var vanilla = new Croppie(el, {
+                viewport: { width: 500, height: 500, type: 'circle' },
+                boundary: { width: '100%', height: el.offsetWidth / 3 * 2},
+                showZoomer: false,
+                enableOrientation: true,
+                url: '/public/dariusz-sankowski-mj2NwYH3wBA-unsplash.jpg'
+            });
+
+            var orginal = null;
+            var orginalFile = null;
+
+            function onClickHandler(ev) {
+                console.log("Upload new Image")
+                var el = window._protected_reference = document.createElement("INPUT");
+                el.type = "file";
+                el.accept = "image/*";
+                el.multiple = "multiple"; // remove to have a single file selection
+                el.addEventListener('change', function(ev2) {
+                    if (el.files.length) {
+                        vanilla.bind({
+                            url: URL.createObjectURL(el.files[0])
+                        });
+                        orginalFile = el.files[0]
+                    }
+                });
+                el.click();
+            }
+
+            async function changeProfilePic() {
+
+                console.log(vanilla.get())
+                res = await vanilla.result({
+                    type: "blob",
+                    circle: false,
+                    format: "png",
+                    size: "original",
+                });
+                let formData = new FormData();
+                //formData.append("name", document.getElementById('floatingInput').value)
+                formData.append("orginal", orginalFile);
+                formData.append("cropImage", res);
+                formData.append("cropData", JSON.stringify(vanilla.get()));
+                //document.getElementById("newGallery").style.display = "none"
+                //document.getElementById("waiting").style.display="inline"
+                fetch ("/gallery/edit/{{ .id }}/image", {
+                    method: "POST",
+                    body: formData,
+                    //contentType: false, //this is requireded please see answers above
+                    //processData: false, //this is requireded please see answers above
+                    enctype: 'multipart/form-data',
+                }).then (response => response.json()).then ((data) => {
+                    console.log(data)
+                    location.href = "/gallery/edit/{{ .id }}"
+                }).catch((response) => {
+                    console.error("Error POST REQUEST")
+                    console.error(response)
+                });
+            }
+
+
+            create.onclick = evt => {
+                changeProfilePic();
+            }
+
+        </script>
+    </div>
+</div>
+</div>
+{{template "bottom" .}}