Assign file handle to dropped files (#2125)

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/components/App.tsx

@@ -3570,7 +3570,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
   };
 
-  private handleCanvasOnDrop = (event: React.DragEvent<HTMLCanvasElement>) => {
+  private handleCanvasOnDrop = async (
+    event: React.DragEvent<HTMLCanvasElement>,
+  ) => {
     const libraryShapes = event.dataTransfer.getData(
       "application/vnd.excalidrawlib+json",
     );
@@ -3589,6 +3591,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       file?.name.endsWith(".excalidraw")
     ) {
       this.setState({ isLoading: true });
+      if (
+        "chooseFileSystemEntries" in window ||
+        "showOpenFilePicker" in window
+      ) {
+        try {
+          // This will only work as of Chrome 86,
+          // but can be safely ignored on older releases.
+          const item = event.dataTransfer.items[0];
+          (window as any).handle = await (item as any).getAsFileSystemHandle();
+        } catch (error) {
+          console.warn(error.name, error.message);
+        }
+      }
       loadFromBlob(file, this.state)
         .then(({ elements, appState }) =>
           this.syncActionResult({