fix: handle getFile returning null and close #106, close #120

Author: rolandjitsu

src/file-selector.spec.ts

@@ -379,6 +379,37 @@ it("should not use getAsFileSystemHandle when not in a secure context", async ()
   globalThis.isSecureContext = true;
 });
 
+it("should reject when getAsFileSystemHandle resolves to null", async () => {
+  const evt = dragEvtFromItems([dataTransferItemWithFsHandle(null, null)]);
+  expect(fromEvent(evt)).rejects.toThrow("[object Object] is not a File");
+});
+
+it("should fallback to getAsFile when getAsFileSystemHandle resolves to undefined", async () => {
+  const name = "test.nosec.json";
+  const mockFile = createFile(
+    name,
+    { ping: false },
+    {
+      type: "application/json",
+    },
+  );
+  const evt = dragEvtFromItems([
+    dataTransferItemWithFsHandle(mockFile, undefined),
+  ]);
+
+  const files = await fromEvent(evt);
+  expect(files).toHaveLength(1);
+  expect(files.every((file) => file instanceof File)).toBe(true);
+
+  const [file] = files as FileWithPath[];
+
+  expect(file.name).toBe(mockFile.name);
+  expect(file.type).toBe(mockFile.type);
+  expect(file.size).toBe(mockFile.size);
+  expect(file.lastModified).toBe(mockFile.lastModified);
+  expect(file.path).toBe(`./${name}`);
+});
+
 function dragEvtFromItems(
   items: DataTransferItem | DataTransferItem[],
   type: string = "drop",
@@ -456,8 +487,8 @@ function dataTransferItemFromEntry(
 }
 
 function dataTransferItemWithFsHandle(
-  file?: File,
-  h?: FileSystemFileHandle,
+  file?: File | null,
+  h?: FileSystemFileHandle | null,
 ): DataTransferItem {
   return {
     kind: "file",
@@ -570,7 +601,7 @@ function sortFiles<T extends File>(files: T[]) {
 }
 
 interface FileSystemFileHandle {
-  getFile(): Promise<File>;
+  getFile(): Promise<File | null>;
 }
 
 type FileOrDirEntry = FileEntry | DirEntry;

src/file-selector.ts

@@ -119,9 +119,16 @@ async function fromDataTransferItem(
     typeof (item as any).getAsFileSystemHandle === "function"
   ) {
     const h = await (item as any).getAsFileSystemHandle();
-    const file = await h.getFile();
-    file.handle = h;
-    return toFileWithPath(file);
+    if (h === null) {
+      throw new Error(`${item} is not a File`);
+    }
+    // It seems that the handle can be `undefined` (see https://github.com/react-dropzone/file-selector/issues/120),
+    // so we check if it isn't; if it is, the code path continues to the next API (`getAsFile`).
+    if (h !== undefined) {
+      const file = await h.getFile();
+      file.handle = h;
+      return toFileWithPath(file);
+    }
   }
   const file = item.getAsFile();
   if (!file) {