all developments of milestone 1

src/utils/image.ts

@@ -1,4 +1,5 @@
-import { IMedia } from "@/types/media.model";
+import { IMedia, IModifiableMedia } from "@/types/media.model";
+import { ref, watch } from "vue";
 
 export async function buildFileFromIMedia(
   obj: IMedia | null | undefined
@@ -29,18 +30,83 @@ export function buildFileVariable(
   };
 }
 
-export function readFileAsync(
-  file: File
-): Promise<string | ArrayBuffer | null> {
+export function readFileAsync(file: File): Promise<ArrayBuffer | null> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
 
     reader.onload = () => {
-      resolve(reader.result);
+      resolve(reader.result as ArrayBuffer);
     };
 
     reader.onerror = reject;
 
-    reader.readAsBinaryString(file);
+    reader.readAsArrayBuffer(file);
   });
 }
+
+export async function fileHash(file: File): Promise<string | null> {
+  const data = await readFileAsync(file);
+  if (data === null) return null;
+  const hash = await crypto.subtle.digest("SHA-1", data);
+  const b64Hash = btoa(
+    Array.from(new Uint8Array(hash))
+      .map((b) => String.fromCharCode(b))
+      .join("")
+  );
+  return b64Hash;
+}
+
+export function initWrappedMedia(): IModifiableMedia {
+  return {
+    file: ref<File | null>(null),
+    firstHash: null,
+    hash: null,
+  };
+}
+
+export async function loadWrappedMedia(
+  modifiableMedia: IModifiableMedia,
+  media: IMedia | null
+) {
+  watch(modifiableMedia.file, async () => {
+    if (modifiableMedia.file.value) {
+      modifiableMedia.hash = await fileHash(modifiableMedia.file.value);
+    } else {
+      modifiableMedia.hash = null;
+    }
+  });
+  try {
+    modifiableMedia.file.value = await buildFileFromIMedia(media);
+  } catch (e) {
+    console.error("catched error while building media", e);
+  }
+  if (modifiableMedia.file.value) {
+    modifiableMedia.firstHash = await fileHash(modifiableMedia.file.value);
+  }
+}
+
+export function asMediaInput(
+  mmedia: IModifiableMedia,
+  name: string,
+  fallbackId: number
+): any {
+  const ret = {
+    [name]: {},
+  };
+  if (mmedia.file.value) {
+    if (mmedia.firstHash != mmedia.hash) {
+      ret[name] = {
+        media: {
+          name: mmedia.file.value?.name,
+          alt: "",
+          file: mmedia.file.value,
+        },
+      };
+    } else {
+      ret[name] = {
+        mediaId: fallbackId,
+      };
+    }
+  }
+  return ret;
+}