Make File Handling actually work (#2181)

Follow-up from #1736

public/manifest.json

@@ -14,7 +14,7 @@
       "sizes": "256x256"
     }
   ],
-  "start_url": ".",
+  "start_url": "/",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff",

src/actions/actionExport.tsx

@@ -66,6 +66,7 @@ export const actionChangeShouldAddWatermark = register({
 export const actionSaveScene = register({
   name: "saveScene",
   perform: (elements, appState, value) => {
+    // TODO: Make this part of `AppState`.
     saveAsJSON(elements, appState, (window as any).handle)
       .catch(muteFSAbortError)
       .catch((error) => console.error(error));

src/components/App.tsx

@@ -493,6 +493,33 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   }
 
   private initializeScene = async () => {
+    if ("launchQueue" in window && "LaunchParams" in window) {
+      (window as any).launchQueue.setConsumer(
+        async (launchParams: { files: any[] }) => {
+          if (!launchParams.files.length) {
+            return;
+          }
+          const fileHandle = launchParams.files[0];
+          const blob = await fileHandle.getFile();
+          blob.handle = fileHandle;
+          loadFromBlob(blob, this.state)
+            .then(({ elements, appState }) =>
+              this.syncActionResult({
+                elements,
+                appState: {
+                  ...(appState || this.state),
+                  isLoading: false,
+                },
+                commitToHistory: true,
+              }),
+            )
+            .catch((error) => {
+              this.setState({ isLoading: false, errorMessage: error.message });
+            });
+        },
+      );
+    }
+
     const searchParams = new URLSearchParams(window.location.search);
     const id = searchParams.get("id");
     const jsonMatch = window.location.hash.match(
@@ -3656,6 +3683,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           // This will only work as of Chrome 86,
           // but can be safely ignored on older releases.
           const item = event.dataTransfer.items[0];
+          // TODO: Make this part of `AppState`.
           (window as any).handle = await (item as any).getAsFileSystemHandle();
         } catch (error) {
           console.warn(error.name, error.message);

src/data/blob.ts

@@ -29,6 +29,7 @@ const loadFileContents = async (blob: any) => {
  */
 export const loadFromBlob = async (blob: any, appState?: AppState) => {
   if (blob.handle) {
+    // TODO: Make this part of `AppState`.
     (window as any).handle = blob.handle;
   }
 

src/data/index.ts

@@ -66,9 +66,7 @@ export type SocketUpdateDataIncoming =
       type: "INVALID_RESPONSE";
     };
 
-// TODO: Defined globally, since file handles aren't yet serializable.
-// Once `FileSystemFileHandle` can be serialized, make this
-// part of `AppState`.
+// TODO: Make this part of `AppState`.
 (window as any).handle = null;
 
 const byteToHex = (byte: number): string => `0${byte.toString(16)}`.slice(-2);

src/data/json.ts

@@ -33,6 +33,7 @@ export const saveAsJSON = async (
     type: "application/json",
   });
   const name = `${appState.name}.excalidraw`;
+  // TODO: Make this part of `AppState`.
   (window as any).handle = await fileSave(
     blob,
     {

src/index.tsx

@@ -8,7 +8,6 @@ import { TopErrorBoundary } from "./components/TopErrorBoundary";
 import Excalidraw from "./excalidraw-embed/index";
 import { register as registerServiceWorker } from "./serviceWorker";
 
-import { loadFromBlob } from "./data";
 import { debounce } from "./utils";
 import {
   importFromLocalStorage,
@@ -182,16 +181,3 @@ registerServiceWorker({
     }
   },
 });
-
-if ("launchQueue" in window && "LaunchParams" in window) {
-  (window as any).launchQueue.setConsumer(
-    async (launchParams: { files: any[] }) => {
-      if (!launchParams.files.length) {
-        return;
-      }
-      const fileHandle = launchParams.files[0];
-      const blob = await fileHandle.getFile();
-      loadFromBlob(blob);
-    },
-  );
-}