wrap returned file objects to expose fullPath to clients

also auto-correct browsers that misreport the dropped file mime type

Author: quarklemotion

package.json

@@ -27,26 +27,28 @@
     "extends": "airbnb-base"
   },
   "dependencies": {
-    "babel-runtime": "^6.11.6"
+    "babel-runtime": "6.11.x",
+    "mime-types": "2.1.x"
   },
   "devDependencies": {
-    "babel-cli": "^6.16.0",
-    "babel-core": "^6.17.0",
-    "babel-eslint": "^7.0.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-latest": "^6.16.0",
-    "babel-preset-stage-0": "^6.16.0",
-    "babel-register": "^6.16.3",
-    "chai": "^4.0.0-canary.1",
-    "coveralls": "^2.11.14",
-    "del": "^2.2.2",
-    "eslint": "^3.8.0",
-    "eslint-plugin-import": "^2.2.0",
-    "istanbul": "^1.1.0-alpha.1",
-    "mocha": "^3.1.2",
-    "rollup": "^0.36.3",
-    "rollup-plugin-babel": "^2.6.1",
-    "sinon": "^2.0.0-pre.3"
+    "babel-cli": "6.16.x",
+    "babel-core": "6.17.x",
+    "babel-eslint": "7.0.x",
+    "babel-plugin-transform-runtime": "6.15.x",
+    "babel-polyfill": "6.23.x",
+    "babel-preset-latest": "6.16.x",
+    "babel-preset-stage-0": "6.16.x",
+    "babel-register": "6.16.x",
+    "chai": "4.0.0-canary.1",
+    "coveralls": "2.11.x",
+    "del": "2.2.x",
+    "eslint": "3.8.x",
+    "eslint-plugin-import": "2.2.x",
+    "istanbul": "1.1.0-alpha.1",
+    "mocha": "3.1.x",
+    "rollup": "0.36.x",
+    "rollup-plugin-babel": "2.6.x",
+    "sinon": "2.0.0-pre.3"
   },
   "scripts": {
     "lint": "eslint src",

src/Html5FileSelector.js

@@ -1,3 +1,5 @@
+import mimeTypes from 'mime-types';
+
 const DEFAULT_FILES_TO_IGNORE = [
   '.DS_Store', // OSX indexing file
   'Thumbs.db'  // Windows indexing file
@@ -39,10 +41,28 @@ function traverseDirectory(entry) {
   });
 }
 
+// package the file in an object that includes the fullPath from the file entry
+// that would otherwise be lost
+function packageFile(file, entry) {
+  let fileTypeOverride = '';
+  // handle some browsers sometimes missing mime types for dropped files
+  const hasExtension = file.name.lastIndexOf('.') !== -1;
+  if (hasExtension && !file.type) {
+    fileTypeOverride = mimeTypes.lookup(file.name);
+  }
+  return {
+    fileObject: file,
+    type: file.type ? file.type : fileTypeOverride,
+    name: file.name,
+    size: file.size,
+    fullPath: entry ? entry.fullPath : file.name
+  };
+}
+
 function getFile(entry) {
   return new Promise((resolve) => {
     entry.file((file) => {
-      resolve(file);
+      resolve(packageFile(file, entry));
     });
   });
 }
@@ -89,7 +109,7 @@ export function getDataTransferFiles(dataTransfer) {
   } else if (filePromises.length) {
     return handleFilePromises(filePromises, dataTransferFiles);
   }
-  return dataTransferFiles;
+  return Promise.resolve(dataTransferFiles);
 }
 
 /**
@@ -102,22 +122,20 @@ export function getDataTransferFiles(dataTransfer) {
  *   and subfolders of the dropped/selected items.
  */
 export function getDroppedOrSelectedFiles(event) {
+
   const dataTransfer = event.dataTransfer;
   if (dataTransfer && dataTransfer.items) {
-    return Promise.resolve(getDataTransferFiles(dataTransfer));
+    return getDataTransferFiles(dataTransfer).then((fileList) => {
+      return Promise.resolve(fileList);
+    });
   }
   const files = [];
   const dragDropFileList = dataTransfer && dataTransfer.files;
   const inputFieldFileList = event.target && event.target.files;
-  const fileList = dragDropFileList || inputFieldFileList;
+  const fileList = dragDropFileList || inputFieldFileList || [];
   // convert the FileList to a simple array of File objects
   for (let i = 0; i < fileList.length; i++) {
-    files.push(fileList[i]);
+    files.push(packageFile(fileList[i]));
   }
   return Promise.resolve(files);
 }
-
-export default {
-  getDataTransferFiles,
-  getDroppedOrSelectedFiles
-};

src/index.js

@@ -5,5 +5,4 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import { getDataTransferFiles, getDroppedOrSelectedFiles } from './Html5FileSelector.js';
-export { getDataTransferFiles, getDroppedOrSelectedFiles };
+export { getDataTransferFiles, getDroppedOrSelectedFiles } from './Html5FileSelector.js';

test/Html5FileSelctorSpec.js

@@ -44,7 +44,6 @@ function createDataTransferItemFolder(containedFiles) {
   return {
     isDirectory: true,
     isFile: false,
-    numberOfNestedFiles: containedFiles.length,
     createReader: () => {
       return {
         sentEntries: false, // not part of the actual API, just used for real API behavior mimicking