1 files changed, 8 insertions, 25 deletions
diff --git a/profile/public/script.js b/profile/public/script.js
index 8910746..767b2f2 100644
--- a/profile/public/script.js
+++ b/profile/public/script.js
@@ -1,8 +1,6 @@
 const fs = document.querySelector("fieldset");
 const form = document.querySelector("form");
 let init = true;
-let imageInit = true;
-let imageID = -1;
 
 const popup = document.querySelector(".popup");
 const popupImage = document.querySelector("#popup-img");
@@ -11,20 +9,9 @@ const slider = document.querySelector("#rotation-slider");
 const controlButtons = document.querySelectorAll(".control-btns button");
 let cropper = undefined;
 
-const crop = () => {
-    cropper = new Cropper(document.getElementById("popup-img"), {
-        // Consider dataset id
-        //dragMode: "move",
-        aspectRatio: 10 / 13,
-        //autoCropArea: 0.65,
-        //restore: false,
-        //guides: false,
-        //center: false,
-        //highlight: false,
-        //cropBoxMovable: false,
-        //cropBoxResizable: false,
-        //toggleDragModeOnDblclick: false,
-    });
+const crop = (ratio, imageID) => {
+    popupImage.dataset.id = imageID;
+    return new Cropper(popupImage, { aspectRatio: ratio.x / ratio.y });
 };
 
 NodeList.prototype.on = function (listener, event) {
@@ -51,8 +38,7 @@ function appendQuestions(question) {
         const img = document.createElement("img");
         img.src = "uploads/" + question.answer;
         img.alt = "Image";
-        div.appendChild(img);
-        imageInit = false;
+        div.appendChild(img); // TODO: Max size
     }
 
     const field = document.createElement("input");
@@ -64,7 +50,7 @@ function appendQuestions(question) {
     field.type = question.type;
     field.maxLength = 100;
     if (question.type === "file") {
-        imageID = question.id;
+        const imageID = question.id;
         field.accept = "image/*";
         field.addEventListener("input", (e) => {
             const file = e.target.files[0];
@@ -73,7 +59,7 @@ function appendQuestions(question) {
             reader.addEventListener("load", (e) => {
                 popupImage.src = e.target.result;
                 popup.style.display = "block";
-                crop();
+                cropper = crop(question.ratio, imageID);
             });
             reader.readAsDataURL(file);
         });
@@ -107,18 +93,15 @@ form.addEventListener("submit", async (evt) => {
 saveBtn.addEventListener("click", (e) => {
     cropper.getCroppedCanvas().toBlob(async (blob) => {
         const url = "api/answerImage";
-        const method = imageInit ? "POST" : "PUT";
+        const method = "POST";
         const body = new FormData();
-        if (imageID === -1) {
-            return;
-        }
+        const imageID = popupImage.dataset.id;
         body.append(imageID, blob);
         const resp = await fetch(url, { method, body });
         const res = await resp.json();
         if (!res.success) {
             alert("An error occurred");
         } else {
-            imageInit = false;
             popup.style.display = "none";
             cropper.destroy();
             document.querySelectorAll("img").forEach((elem) => {