feat: always populate {relativePath} for access across browser and electron

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

@@ -130,10 +130,16 @@ function fromDataTransferItem(item: DataTransferItem) {
             });
     }
     const file = item.getAsFile();
+
+    let fileAsEntry: FileSystemEntry | null = null;
+    if (typeof item.webkitGetAsEntry === 'function') {
+        fileAsEntry = item.webkitGetAsEntry();
+    }
+
     if (!file) {
         return Promise.reject(`${item} is not a File`);
     }
-    const fwp = toFileWithPath(file);
+    const fwp = toFileWithPath(file, fileAsEntry?.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 = [];
+        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,8 +1203,8 @@ export const COMMON_MIME_TYPES = new Map([
 
 export function toFileWithPath(file: FileWithPath, path?: string, h?: FileSystemHandle): FileWithPath {
     const f = withMimeType(file);
+    const {webkitRelativePath} = file;
     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
@@ -1227,12 +1227,28 @@ 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
+    Object.defineProperty(f, 'relativePath', {
+        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}`, // prepend forward slash (/) to ensure consistancy when path isn't supplied.
+        writable: false,
+        configurable: false,
+        enumerable: true
+    })
+
     return f;
 }
 
 export interface FileWithPath extends File {
     readonly path?: string;
     readonly handle?: FileSystemFileHandle;
+    readonly relativePath?: string;
 }
 
 function withMimeType(file: FileWithPath) {