Replace accepts to string[].

Replace IconButton with Action button.
Update documentation.

Author: Piotr Siatka

docs/documentation/docs/controls/FilePicker.md

@@ -13,9 +13,6 @@ Currently supported locations
 The control supports all types of file, however it also allows to specify list of extensions for the files that are going to be looked displayed. Currently, only single file selection is supported. 
 ![File Picker overview](../assets/FilePickerOverview.png)
 
-### Contribution 
-**File picker control has been developed based on the great SPFx project made by Hugo and presented in the [SP-Dev-Fx-WebParts Sample Repository](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-comparer)**.
-
 
 ## Different display types
 File picker support 3 types of views : List, Compact list and Tiles. In case Tiles view is selected, the control shows the thumbnail of the file.
@@ -61,11 +58,11 @@ The FilePicker component can be configured with the following properties:
 | ---- | ---- | ---- | ---- |
 | label | string | no | Specifies the text describing the file picker. |
 | 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 Icon button. |
+| buttonIcon | string | no | In case it is provided the file picker will be rendered as an action button. |
 | onSave | (filePickerResult: IFilePickerResult) => void | yes | Handler when the file has been selected and picker has been closed. |
 | onChange | (filePickerResult: IFilePickerResult) => void | yes | Handler when the file selection has been changed. |
 | webPartContext | WebPartContext | yes | Current context. |
-| accepts | string | no | Comma separated list of file extensions that going to be displayed. E.g. ".gif,.jpg,.jpeg,.bmp,.dib,.tif,.tiff,.ico,.png,.jxr,.svg" |
+| accepts | string[] | no | Array of strings containing allowed files extensions. E.g. [".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"] |
 | required | boolean | no | Sets the label to inform that the value is required. |
 | bingAPIKey | string | no | Used to execute WebSearch. If not provided SearchTab will not be available. |
 | disabled | boolean | no | Specifies if the picker button is disabled |

src/controls/filePicker/FilePicker.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IFilePickerProps } from './IFilePickerProps';
 import { IFilePickerState } from './IFilePickerState';
 
-import { PrimaryButton, IconButton } from 'office-ui-fabric-react/lib/components/Button';
+import { PrimaryButton, IconButton, ActionButton  } from 'office-ui-fabric-react/lib/components/Button';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/components/Panel';
 import { Label } from 'office-ui-fabric-react/lib/components/Label';
 import { Nav, INavLink, INavLinkGroup } from 'office-ui-fabric-react/lib/Nav';
@@ -64,7 +64,7 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
 
   public render(): JSX.Element {
     // If no acceptable file type was passed, and we're expecting images, set the default image filter
-    const accepts: string = this.props.accepts;
+    const accepts: string[] = this.props.accepts;
 
     const linkTabProps = {
       accepts: accepts,
@@ -73,6 +73,7 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
       onSave: (value: IFilePickerResult) => { this._handleSave(value); }
     };
     const buttonProps = {
+      text: this.props.buttonLabel,
       disabled: this.props.disabled,
       onClick: this._handleOpenPanel
     };
@@ -84,8 +85,8 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
         }
         {
           this.props.buttonIcon ?
-            <IconButton iconProps={{ iconName: this.props.buttonIcon }} {...buttonProps} /> :
-            <PrimaryButton text={this.props.buttonLabel} {...buttonProps}/>
+            <ActionButton iconProps={{ iconName: this.props.buttonIcon }} {...buttonProps} /> :
+            <PrimaryButton {...buttonProps}/>
         }
 
         <Panel isOpen={this.state.panelOpen}

src/controls/filePicker/FilePicker.types.ts

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

src/controls/filePicker/IFilePickerProps.ts

