147 batch upload init (#165)

* 147 batch upload component
This solution uses an initial handshake with the backend to get a session ID then individually submits each image

The component tracks the success or failure of each file transfer and allows retrying the failed ones

Features

    Progress bar
    Success Indicator
    Retry Failed transfers

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nachet-frontend",
   "private": true,
-  "version": "0.8.5",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/_versions.ts

@@ -9,10 +9,10 @@ export interface TsAppVersion {
     gitTag?: string;
 };
 export const versions: TsAppVersion = {
-    version: '0.8.5',
+    version: '0.9.0',
     name: 'nachet-frontend',
-    versionDate: '2024-06-05T14:39:44.056Z',
-    gitCommitHash: '9074593',
-    versionLong: '0.8.5-9074593',
+    versionDate: '2024-06-22T20:47:06.767Z',
+    gitCommitHash: '',
+    versionLong: '0.9.0-',
 };
 export default versions;

src/common/api.ts

@@ -3,6 +3,7 @@ import { AzureAPIError, ValueError } from "./error";
 import {
   ApiInferenceData,
   ApiSpeciesData,
+  BatchUploadMetadata,
   FeedbackDataNegative,
   FeedbackDataPositive,
   Images,
@@ -291,3 +292,100 @@ export const requestClassList = async (
   };
   return handleAxios<ApiSpeciesData>(request);
 };
+
+export const batchUploadInit = async (
+  backendUrl: string,
+  uuid: string,
+  containerUuid: string,
+  nbPictures: number,
+): Promise<{
+  session_id: string;
+}> => {
+  if (backendUrl === "" || backendUrl == null) {
+    throw new ValueError("Backend URL is null or empty");
+  }
+  if (uuid === "" || uuid == null) {
+    throw new ValueError("UUID is null or empty");
+  }
+  if (containerUuid === "" || containerUuid == null) {
+    throw new ValueError("Container UUID is null or empty");
+  }
+  if (nbPictures === 0 || nbPictures == null) {
+    throw new ValueError("Number of pictures is null or empty");
+  }
+  const request = {
+    method: "post",
+    url: `${backendUrl}/new-batch-import`,
+    headers: {
+      "Content-Type": "application/json",
+      "Access-Control-Allow-Origin": "*",
+    },
+    data: {
+      user_id: uuid,
+      container_name: containerUuid,
+      nb_pictures: nbPictures,
+    },
+  };
+  return handleAxios<{
+    session_id: string;
+  }>(request);
+};
+
+export const batchUploadImage = async (
+  backendUrl: string,
+  data: BatchUploadMetadata,
+): Promise<boolean> => {
+  const {
+    containerName,
+    uuid,
+    seedId,
+    seedName, // TODO: remove when backend is implemented
+    zoom,
+    seedCount,
+    sessionId,
+    imageDataUrl,
+  } = data;
+  if (backendUrl === "" || backendUrl == null) {
+    throw new ValueError("Backend URL is null or empty");
+  }
+  if (sessionId === "" || sessionId == null) {
+    throw new ValueError("Session ID is null or empty");
+  }
+  if (imageDataUrl === "" || imageDataUrl == null) {
+    throw new ValueError("Image is null or empty");
+  }
+  if (containerName === "" || containerName == null) {
+    throw new ValueError("Container name is null or empty");
+  }
+  if (uuid === "" || uuid == null) {
+    throw new ValueError("UUID is null or empty");
+  }
+  if (seedId === "" || seedId == null) {
+    throw new ValueError("Seed ID is null or empty");
+  }
+  if (zoom === 0 || zoom == null) {
+    throw new ValueError("Zoom is null or empty");
+  }
+  if (seedCount === 0 || seedCount == null) {
+    throw new ValueError("Seed count is null or empty");
+  }
+  const request = {
+    method: "post",
+    url: `${backendUrl}/upload-picture`,
+    headers: {
+      "Content-Type": "application/json",
+      "Access-Control-Allow-Origin": "*",
+    },
+    data: {
+      container_name: containerName,
+      user_id: uuid,
+      seed_id: seedId,
+      seed_name: seedName, // TODO: remove when backend is implemented
+      zoom_level: zoom,
+      nb_seeds: seedCount,
+      session_id: sessionId,
+      image: imageDataUrl,
+    },
+  };
+  return handleAxios(request);
+};

src/common/error.ts

@@ -33,4 +33,18 @@ class ValueError extends Error {
   }
 }
 
-export { DecodeError, FetchError, BlobError, AzureAPIError, ValueError };
+class UploadError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "UploadError";
+  }
+}
+
+export {
+  DecodeError,
+  FetchError,
+  BlobError,
+  AzureAPIError,
+  ValueError,
+  UploadError,
+};

src/common/types.d.ts

@@ -106,3 +106,14 @@ export interface ModelMetadata {
   pipeline_name: string;
   default?: boolean;
 }
+
+export interface BatchUploadMetadata {
+  containerName: string;
+  uuid: string;
+  seedId: string;
+  seedName: string; // TODO: remove when backend is implemented
+  zoom: number;
+  seedCount: number;
+  imageDataUrl: string;
+  sessionId: string;
+}