feat: always set a {relativePath} close #69

Author: saul-prepared

src/file-selector.spec.ts

@@ -1,6 +1,6 @@
-import {FileWithPath} from './file';
+import { FileWithPath } from './file';
 import {fromEvent} from './file-selector';
-
+const toFileWithPathSpy = jest.spyOn(jest.requireActual('./file'), 'toFileWithPath');
 
 it('returns a Promise', async () => {
     const evt = new Event('test');
@@ -109,6 +109,37 @@ it('should return files from DataTransfer {items} if the passed event is a DragE
     expect(file.path).toBe(name);
 });
 
+it('should call toFilePath with undefined path if {webkitGetAsEntry} is not a function', async () => {
+    toFileWithPathSpy.mockClear();
+    const name = 'test.json';
+    const mockFile = createFile(name, {ping: true}, {
+        type: 'application/json'
+    });
+
+    const item = dataTransferItemFromFile(mockFile);
+    const evt = dragEvtFromFilesAndItems([], [item]);
+    await fromEvent(evt);
+    expect(toFileWithPathSpy).toBeCalledTimes(1);
+    expect(toFileWithPathSpy).toBeCalledWith(mockFile, undefined);
+});
+
+it('should call toFilePath with {fullPath} path if file can be converted into an Entry', async () => {
+    toFileWithPathSpy.mockClear();
+    const name = 'test.json';
+    const fullPath = '/testfolder/test.json'
+    const mockFile = createFile(name, {ping: true}, {
+        type: 'application/json'
+    });
+
+    const file = fileSystemFileEntryFromFile(mockFile);
+    file.fullPath = fullPath
+    const item = dataTransferItemFromEntry(file, mockFile);
+    const evt = dragEvtFromFilesAndItems([], [item]);
+    await fromEvent(evt);
+    expect(toFileWithPathSpy).toBeCalledTimes(1);
+    expect(toFileWithPathSpy).toBeCalledWith(mockFile, fullPath);
+});
+
 it('skips DataTransfer {items} that are of kind "string"', async () => {
     const name = 'test.json';
     const mockFile = createFile(name, {ping: true}, {
@@ -477,6 +508,7 @@ interface DirEntry extends Entry {
 interface Entry {
     isDirectory: boolean;
     isFile: boolean;
+    fullPath?: string;
 }
 
 interface DirReader {

src/file-selector.ts

@@ -110,7 +110,7 @@ function toFilePromises(item: DataTransferItem) {
         return fromDirEntry(entry) as any;
     }
 
-    return fromDataTransferItem(item);
+    return fromDataTransferItem(item, entry);
 }
 
 function flatten<T>(items: any[]): T[] {
@@ -120,7 +120,7 @@ function flatten<T>(items: any[]): T[] {
     ], []);
 }
 
-function fromDataTransferItem(item: DataTransferItem) {
+function fromDataTransferItem(item: DataTransferItem, entry?: FileSystemEntry | null) {
     if (typeof (item as any).getAsFileSystemHandle === 'function') {
         return (item as any).getAsFileSystemHandle()
             .then(async (h: any) => {
@@ -133,7 +133,7 @@ function fromDataTransferItem(item: DataTransferItem) {
     if (!file) {
         return Promise.reject(`${item} is not a File`);
     }
-    const fwp = toFileWithPath(file);
+    const fwp = toFileWithPath(file, entry?.fullPath ?? undefined);
     return Promise.resolve(fwp);
 }
 

src/file.spec.ts

@@ -66,6 +66,51 @@ describe('toFile()', () => {
         expect(fileWithPath.path).toBe(path);
     });
 
+    it('sets the {relativePath} if provided without overwriting {path}', () => {
+        const fullPath = '/Users/test/Desktop/test/test.json';
+        const path = '/test/test.json';
+        const file = new File([], 'test.json');
+
+        // @ts-expect-error
+        file.path = fullPath;
+        const fileWithPath = toFileWithPath(file, path);
+        expect(fileWithPath.path).toBe(fullPath);
+        expect(fileWithPath.relativePath).toBe(path);
+    });
+
+    test('{relativePath} is enumerable', () => {
+        const path = '/test/test.json';
+        const file = new File([], 'test.json');
+        const fileWithPath = toFileWithPath(file, path);
+
+        expect(Object.keys(fileWithPath)).toContain('relativePath');
+
+        const keys: string[] = [];
+        for (const key in fileWithPath) {
+            keys.push(key);
+        }
+
+        expect(keys).toContain('relativePath');
+    });
+
+    it('uses the File {webkitRelativePath} as {relativePath} if it exists', () => {
+        const name = 'test.json';
+        const path = 'test/test.json';
+        const file = new File([], name);
+        Object.defineProperty(file, 'webkitRelativePath', {
+            value: path
+        });
+        const fileWithPath = toFileWithPath(file);
+        expect(fileWithPath.relativePath).toBe(path);
+    });
+
+    it('uses the File {name} as {relativePath} if not provided and prefix with forward slash (/)', () => {
+        const name = 'test.json';
+        const file = new File([], name);
+        const fileWithPath = toFileWithPath(file);
+        expect(fileWithPath.relativePath).toBe(name);
+    });
+
     it('sets the {type} from extension', () => {
         const types = Array.from(COMMON_MIME_TYPES.values());
         const files = Array.from(COMMON_MIME_TYPES.keys())

src/file.ts

@@ -1203,21 +1203,17 @@ export const COMMON_MIME_TYPES = new Map([
 
 export function toFileWithPath(file: FileWithPath, path?: string, h?: FileSystemHandle): FileWithPath {
     const f = withMimeType(file);
+    const {webkitRelativePath} = file;
+    const p = typeof path === 'string'
+        ? path
+        // If <input webkitdirectory> is set,
+        // the File will have a {webkitRelativePath} property
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
+        : typeof webkitRelativePath === 'string' && webkitRelativePath.length > 0
+            ? webkitRelativePath
+            : file.name;
     if (typeof f.path !== 'string') { // on electron, path is already set to the absolute path
-        const {webkitRelativePath} = file;
-        Object.defineProperty(f, 'path', {
-            value: typeof path === 'string'
-                ? path
-                // If <input webkitdirectory> is set,
-                // the File will have a {webkitRelativePath} property
-                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
-                : typeof webkitRelativePath === 'string' && webkitRelativePath.length > 0
-                    ? webkitRelativePath
-                    : file.name,
-            writable: false,
-            configurable: false,
-            enumerable: true
-        });
+        setObjProp(f, 'path', p);
     }
     if (h !== undefined) {
         Object.defineProperty(f, 'handle', {
@@ -1227,16 +1223,19 @@ export function toFileWithPath(file: FileWithPath, path?: string, h?: FileSystem
             enumerable: true
         });
     }
+    // Always populate a relative path so that even electron apps have access to a relativePath value
+    setObjProp(f, 'relativePath', p);
     return f;
 }
 
 export interface FileWithPath extends File {
     readonly path?: string;
     readonly handle?: FileSystemFileHandle;
+    readonly relativePath?: string;
 }
 
 function withMimeType(file: FileWithPath) {
-    const {name} = file;
+    const { name } = file;
     const hasExtension = name && name.lastIndexOf('.') !== -1;
 
     if (hasExtension && !file.type) {
@@ -1255,3 +1254,12 @@ function withMimeType(file: FileWithPath) {
 
     return file;
 }
+
+function setObjProp(f: FileWithPath, key: string, value: string) {
+    Object.defineProperty(f, key, {
+        value,
+        writable: false,
+        configurable: false,
+        enumerable: true
+    })
+}