From 1565024097d626bdd3ed0f8b5bf0cff5862962d2 Mon Sep 17 00:00:00 2001 From: Thomas Steiner Date: Fri, 4 Oct 2024 18:01:46 +0200 Subject: [PATCH 1/5] feat: add FileSystemFileHandle support --- src/file-selector.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/file-selector.ts b/src/file-selector.ts index 31b6b36..3408d6c 100644 --- a/src/file-selector.ts +++ b/src/file-selector.ts @@ -121,6 +121,10 @@ function flatten(items: any[]): T[] { } function fromDataTransferItem(item: DataTransferItem) { + if ('getAsFileSystemHandle' in DataTransferItem.prototype) { + return item.getAsFileSystemHandle().then((fileSystemHandle: any) => fileSystemHandle.getFile()) + .catch((error: { message: any; }) => error.message); + } const file = item.getAsFile(); if (!file) { return Promise.reject(`${item} is not a File`); @@ -185,4 +189,4 @@ async function fromFileEntry(entry: any) { // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540 interface FileArray extends Array {} type FileValue = FileWithPath - | FileArray[]; + | FileArray[]; \ No newline at end of file From 5c3b17d74a20c1954b8a1e58af7fae79fc17af91 Mon Sep 17 00:00:00 2001 From: Thomas Steiner Date: Fri, 4 Oct 2024 18:07:23 +0200 Subject: [PATCH 2/5] docs: Document getAsFileSystemHandle() --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c302482..bc86ced 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,7 @@ Most browser support basic File selection with drag 'n' drop or file input: * [File API](https://developer.mozilla.org/en-US/docs/Web/API/File#Browser_compatibility) * [Drag Event](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent#Browser_compatibility) * [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#Browser_compatibility) +* [DataTransferItem.getAsFileSystemHandle()](https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFileSystemHandle) * [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Browser_compatibility) For folder drop we use the [FileSystem API](https://developer.mozilla.org/en-US/docs/Web/API/FileSystem) which has very limited support: From 8defe931c718d9cd2cabbff7b7f5f47f98066474 Mon Sep 17 00:00:00 2001 From: Thomas Steiner Date: Mon, 7 Oct 2024 12:36:07 +0200 Subject: [PATCH 3/5] Update src/file-selector.ts Co-authored-by: Roland Groza --- src/file-selector.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/file-selector.ts b/src/file-selector.ts index 3408d6c..53ba241 100644 --- a/src/file-selector.ts +++ b/src/file-selector.ts @@ -122,7 +122,7 @@ function flatten(items: any[]): T[] { function fromDataTransferItem(item: DataTransferItem) { if ('getAsFileSystemHandle' in DataTransferItem.prototype) { - return item.getAsFileSystemHandle().then((fileSystemHandle: any) => fileSystemHandle.getFile()) + return (item as any).getAsFileSystemHandle().then((fileSystemHandle: any) => fileSystemHandle.getFile()) .catch((error: { message: any; }) => error.message); } const file = item.getAsFile(); From f50c82c85f60e6a7c6c1413b4e6474cec76dd633 Mon Sep 17 00:00:00 2001 From: Thomas Steiner Date: Mon, 7 Oct 2024 12:45:50 +0200 Subject: [PATCH 4/5] Add the handle onto the returned file --- src/file-selector.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/file-selector.ts b/src/file-selector.ts index 53ba241..3e0691d 100644 --- a/src/file-selector.ts +++ b/src/file-selector.ts @@ -122,8 +122,11 @@ function flatten(items: any[]): T[] { function fromDataTransferItem(item: DataTransferItem) { if ('getAsFileSystemHandle' in DataTransferItem.prototype) { - return (item as any).getAsFileSystemHandle().then((fileSystemHandle: any) => fileSystemHandle.getFile()) - .catch((error: { message: any; }) => error.message); + return (item as any).getAsFileSystemHandle().then((fileSystemHandle: any) => { + const file = fileSystemHandle.getFile(); + file.handle = fileSystemHandle; + return file; + }).catch((error: { message: any; }) => error.message); } const file = item.getAsFile(); if (!file) { From c2a9fb227d4170dd4909a3c21adb8eec119b6fef Mon Sep 17 00:00:00 2001 From: Thomas Steiner Date: Wed, 9 Oct 2024 19:04:04 +0200 Subject: [PATCH 5/5] Update src/file-selector.ts --- src/file-selector.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/file-selector.ts b/src/file-selector.ts index 3e0691d..176c622 100644 --- a/src/file-selector.ts +++ b/src/file-selector.ts @@ -126,7 +126,7 @@ function fromDataTransferItem(item: DataTransferItem) { const file = fileSystemHandle.getFile(); file.handle = fileSystemHandle; return file; - }).catch((error: { message: any; }) => error.message); + }); } const file = item.getAsFile(); if (!file) {