fix of #724

Author: AJIXuMuK

src/controls/filePicker/OneDriveFilesTab/IOneDriveFilesTabState.ts

@@ -4,7 +4,7 @@ import { IFilePickerResult } from "../FilePicker.types";
 export interface IOneDriveFilesTabState {
   filePickerResult: IFilePickerResult;
   libraryAbsolutePath: string;
-  libraryTitle: string;
+  libraryUrl: string;
   folderPath: string;
   folderName: string;
 

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx

@@ -19,7 +19,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
     this.state = {
       filePickerResult: null,
       libraryAbsolutePath: undefined,
-      libraryTitle: strings.DocumentLibraries,
+      libraryUrl: '/Documents',
       folderPath: undefined,
       folderName: strings.DocumentLibraries,
       breadcrumbItems: []
@@ -56,8 +56,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
 
     this.setState({
       libraryAbsolutePath: libraryAbsolutePath,
-      folderName: folderPath,
-      libraryTitle
+      folderName: folderPath
     });
   }
 
@@ -73,7 +72,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
               onChange={(filePickerResult: IFilePickerResult) => this._handleSelectionChange(filePickerResult)}
               onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
               fileBrowserService={this.props.oneDriveService}
-              libraryName={this.state.libraryTitle}
+              libraryUrl={this.state.libraryUrl}
               folderPath={this.state.folderPath}
               accepts={this.props.accepts} />}
         </div>

src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabState.ts

@@ -3,7 +3,7 @@ import { IFilePickerResult , FilePickerBreadcrumbItem} from "../FilePicker.types
 export interface ISiteFilePickerTabState {
   filePickerResult: IFilePickerResult;
   libraryAbsolutePath: string;
-  libraryTitle: string;
+  libraryUrl: string;
   libraryPath: string;
   folderName: string;
 

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

@@ -26,7 +26,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
     this.state = {
       filePickerResult: null,
       libraryAbsolutePath: undefined,
-      libraryTitle: strings.DocumentLibraries,
+      libraryUrl: '/Shared%20Documents',
       libraryPath: undefined,
       folderName: strings.DocumentLibraries,
       breadcrumbItems: [breadcrumbSiteNode]
@@ -49,7 +49,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
               onChange={(filePickerResult: IFilePickerResult) => this._handleSelectionChange(filePickerResult)}
               onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
               fileBrowserService={this.props.fileBrowserService}
-              libraryName={this.state.libraryTitle}
+              libraryUrl={this.state.libraryUrl}
               folderPath={this.state.libraryPath}
               accepts={this.props.accepts} />}
         </div>
@@ -180,7 +180,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
     }
     this.setState({
       libraryAbsolutePath: library.absoluteUrl,
-      libraryTitle: library.title,
+      libraryUrl: library.webRelativeUrl,
       libraryPath: library.serverRelativeUrl,
       breadcrumbItems
     });

src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx

@@ -461,7 +461,7 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
    * Gets all files in a library with a matchihg path
    */
   private async _getListItems(concatenateResults: boolean = false) {
-    const { libraryName, folderPath, accepts } = this.props;
+    const { libraryUrl, folderPath, accepts } = this.props;
     let { items, nextPageQueryString } = this.state;
 
     let filesQueryResult: FilesQueryResult = { items: [], nextHref: null };
@@ -475,7 +475,7 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
         nextPageQueryString
       });
       // Load files in the folder
-      filesQueryResult = await this.props.fileBrowserService.getListItems(libraryName, folderPath, accepts, nextPageQueryString);
+      filesQueryResult = await this.props.fileBrowserService.getListItems(libraryUrl, folderPath, accepts, nextPageQueryString);
     } catch (error) {
       filesQueryResult.items = null;
       console.error(error.message);

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

@@ -4,7 +4,7 @@ import { IFilePickerResult } from "../../FilePicker.types";
 
 export interface IFileBrowserProps {
   fileBrowserService: FileBrowserService;
-  libraryName: string;
+  libraryUrl: string;
   folderPath: string;
   accepts: string[];
   onChange: (filePickerResult: IFilePickerResult) => void;

src/services/FileBrowserService.ts

@@ -21,14 +21,14 @@ export class FileBrowserService {
 
   /**
    * Gets files from current sites library
-   * @param libraryName
+   * @param listUrl web-relative url of the list
    * @param folderPath
    * @param acceptedFilesExtensions
    */
-  public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
+  public getListItems = async (listUrl: 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`;
+      let restApi = `${this.context.pageContext.web.absoluteUrl}/_api/web/GetList('${listUrl}')/RenderListDataAsStream`;
 
       // Do not pass FolderServerRelativeUrl as query parameter
       // Attach passed nextPageQueryStringParams values to REST URL
@@ -72,7 +72,7 @@ export class FileBrowserService {
         throw new Error(`Cannot read data from the results.`);
       }
 
-      const result: ILibrary[] = libResults.value.map((libItem) => { return this.parseLibItem(libItem); });
+      const result: ILibrary[] = libResults.value.map((libItem) => { return this.parseLibItem(libItem, absoluteUrl); });
       return result;
     } catch (error) {
       console.error(`[FileBrowserService.getSiteMediaLibraries]: Err='${error.message}'`);
@@ -253,11 +253,12 @@ export class FileBrowserService {
     return file;
   }
 
-  protected parseLibItem = (libItem: any): ILibrary => {
+  protected parseLibItem = (libItem: any, webUrl: string): ILibrary => {
     const library: ILibrary = {
       title: libItem.Title,
       absoluteUrl: libItem.AbsoluteUrl,
-      serverRelativeUrl: libItem.ServerRelativeUrl
+      serverRelativeUrl: libItem.ServerRelativeUrl,
+      webRelativeUrl: libItem.AbsoluteUrl.replace(webUrl, '')
     };
 
     return library;

src/services/FileBrowserService.types.ts

@@ -30,6 +30,7 @@ export interface ILibrary {
   title: string;
   absoluteUrl: string;
   serverRelativeUrl: string;
+  webRelativeUrl?: string;
   iconPath?: string;
 }
 

src/services/OneDriveService.ts

@@ -25,7 +25,7 @@ export class OneDriveService extends FileBrowserService {
   /**
    * Gets files from OneDrive personal library
    */
-  public getListItems = async (libraryName: string, folderPath?: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
+  public getListItems = async (listUrl: string, folderPath?: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
     let filesQueryResult: FilesQueryResult = { items: [], nextHref: null };
     try {
       const oneDriveRootFolder = await this.getOneDriveRootFolderFullUrl();

src/services/OrgAssetsService.ts

@@ -11,7 +11,7 @@ export class OrgAssetsService extends FileBrowserService {
     super(context, itemsToDownloadCount);
   }
 
-  public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
+  public getListItems = async (listUrl: string, folderPath: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise<FilesQueryResult> => {
     let filesQueryResult: FilesQueryResult = { items: [], nextHref: null };
     try {
       // Retrieve Lib path from folder path