fix: fix regression in 9c8be3a and close #9

Author: rolandjitsu

src/file-selector.spec.ts

@@ -33,6 +33,26 @@ it('should return the evt {target} {files} if the passed event is an input evt',
     expect(file.path).toBe(name);
 });
 
+it('should return {files} from DataTransfer if {items} is not defined (e.g. IE11)', async () => {
+    const name = 'test.json';
+    const mockFile = createFile(name, {ping: true}, {
+        type: 'application/json'
+    });
+    const evt = dragEvt([mockFile]);
+
+    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);
+});
+
 it('should return an empty array if the evt {target} has no {files} prop', async () => {
     const evt = inputEvtFromFiles();
     const files = await fromEvent(evt);
@@ -156,6 +176,15 @@ it(
     }
 );
 
+it('filters thumbnail cache files', async () => {
+    const mockFile = createFile('Thumbs.db', {ping: true}, {
+        type: 'text/plain'
+    });
+    const evt = dragEvt([mockFile]);
+    const items = await fromEvent(evt);
+    expect(items).toHaveLength(0);
+});
+
 it('should throw if reading dir entries fails', async done => {
     const mockFiles = sortFiles([
         createFile('ping.json', {ping: true}),
@@ -220,6 +249,13 @@ function dragEvtFromItems(items: DataTransferItem | DataTransferItem[], type: st
     } as any;
 }
 
+function dragEvt(files?: File[], items?: DataTransferItem[], type: string = 'drop'): DragEvent {
+    return {
+        type,
+        dataTransfer: {items, files}
+    } as any;
+}
+
 function dragEvtFromFilesAndItems(files: File[], items: DataTransferItem[], type: string = 'drop'): DragEvent {
     return {
         type,

src/file-selector.ts

@@ -2,6 +2,7 @@ import {FileWithPath, toFileWithPath} from './file';
 
 
 const FILES_TO_IGNORE = [
+    // Thumbnail cache files for macOS and Windows
     '.DS_Store', // macOs
     'Thumbs.db'  // Windows
 ];
@@ -26,7 +27,7 @@ function isDragEvt(value: any): value is DragEvent {
 function getInputFiles(evt: Event) {
     const files = isInput(evt.target)
         ? evt.target.files
-            ? Array.from(evt.target.files)
+            ? fromList<File>(evt.target.files)
             : []
         : [];
     return files.map(file => toFileWithPath(file));
@@ -37,17 +38,42 @@ function isInput(value: EventTarget | null): value is HTMLInputElement {
 }
 
 async function getDataTransferFiles(dt: DataTransfer, type: string) {
-    const items = Array.from(dt.items)
-        .filter(item => item.kind === 'file');
-    // According to https://html.spec.whatwg.org/multipage/dnd.html#dndevents,
-    // only 'dragstart' and 'drop' has access to the data (source node),
-    // hence return the DataTransferItem for other event types
-    if (type === 'drop') {
-        const files = await Promise.all(items.map(item => toFilePromises(item)));
-        return flatten<FileWithPath>(files)
-            .filter(file => !FILES_TO_IGNORE.includes(file.name));
+    // IE11 does not support dataTransfer.items
+    // See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility
+    if (dt.items) {
+        const items = fromList<DataTransferItem>(dt.items)
+            .filter(item => item.kind === 'file');
+        // According to https://html.spec.whatwg.org/multipage/dnd.html#dndevents,
+        // only 'dragstart' and 'drop' has access to the data (source node)
+        if (type !== 'drop') {
+            return items;
+        }
+        const files = await Promise.all(items.map(toFilePromises));
+        return noIgnoredFiles(flatten<FileWithPath>(files));
+    }
+
+    return noIgnoredFiles(fromList<File>(dt.files)
+        .map(file => toFileWithPath(file)));
+}
+
+function noIgnoredFiles(files: FileWithPath[]) {
+    return files.filter(file => FILES_TO_IGNORE.indexOf(file.name) === -1);
+}
+
+// IE11 does not support Array.from()
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility
+// https://developer.mozilla.org/en-US/docs/Web/API/FileList
+// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList
+function fromList<T>(items: DataTransferItemList | FileList): T[] {
+    const files = [];
+
+    // tslint:disable: prefer-for-of
+    for (let i = 0; i < items.length; i++) {
+        const file = items[i];
+        files.push(file);
     }
-    return items;
+
+    return files as any;
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem