Update file picker to return an array of files

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 | BaseComponentContext | 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

@@ -35,31 +35,6 @@ import { StockImages } from "./StockImagesTab/StockImages";
 import UploadFilePickerTab from "./UploadFilePickerTab/UploadFilePickerTab";
 import MultipleUploadFilePickerTab from "./MultipleUploadFilePickerTab/MultipleUploadFilePickerTab";
 import WebSearchTab from "./WebSearchTab/WebSearchTab";
-
-// Localization
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 export class FilePicker extends React.Component<
@@ -143,7 +118,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 +300,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

@@ -10,7 +10,7 @@ export interface FilePickerBreadcrumbItem extends IBreadcrumbItem {
 export interface IFilePickerTab {
   context: BaseComponentContext;
   accepts: string[];
-  onSave: (value: IFilePickerResult) => void;
+  onSave: (value: IFilePickerResult[]) => void;
   onClose: () => void;
 }
 

src/controls/filePicker/IFilePickerProps.ts

@@ -27,12 +27,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.
@@ -150,7 +150,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,6 @@
 import { IFilePickerResult } from "../FilePicker.types";
 
 export interface IMultipleUploadFilePickerTabState {
-  filePickerResult: IFilePickerResult;
+  filePickerResult: IFilePickerResult[];
   filePreview?: string;
-  filesResult?: any;
 }

src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.tsx

@@ -21,16 +21,16 @@ export default class MultipleUploadFilePickerTab 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 (
@@ -41,7 +41,7 @@ export default class MultipleUploadFilePickerTab extends React.Component<IMultip
         <div className={css(styles.tab, styles.tabOffset)}>
           <DragDropFiles
             iconName="BulkUpload"
-            onDrop={this._handleFileUploadDragDrop}
+            onDrop={this._handleFileUpload}
           >
             <div className={styles.localTabDragDropFile}>
               <input
@@ -56,15 +56,15 @@ export default class MultipleUploadFilePickerTab 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>
@@ -76,13 +76,29 @@ export default class MultipleUploadFilePickerTab 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);
     }
   }
 
@@ -93,29 +109,20 @@ export default class MultipleUploadFilePickerTab 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);
     }
   }
 
   /**
    * 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]);
   }
 
   /**

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

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

src/controls/filePicker/StockImagesTab/StockImages.tsx

@@ -61,7 +61,7 @@ export class StockImages extends React.Component<IStockImagesProps> {
       };
     }
 
-    this.props.onSave(filePickerResult);
+    this.props.onSave([filePickerResult]);
   }
 
   /**

src/controls/filePicker/UploadFilePickerTab/IUploadFilePickerTabProps.ts

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

src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx

@@ -104,14 +104,14 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
       filePreview: undefined
     });
 
-    this.props.onChange(filePickerResult);
+    this.props.onChange([filePickerResult]);
   }
 
   /**
    * Saves base64 encoded image back to property pane file picker
    */
   private _handleSave = () => {
-    this.props.onSave(this.state.filePickerResult);
+    this.props.onSave([this.state.filePickerResult]);
   }
 
   /**

src/controls/filePicker/WebSearchTab/WebSearchTab.tsx

@@ -448,7 +448,7 @@ export default class WebSearchTab extends React.Component<IWebSearchTabProps, IW
    * Calls property pane file picker's save function
    */
   private _handleSave = () => {
-    this.props.onSave(this.state.filePickerResult);
+    this.props.onSave([this.state.filePickerResult]);
   }
 
   /**