reverted code to include webkitGetAsEntry and getAsEntry method with defensive code condition to include when exists in browser.

Author: aaclage

docs/documentation/docs/controls/DragDropFiles.md

@@ -48,13 +48,15 @@ import { DragDropFiles } from "@pnp/spfx-controls-react/lib/DragDropFiles";
 
 ![FilePicker control with grouping](../assets/DragDropFilesSample2.png)
 
-- With the `onDrop` handler you can define a method that returns files that where drag and drop by user.
+- With the `onDrop` handler you can define a method that returns files and files inside folders that where drag and drop by user.
 
+**PS: New property "fullPath" was included in file object to allow identify dropped files based on Folders, this allow users to create associated folder path.**
 
 ```typescript
 private _getDropFiles = (files) => {
     for (var i = 0; i < files.length; i++) {
       console.log("Filename: " + files[i].name);
+      console.log("Path: " + files[i].fullPath);
     }
   }
 ```

src/controls/dragDropFiles/DragDropFiles.tsx

@@ -102,27 +102,94 @@ export class DragDropFiles extends React.Component<IDragDropFilesProps, IDragDro
   }
 
   /**
-   * Add File to Array Files of type File[]
-   * @param dataTransfer 
-   */
+     * Add File to Array Files of type File[]
+     * https://www.meziantou.net/upload-files-and-directories-using-an-input-drag-and-drop-or-copy-and-paste-with.htm 
+     * @param dataTransfer 
+     */
   private getFilesAsync = async (e) => {
     const Customfiles = e.dataTransfer;
     const items = Customfiles.items;
+    const Directory = [];
+    let entry:any;
     const files: File[] = [];
-
     for (let i = 0; i < items.length; i++) {
       const item = items[i];
       if (item.kind === "file") {
-        const file = item.getAsFile();
-        if (file) {
-          files.push(file);
+        /**
+         * This method retrieves Files from Folders
+         * defensive code to only use method when exist in browser if not only return files. 
+         * https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry
+        */
+        if (item.getAsEntry) {
+          entry = item.getAsEntry();
+          Directory.push(entry);
+        } else if (item.webkitGetAsEntry) {
+          entry = item.webkitGetAsEntry();
+          Directory.push(entry);
+        } else if ("function" == typeof item.getAsFile) {
+          const file = item.getAsFile();
+          if (file) {
+            file.fullPath = "";
+            files.push(file);
+          }
         }
         continue;
       }
     }
+    if (Directory.length > 0) {
+      const entryContent = await this.readEntryContentAsync(Directory);
+      files.push(...entryContent);
+    }
     return files;
   }
 
+  // Returns a promise with all the files of the directory hierarchy
+  /**
+   * 
+   * @param entry 
+   */
+  private readEntryContentAsync = (Directory) => {
+    return new Promise<File[]>((resolve, reject) => {
+      let reading = 0;
+      const contents: File[] = [];
+      Directory.forEach(entry => {
+        readEntry(entry, "");
+      });
+
+      function readEntry(entry, path) {
+        if (entry.isDirectory) {
+          readReaderContent(entry.createReader());
+        } else {
+          reading++;
+          entry.file(file => {
+            reading--;
+            file.fullPath = path;
+            contents.push(file);
+
+            if (reading === 0) {
+              resolve(contents);
+            }
+          });
+        }
+      }
+
+      function readReaderContent(reader) {
+        reading++;
+
+        reader.readEntries((entries) => {
+          reading--;
+          for (const entry of entries) {
+            readEntry(entry, entry.fullPath);
+          }
+
+          if (reading === 0) {
+            resolve(contents);
+          }
+        });
+      }
+    });
+  }
+
   /**
    * Default React component render method
    */

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -483,7 +483,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
   */
   private _getDropFiles = (files) => {
     for (var i = 0; i < files.length; i++) {
-      console.log("File name: " +files[i].name);
+      console.log("File name: " + files[i].name);
+      console.log("Folder Path: " + files[i].fullPath);
     }
   }
 
@@ -1200,8 +1201,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         >
 
           <Placeholder iconName='BulkUpload'
-            iconText='Drag files here...'
-            description={defaultClassNames => <span className={defaultClassNames}>Drag files here...</span>}
+            iconText='Drag files or folder with files here...'
+            description={defaultClassNames => <span className={defaultClassNames}>Drag files or folder with files here...</span>}
             buttonLabel='Configure'
             hideButton={this.props.displayMode === DisplayMode.Read}
             onConfigure={this._onConfigure} />