@@ -34,7 +34,7 @@ export interface IFilePickerProps {
   /**
    * File extensions to be displayed.
    */
-  accepts?: string;
+  accepts?: string[];
 
   /**
    * Sets the label to inform that the value is required.

src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx

@@ -21,6 +21,7 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
   public render(): React.ReactElement<IUploadFilePickerTabProps> {
     const { filePickerResult } = this.state;
     const fileName: string = filePickerResult ? filePickerResult.fileName : null;
+    const acceptedFilesExtensions = this.props.accepts ? this.props.accepts.join(",") : null;
 
     return (
       <div className={styles.tabContainer}>
@@ -31,7 +32,7 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
           <input
             className={styles.localTabInput}
             type="file" id="fileInput"
-            accept={this.props.accepts} multiple={false} onChange={(event: React.ChangeEvent<HTMLInputElement>) => this._handleFileUpload(event)}
+            accept={acceptedFilesExtensions} multiple={false} onChange={(event: React.ChangeEvent<HTMLInputElement>) => this._handleFileUpload(event)}
           />
           {
             fileName &&

src/controls/filePicker/controls/FileBrowser/IFileBrowserProps.ts

@@ -7,7 +7,7 @@ export interface IFileBrowserProps {
   fileBrowserService: FileBrowserService;
   libraryName: string;
   folderPath: string;
-  accepts: string;
+  accepts: string[];
   onChange: (filePickerResult: IFilePickerResult) => void;
   onOpenFolder: (folder: IFile) => void;
 }

src/services/FileBrowserService.ts

@@ -22,9 +22,9 @@ export class FileBrowserService {
    * Gets files from current sites library
    * @param libraryName
    * @param folderPath
-   * @param acceptedFilesExtensionsList
+   * @param acceptedFilesExtensions
    */
-  public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensionsList?: string, nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
+  public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
     let filesQueryResult: FilesQueryResult = { items: [], nextHref: null };
     try {
       let restApi = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/GetByTitle('${libraryName}')/RenderListDataAsStream`;
@@ -36,7 +36,7 @@ export class FileBrowserService {
         folderPath = null;
       }
 
-      filesQueryResult = await this._getListDataAsStream(restApi, folderPath, acceptedFilesExtensionsList);
+      filesQueryResult = await this._getListDataAsStream(restApi, folderPath, acceptedFilesExtensions);
     } catch (error) {
       filesQueryResult.items = null;
       console.error(error.message);
@@ -80,17 +80,17 @@ export class FileBrowserService {
    * Executes query to load files with possible extension filtering
    * @param restApi
    * @param folderPath
-   * @param acceptedFilesExtensionsList
+   * @param acceptedFilesExtensions
    */
-  protected _getListDataAsStream = async (restApi: string, folderPath: string, acceptedFilesExtensionsList?: string): Promise<FilesQueryResult> => {
+  protected _getListDataAsStream = async (restApi: string, folderPath: string, acceptedFilesExtensions?: string[]): Promise<FilesQueryResult> => {
     let filesQueryResult: FilesQueryResult = { items: [], nextHref: null };
     try {
       const body = {
         parameters: {
           AllowMultipleValueFilterForTaxonomyFields: true,
           // ContextInfo (1), ListData (2), ListSchema (4), ViewMetadata (1024), EnableMediaTAUrls (4096), ParentInfo (8192)
           RenderOptions: 1 | 2 | 4 | 1024 | 4096 | 8192,
-          ViewXml: this.getFilesCamlQueryViewXml(acceptedFilesExtensionsList)
+          ViewXml: this.getFilesCamlQueryViewXml(acceptedFilesExtensions)
         }
       };
       if (folderPath) {
@@ -128,12 +128,12 @@ export class FileBrowserService {
    * Generates CamlQuery files filter.
    * @param accepts
    */
-  protected getFileTypeFilter(accepts: string) {
+  protected getFileTypeFilter(accepts: string[]) {
     let fileFilter: string = "";
 
-    if (accepts && accepts != "") {
+    if (accepts && accepts.length > 0) {
       fileFilter = "<Values>";
-      accepts.split(",").forEach((fileType: string, index: number) => {
+      accepts.forEach((fileType: string, index: number) => {
         fileType = fileType.replace(".", "");
         if (index >= 0) {
           fileFilter = fileFilter + `<Value Type="Text">${fileType}</Value>`;
@@ -148,7 +148,7 @@ export class FileBrowserService {
   /**
    * Generates Files CamlQuery ViewXml
    */
-  protected getFilesCamlQueryViewXml = (accepts: string) => {
+  protected getFilesCamlQueryViewXml = (accepts: string[]) => {
     const fileFilter: string = this.getFileTypeFilter(accepts);
     let queryCondition = fileFilter && fileFilter != "" ?
       `<Query>

src/services/FilesSearchService.ts

@@ -41,7 +41,7 @@ export class FilesSearchService {
     }
   }
 
-  public executeRecentSearch = async (accepts?: string) => {
+  public executeRecentSearch = async (accepts?: string[]) => {
     try {
       const webId = this.context.pageContext.web.id.toString();
       const siteId = this.context.pageContext.site.id.toString();
@@ -193,11 +193,11 @@ export class FilesSearchService {
   /**
    * Builds a file filter using the accepted file extensions
    */
-  private _getFileFilter(accepts?: string) {
+  private _getFileFilter(accepts?: string[]) {
     let fileFilter: string = undefined;
     if (accepts) {
       fileFilter = " AND (";
-      accepts.split(",").forEach((fileType: string, index: number) => {
+      accepts.forEach((fileType: string, index: number) => {
         fileType = fileType.replace(".", "");
         if (index > 0) {
           fileFilter = fileFilter + " OR ";

src/services/OneDriveService.ts

@@ -26,7 +26,7 @@ export class OneDriveService extends FileBrowserService {
   /**
    * Gets files from OneDrive personal library
    */
-  public getListItems = async (libraryName: string, folderPath?: string, acceptedFilesExtensionsList?: string, nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
+  public getListItems = async (libraryName: string, folderPath?: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
     let filesQueryResult: FilesQueryResult = { items: [], nextHref: null };
     try {
       const oneDriveRootFolder = await this.getOneDriveRootFolderFullUrl();
@@ -47,7 +47,7 @@ export class OneDriveService extends FileBrowserService {
       }
 
       const restApi = `${this.context.pageContext.web.absoluteUrl}/_api/SP.List.GetListDataAsStream?listFullUrl='${encodedListUrl}'&${queryStringParams}`;
-      filesQueryResult = await this._getListDataAsStream(restApi, null, acceptedFilesExtensionsList);
+      filesQueryResult = await this._getListDataAsStream(restApi, null, acceptedFilesExtensions);
     } catch (error) {
       filesQueryResult.items = null;
       console.error(error.message);

src/services/OrgAssetsService.ts

@@ -10,7 +10,7 @@ export class OrgAssetsService extends FileBrowserService {
     super(context, itemsToDownloadCount);
   }
 
-  public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensionsList?: string, nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
+  public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
     let filesQueryResult: FilesQueryResult = { items: [], nextHref: null };
     try {
       // Retrieve Lib path from folder path
@@ -37,7 +37,7 @@ export class OrgAssetsService extends FileBrowserService {
       }
       const restApi = `${this.context.pageContext.web.absoluteUrl}/_api/SP.List.GetListDataAsStream?listFullUrl='${libFullUrl}'&${queryStringParams}`;
 
-      filesQueryResult = await this._getListDataAsStream(restApi, null, acceptedFilesExtensionsList);
+      filesQueryResult = await this._getListDataAsStream(restApi, null, acceptedFilesExtensions);
     } catch (error) {
       filesQueryResult.items = null;
       console.error(error.message);