fix of #1129

Author: AJIXuMuK

src/controls/filePicker/FilePicker.tsx

@@ -89,10 +89,11 @@ export class FilePicker extends React.Component<
       organisationAssetsEnabled: orgAssetsEnabled,
       selectedTab: this.getDefaultSelectedTabKey(this.props, orgAssetsEnabled),
     });
-    if (!!this.props.context && !!this.props.webAbsoluteUrl){
-      let webTitle = await this.fileBrowserService.getSiteTitle();
+    if (!!this.props.context && !!this.props.webAbsoluteUrl) {
+      const { title, id } = await this.fileBrowserService.getSiteTitleAndId();
       this.setState({
-        webTitle
+        webTitle: title,
+        webId: id
       });
     }
   }
@@ -222,6 +223,8 @@ export class FilePicker extends React.Component<
                 includePageLibraries={this.props.includePageLibraries}
                 defaultFolderAbsolutePath={this.props.defaultFolderAbsolutePath}
                 webTitle={this.state.webTitle}
+                webId={this.state.webId}
+                webAbsoluteUrl={this.props.webAbsoluteUrl}
                 {...linkTabProps}
               />
             )}

src/controls/filePicker/IFilePickerState.ts

@@ -3,6 +3,7 @@ export interface IFilePickerState {
   panelOpen?: boolean;
   selectedTab?: string;
   webTitle?: string;
+  webId?: string;
 
   organisationAssetsEnabled?: boolean;
 }

src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabProps.ts

@@ -14,11 +14,21 @@ export interface ISiteFilePickerTabProps extends IFilePickerTab {
    * Specifies a default folder to be active in the Site Files tab
    */
   defaultFolderAbsolutePath?: string;
-  
- /**
+
+  /**
    * Title of the default site
    */
   webTitle?: string;
 
+  /**
+   * Id of the default site
+   */
+  webId?: string;
+
+  /**
+   * Absolute Url of the default site
+   */
+  webAbsoluteUrl?: string;
+
   includePageLibraries?: boolean;
 }

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

@@ -14,7 +14,7 @@ import { SPWeb } from "@microsoft/sp-page-context";
 
 import styles from './SiteFilePickerTab.module.scss';
 import * as strings from 'ControlStrings';
-import { urlCombine } from '../../../common/utilities';
+import { toRelativeUrl, urlCombine } from '../../../common/utilities';
 import { cloneDeep } from '@microsoft/sp-lodash-subset';
 
 export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTabProps, ISiteFilePickerTabState> {
@@ -27,17 +27,23 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
     const breadcrumbSiteNode: FilePickerBreadcrumbItem = this.props.breadcrumbFirstNode ? this.props.breadcrumbFirstNode : {
       isCurrentItem: false,
       text: props.webTitle || props.context.pageContext.web.title,
-      key: props.context.pageContext.web.id.toString(),
+      key: props.webId || props.context.pageContext.web.id.toString(),
     };
     // add click event after defining breadcrumb so that it also applies to breadcrumb items passed to the component as properties
     breadcrumbSiteNode.onClick = (ev, itm) => { this.onBreadcrumpItemClick(itm); };
 
     let breadcrumbItems: FilePickerBreadcrumbItem[] = [breadcrumbSiteNode];
 
+    let webAbsoluteUrl = props.webAbsoluteUrl || props.context.pageContext.web.absoluteUrl;
+    let webServerRelativeUrl = toRelativeUrl(webAbsoluteUrl);
+
     let { folderAbsPath = undefined, libraryServRelUrl = undefined, folderServRelPath = undefined, folderBreadcrumbs = [] } = props.defaultFolderAbsolutePath
       ? this._parseInitialLocationState(
         props.defaultFolderAbsolutePath,
-        props.context.pageContext.web
+        {
+          serverRelativeUrl: webServerRelativeUrl,
+          absoluteUrl: webAbsoluteUrl
+        }
       )
       : {};
 
@@ -55,7 +61,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
     };
   }
 
-  private _parseInitialLocationState(folderAbsPath: string, { serverRelativeUrl: webServRelUrl, absoluteUrl: webAbsUrl }: SPWeb) {
+  private _parseInitialLocationState(folderAbsPath: string, { serverRelativeUrl: webServRelUrl, absoluteUrl: webAbsUrl }) {
     // folderAbsPath: "https://tenant.sharepoint.com/teams/Test/DocLib/Folder"
 
     // folderServRelPath: "/teams/Test/DocLib/Folder"
@@ -179,7 +185,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
               onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
               fileBrowserService={this.props.fileBrowserService}
               libraryUrl={this.state.libraryUrl}
-              folderPath={this.state.libraryPath}
+              folderPath={decodeURIComponent(this.state.libraryPath)}
               accepts={this.props.accepts} />}
         </div>
         <div className={styles.actionButtonsContainer}>

src/services/FileBrowserService.ts

@@ -176,6 +176,21 @@ export class FileBrowserService {
 
   }
 
+  public getSiteTitleAndId = async (): Promise<{ title: string, id: string }> => {
+    const restApi = `${this.siteAbsoluteUrl}/_api/web?$select=Title,Id`;
+    const webResult = await this.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1);
+
+    if (!webResult || !webResult.ok) {
+      throw new Error(`Something went wrong when executing request. Status='${webResult.status}'`);
+    }
+    if (!webResult || !webResult) {
+      throw new Error(`Cannot read data from the results.`);
+    }
+    let webJson = await webResult.json();
+    return { title: webJson.Title, id: webJson.Id };
+
+  }
+
   /**
    * Executes query to load files with possible extension filtering
    * @param restApi

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1662,7 +1662,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           />
           <FilePicker
             bingAPIKey="<BING API KEY>"
-            defaultFolderAbsolutePath={this.state.filePickerDefaultFolderAbsolutePath}
+            webAbsoluteUrl="https://aterentiev.sharepoint.com/sites/SPFxinTeamsDemo"
+            defaultFolderAbsolutePath={"https://aterentiev.sharepoint.com/sites/SPFxinTeamsDemo/Shared%20Documents/General"}
             //accepts={[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
             buttonLabel="Add File"
             buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}