Update file picker to return an array of files

* Update file picker to return an array of files

* resolve issues getting file content

* update FilePicker docs

* update docs and test handler

Author: joelfmrodrigues

docs/documentation/docs/controls/FilePicker.md

@@ -7,6 +7,7 @@ Currently supported locations
 - OneDrive - tab allows to select a file from the user's One Drive.
 - Site document libraries - tab allows to select a file from the existing site document libraries.
 - Upload - tab allows to upload a file from local drive.
+- Multi-Upload - tab allows to upload multiple files from local drive.
 - From a link - tab allows to paste a link to the document.
 
 ## Overview
@@ -44,12 +45,27 @@ import { FilePicker, IFilePickerResult } from '@pnp/spfx-controls-react/lib/File
   bingAPIKey="<BING API KEY>"
   accepts= {[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
   buttonIcon="FileImage"
-  onSave={(filePickerResult: IFilePickerResult) => { this.setState({filePickerResult }) }}
-  onChange={(filePickerResult: IFilePickerResult) => { this.setState({filePickerResult }) }}
+  onSave={(filePickerResult: IFilePickerResult[]) => { this.setState({filePickerResult }) }}
+  onChange={(filePickerResult: IFilePickerResult[]) => { this.setState({filePickerResult }) }}
   context={this.props.context}
 />
 ```
 
+- Sample `onSave` handler:
+
+```TypeScript
+private _onFilePickerSave = async (filePickerResult: IFilePickerResult[]) => {
+  this.setState({ filePickerResult: filePickerResult });
+  if (filePickerResult && filePickerResult.length > 0) {
+    for (var i = 0; i < filePickerResult.length; i++) {
+      const item = filePickerResult[i];
+      const fileResultContent = await item.downloadFileContent();
+      console.log(fileResultContent);
+    }
+  }
+}
+```
+
 ## Implementation
 
 The FilePicker component can be configured with the following properties:
@@ -60,8 +76,8 @@ The FilePicker component can be configured with the following properties:
 | buttonLabel | string | no | Specifies the label of the file picker button. |
 | buttonIcon | string | no | In case it is provided the file picker will be rendered as an action button. |
   buttonIconProps | IIconProps | no | In case it is provided the file picker will be rendered as an Icon the and all can define Properties for Icon  |
-| onSave | (filePickerResult: IFilePickerResult) => void | yes | Handler when the file has been selected and picker has been closed. |
-| onChange | (filePickerResult: IFilePickerResult) => void | no | Handler when the file selection has been changed. |
+| onSave | (filePickerResult: IFilePickerResult[]) => void | yes | Handler when the file has been selected and picker has been closed. |
+| onChange | (filePickerResult: IFilePickerResult[]) => void | no | Handler when the file selection has been changed. |
 | onCancel | () => void | no | Handler when file picker has been cancelled. |
 | context | ExtensionContext \| WebPartContext | yes | Current context. |
 | accepts | string[] | no | Array of strings containing allowed files extensions. E.g. [".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"] |
@@ -81,6 +97,7 @@ The FilePicker component can be configured with the following properties:
 | storeLastActiveTab | boolean | no | Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default `true` |
 | isPanelOpen | boolean | no | Specifies if the file picker panel is open by default or not |
 | renderCustomUploadTabContent | (filePickerResult: IFilePickerResult) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Upload" tab |
+| renderCustomMultipleUploadTabContent | (filePickerResult: IFilePickerResult[]) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Multi-Upload" tab |
 | renderCustomLinkTabContent | (filePickerResult: IFilePickerResult) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Link" tab |
 | includePageLibraries | boolean | no | Specifies if Site Pages library to be visible on Sites tab |
 

src/controls/filePicker/FilePicker.tsx

@@ -39,29 +39,6 @@ import WebSearchTab from "./WebSearchTab/WebSearchTab";
 // Localization
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 export class FilePicker extends React.Component<
   IFilePickerProps,
   IFilePickerState
@@ -143,7 +120,7 @@ export class FilePicker extends React.Component<
       accepts: accepts,
       context: this.props.context,
       onClose: () => this._handleClosePanel(),
-      onSave: (value: IFilePickerResult) => {
+      onSave: (value: IFilePickerResult[]) => {
         this._handleSave(value);
       },
     };
@@ -325,14 +302,14 @@ export class FilePicker extends React.Component<
   /**
    * On save action
    */
-  private _handleSave = (filePickerResult: IFilePickerResult) => {
+  private _handleSave = (filePickerResult: IFilePickerResult[]) => {
     this.props.onSave(filePickerResult);
     this.setState({
       panelOpen: false,
     });
   }
 
-  private _handleOnChange = (filePickerResult: IFilePickerResult) => {
+  private _handleOnChange = (filePickerResult: IFilePickerResult[]) => {
     if (this.props.onChange) {
       this.props.onChange(filePickerResult);
     }

src/controls/filePicker/FilePicker.types.ts

@@ -11,7 +11,7 @@ export interface FilePickerBreadcrumbItem extends IBreadcrumbItem {
 export interface IFilePickerTab {
   context: ExtensionContext | WebPartContext;
   accepts: string[];
-  onSave: (value: IFilePickerResult) => void;
+  onSave: (value: IFilePickerResult[]) => void;
   onClose: () => void;
 }
 
@@ -33,7 +33,7 @@ export interface IFilePickerResult {
   fileAbsoluteUrl: string;
 
   /**
-   * Size of a selected file (in bytes). Undefined in all cases but file upload 
+   * Size of a selected file (in bytes). Undefined in all cases but file upload
    */
   fileSize?: number;
 

src/controls/filePicker/IFilePickerProps.ts

@@ -28,12 +28,12 @@ export interface IFilePickerProps {
   /**
    * Handler when the file has been selected
    */
-  onSave:(filePickerResult: IFilePickerResult)=>void;
+  onSave:(filePickerResult: IFilePickerResult[])=>void;
 
   /**
    * Handler when file has been changed.
    */
-  onChange?: (filePickerResult: IFilePickerResult) => void;
+  onChange?: (filePickerResult: IFilePickerResult[]) => void;
 
   /**
    * Current context.
@@ -151,7 +151,7 @@ export interface IFilePickerProps {
   /**
    * Optional additional renderer for Multiple Upload tab
    */
-  renderCustomMultipleUploadTabContent?: (filePickerResult: IFilePickerResult) => JSX.Element | null;
+  renderCustomMultipleUploadTabContent?: (filePickerResult: IFilePickerResult[]) => JSX.Element | null;
 
   /**
    * Specifies if Site Pages library to be visible on Sites tab

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

@@ -109,7 +109,7 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
    * Handles when user saves
    */
   private _handleSave = () => {
-    this.props.onSave(this.state.filePickerResult);
+    this.props.onSave([this.state.filePickerResult]);
   }
 
   /**

src/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabProps.ts

@@ -1,6 +1,6 @@
 import { IFilePickerResult, IFilePickerTab } from "../FilePicker.types";
 
 export interface IMultipleUploadFilePickerTabProps extends IFilePickerTab {
-  onChange: (value: IFilePickerResult) => void;
-  renderCustomMultipleUploadTabContent: (filePickerResult: IFilePickerResult) => JSX.Element | null;
+  onChange: (value: IFilePickerResult[]) => void;
+  renderCustomMultipleUploadTabContent: (filePickerResult: IFilePickerResult[]) => JSX.Element | null;
 }

src/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabState.ts

@@ -1,7 +1,7 @@
 import { IFilePickerResult } from "../FilePicker.types";
 
 export interface IMultipleUploadFilePickerTabState {
-  filePickerResult: IFilePickerResult;
+  filePickerResult: IFilePickerResult[];
   filePreview?: string;
-  filesResult?: any;
+  // filesResult?: any;
 }

src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.tsx

@@ -14,7 +14,6 @@ import styles from './MultipleUploadFilePickerTab.module.scss';
 
 
 export default class MultipleUploadFilePicketTab extends React.Component<IMultipleUploadFilePickerTabProps, IMultipleUploadFilePickerTabState> {
-  private _files: File[] = [];
 
   constructor(props: IMultipleUploadFilePickerTabProps) {
     super(props);
@@ -23,16 +22,16 @@ export default class MultipleUploadFilePicketTab extends React.Component<IMultip
     };
   }
 
-  private displayFileNames = (filesResult) => {
+  private displayFileNames = (filesResult: IFilePickerResult[]) => {
     const result = [];
     for (var i = 0; i < filesResult.length; i++) {
-      result.push(<div key={i.toString()} className={styles.localTabFilename}>{filesResult[i].name}</div>);
+      result.push(<div key={i.toString()} className={styles.localTabFilename}>{filesResult[i].fileName}</div>);
     }
     return result;
   }
 
   public render(): React.ReactElement<IMultipleUploadFilePickerTabProps> {
-    const { filesResult } = this.state;
+    const { filePickerResult } = this.state;
     const acceptedFilesExtensions = this.props.accepts ? this.props.accepts.join(",") : null;
 
     return (
@@ -44,7 +43,7 @@ export default class MultipleUploadFilePicketTab extends React.Component<IMultip
 
           <DragDropFiles
             iconName="BulkUpload"
-            onDrop={this._handleFileUploadDragDrop}
+            onDrop={this._handleFileUpload}
           >
             <div className={styles.localTabDragDropFile}>
               <input
@@ -60,15 +59,15 @@ export default class MultipleUploadFilePicketTab extends React.Component<IMultip
           </DragDropFiles>
 
           <div>
-            {(filesResult) ? this.displayFileNames(filesResult) : ""}
+            {(filePickerResult) ? this.displayFileNames(filePickerResult) : ""}
           </div>
 
           {this.props.renderCustomMultipleUploadTabContent && this.props.renderCustomMultipleUploadTabContent(this.state.filePickerResult)}
         </div>
         <div className={styles.actionButtonsContainer}>
           <div className={styles.actionButtons}>
             <PrimaryButton
-              disabled={!filesResult}
+              disabled={!filePickerResult}
               onClick={() => this._handleSave()} className={styles.actionButton}>{strings.ListItemAttachmentslPlaceHolderButtonLabel + " " + strings.OneDriveRootFolderName}</PrimaryButton>
             <DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
           </div>
@@ -80,14 +79,30 @@ export default class MultipleUploadFilePicketTab extends React.Component<IMultip
   /**
    * Gets called when files are uploaded via drag and drop
    */
-  private _handleFileUploadDragDrop = (files) => {
+  private _handleFileUpload = (files: File[]) => {
 
     if (files.length < 1) {
       return;
     } else {
+
+      const filePickerResultsArray: IFilePickerResult[] = [];
+      for (var i = 0; i < files.length; i++) {
+        const file: File = files[i];
+        const filePickerResult: IFilePickerResult = {
+          fileAbsoluteUrl: null,
+          fileName: file.name,
+          fileSize: file.size,
+          fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(file.name),
+          downloadFileContent: () => { return Promise.resolve(file); }
+        };
+        filePickerResultsArray.push(filePickerResult);
+      }
+
       this.setState({
-        filesResult: files
+        filePickerResult: filePickerResultsArray
       });
+
+      this.props.onChange(filePickerResultsArray);
     }
   }
 
@@ -98,9 +113,13 @@ export default class MultipleUploadFilePicketTab extends React.Component<IMultip
     if (!event || event.target.files.length < 1) {
       return;
     } else {
-      this.setState({
-        filesResult: event.target.files
-      });
+
+      const files: File[] = [];
+      for (var i = 0; i < event.target.files.length; i++) {
+        const file: File = event.target.files.item(i);
+        files.push(file);
+      }
+      this._handleFileUpload(files);
     }
 
   }
@@ -109,19 +128,7 @@ export default class MultipleUploadFilePicketTab extends React.Component<IMultip
    * Saves base64 encoded image back to property pane file picker
    */
   private _handleSave = () => {
-    if (this.state.filesResult) {
-      const files: File[] = this.state.filesResult;
-      for (var i = 0; i < files.length; i++) {
-        const filePickerResult: IFilePickerResult = {
-          fileAbsoluteUrl: null,
-          fileName: files[i].name,
-          fileSize: files[i].size,
-          fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(files[i].name),
-          downloadFileContent: () => { return Promise.resolve(files[i]); }
-        };
-        this.props.onSave(filePickerResult);
-      }
-    }
+    this.props.onSave(this.state.filePickerResult);
   }
 
   /**

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx

@@ -143,7 +143,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
    * Called when user saves
    */
   private _handleSave = () => {
-    this.props.onSave(this.state.filePickerResult);
+    this.props.onSave([this.state.filePickerResult]);
   }
 
   /**

src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx

@@ -249,7 +249,7 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
    * Gets called when it is time to save the currently selected item
    */
   private _handleSave = () => {
-    this.props.onSave(this.state.filePickerResult);
+    this.props.onSave([this.state.filePickerResult]);
   }
 
   /**