diff --git a/src/components/App.tsx b/src/components/App.tsx
index d873bfce..b235973b 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -4932,7 +4932,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private handleAppOnDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     try {
-      const file = event.dataTransfer.files[0];
+      const file = event.dataTransfer.files.item(0);
 
       if (isSupportedImageFile(file)) {
         // first attempt to decode scene from the image if it's embedded
@@ -5008,7 +5008,7 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    const file = event.dataTransfer?.files[0];
+    const file = event.dataTransfer?.files.item(0);
     if (
       file?.type === MIME_TYPES.excalidrawlib ||
       file?.name?.endsWith(".excalidrawlib")
@@ -5024,7 +5024,7 @@ class App extends React.Component<AppProps, AppState> {
           this.setState({ isLoading: false, errorMessage: error.message }),
         );
       // default: assume an Excalidraw file regardless of extension/MimeType
-    } else {
+    } else if (file) {
       this.setState({ isLoading: true });
       if (nativeFileSystemSupported) {
         try {
diff --git a/src/tests/helpers/api.ts b/src/tests/helpers/api.ts
index 9c119574..62f9e928 100644
--- a/src/tests/helpers/api.ts
+++ b/src/tests/helpers/api.ts
@@ -213,9 +213,12 @@ export class API {
       }
     });
 
+    const files = [blob] as File[] & { item: (index: number) => File };
+    files.item = (index: number) => files[index];
+
     Object.defineProperty(fileDropEvent, "dataTransfer", {
       value: {
-        files: [blob],
+        files,
         getData: (type: string) => {
           if (type === blob.type) {
             return text;