adopt carbon uploader component

src/components/custom-annotate.component.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { fabric } from "fabric";
 import "./custom-annotate.scss"; // Import your CSS file for styling
 import { showToast } from "@openmrs/esm-framework";
-import { Button } from "@carbon/react";
+import { Button, FileUploader } from "@carbon/react";
 import { createAttachment } from "../attachments/attachments.resource";
 import { readFileAsString } from "../utils";
 
@@ -28,7 +28,9 @@ const SvgEditor = () => {
     newCanvas.on("mouse:move", handleMouseMove);
     newCanvas.on("mouse:up", handleMouseUp);
 
-    saveCanvasState();
+    // Clear the state history when the canvas is first created
+    setStateHistory([JSON.stringify(newCanvas)]);
+    setCurrentStatePointer(0);
 
     return () => {
       newCanvas.dispose();
@@ -121,13 +123,16 @@ const SvgEditor = () => {
   };
 
   const saveCanvasState = () => {
-    const canvasState = JSON.stringify(canvas);
-    const newHistory = [
-      ...stateHistory.slice(0, currentStatePointer + 1),
-      canvasState,
-    ];
-    setStateHistory(newHistory);
-    setCurrentStatePointer(newHistory.length - 1);
+    // Only save canvas state if the canvas is defined
+    if (canvas) {
+      const canvasState = JSON.stringify(canvas);
+      const newHistory = [
+        ...stateHistory.slice(0, currentStatePointer + 1),
+        canvasState,
+      ];
+      setStateHistory(newHistory);
+      setCurrentStatePointer(newHistory.length - 1);
+    }
   };
 
   const undo = () => {
@@ -267,8 +272,17 @@ const SvgEditor = () => {
           />
           <Button onClick={undo}>Undo</Button>
           <Button onClick={redo}>Redo</Button>
-          <input type="file" accept="image/*" onChange={handleImageUpload} />
           <Button onClick={saveAnnotatedImage}>Save</Button>
+          <div className="file-uploader-container">
+            <FileUploader
+              accept={[".jpg", ".jpeg", ".png", ".gif"]}
+              buttonLabel="Upload Image"
+              filenameStatus="edit"
+              labelText="Upload Image"
+              onChange={(event) => handleImageUpload(event)}
+              className="file-uploader"
+            />
+          </div>
         </div>
       </div>
       <div className="canvas-container">

src/components/custom-annotate.scss

@@ -1,42 +1,4 @@
-/* Define styles for the canvas container */
-canvas {
-  border: 2px solid #ccc; /* Add a border to the canvas */
-  display: block; /* Make the canvas a block-level element */
-  margin: 0 auto; /* Center the canvas horizontally */
-}
-
-/* Define styles for the buttons container */
-.buttons {
-  margin-top: 20px; /* Add some top margin to the buttons */
-}
-
-/* Define styles for the drawing buttons */
-button {
-  margin-right: 10px; /* Add right margin between buttons */
-  padding: 8px 16px; /* Add padding to buttons */
-  font-size: 16px; /* Set font size */
-  background-color: #007bff; /* Button background color */
-  color: #fff; /* Button text color */
-  border: none; /* Remove button border */
-  border-radius: 4px; /* Add button border radius */
-  cursor: pointer; /* Change cursor on hover */
-}
-
-button:hover {
-  background-color: #0056b3; /* Change background color on hover */
-}
-
-/* Define styles for the color input */
-input[type="color"] {
-  margin-right: 10px; /* Add right margin to the color input */
-}
-
-/* Define styles for the undo and redo buttons */
-button.undo, button.redo {
-  background-color: #6c757d; /* Button background color */
-}
-
-/* Define styles for the file input */
-input[type="file"] {
-  display: inline-block; 
+.file-uploader-container {
+  display: inline-block;
+  margin-right: 10px; 
 }

src/draw-page.scss

@@ -1,7 +1,8 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
 
-
-.editor-container {
-  width: 100%;
-  height: 100%;
-  position: relative; /* Ensure proper positioning of the SvgEditor */
-}
+.text {
+  font-size: 0.9rem;
+  padding: 0.5rem;
+ }