fileHandle refactor & fixes (#2252)

src/data/blob.ts

@@ -4,6 +4,7 @@ import { t } from "../i18n";
 import { AppState } from "../types";
 import { LibraryData, ImportedDataState } from "./types";
 import { calculateScrollCenter } from "../scene";
+import { MIME_TYPES } from "../constants";
 
 export const parseFileContents = async (blob: Blob | File) => {
   let contents: string;
@@ -53,16 +54,22 @@ export const parseFileContents = async (blob: Blob | File) => {
   return contents;
 };
 
+const getMimeType = (blob: Blob): string => {
+  if (blob.type) {
+    return blob.type;
+  }
+  const name = blob.name || "";
+  if (/\.(excalidraw|json)$/.test(name)) {
+    return "application/json";
+  }
+  return "";
+};
+
 export const loadFromBlob = async (
-  blob: any,
+  blob: Blob,
   /** @see restore.localAppState */
   localAppState: AppState | null,
 ) => {
-  if (blob.handle) {
-    // TODO: Make this part of `AppState`.
-    (window as any).handle = blob.handle;
-  }
-
   const contents = await parseFileContents(blob);
   try {
     const data: ImportedDataState = JSON.parse(contents);
@@ -74,6 +81,13 @@ export const loadFromBlob = async (
         elements: data.elements,
         appState: {
           appearance: localAppState?.appearance,
+          fileHandle:
+            blob.handle &&
+            ["application/json", MIME_TYPES.excalidraw].includes(
+              getMimeType(blob),
+            )
+              ? blob.handle
+              : null,
           ...cleanAppStateForExport(data.appState || {}),
           ...(localAppState
             ? calculateScrollCenter(data.elements || [], localAppState, null)

src/data/index.ts

@@ -66,9 +66,6 @@ export type SocketUpdateDataIncoming =
       type: "INVALID_RESPONSE";
     };
 
-// TODO: Make this part of `AppState`.
-(window as any).handle = null;
-
 const byteToHex = (byte: number): string => `0${byte.toString(16)}`.slice(-2);
 
 const generateRandomID = async () => {

src/data/json.ts

@@ -27,23 +27,23 @@ export const serializeAsJSON = (
 export const saveAsJSON = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-  fileHandle: any,
 ) => {
   const serialized = serializeAsJSON(elements, appState);
   const blob = new Blob([serialized], {
     type: "application/json",
   });
-  const name = `${appState.name}.excalidraw`;
-  // TODO: Make this part of `AppState`.
-  (window as any).handle = await fileSave(
+
+  const fileHandle = await fileSave(
     blob,
     {
-      fileName: name,
+      fileName: appState.name,
       description: "Excalidraw file",
       extensions: [".excalidraw"],
     },
-    fileHandle || null,
+    appState.fileHandle,
   );
+
+  return { fileHandle };
 };
 
 export const loadFromJSON = async (localAppState: AppState) => {

src/data/library.ts

@@ -4,7 +4,7 @@ import { loadLibrary, saveLibrary } from "./localStorage";
 
 export class Library {
   /** imports library (currently merges, removing duplicates) */
-  static async importLibrary(blob: any) {
+  static async importLibrary(blob: Blob) {
     const libraryFile = await loadLibraryFromBlob(blob);
     if (!libraryFile || !libraryFile.library) {
       return;