Add donwloadFileContent method to allow get selected file.

Piotr Siatka · Piotr Siatka · commit 51c69ec63438 · 2019-09-18T09:23:58.000+02:00
Update documentation.
diff --git a/docs/documentation/docs/controls/FilePicker.md b/docs/documentation/docs/controls/FilePicker.md
@@ -60,7 +60,7 @@ 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. |
 | 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. |
+| onChange | (filePickerResult: IFilePickerResult) => void | no | Handler when the file selection has been changed. |
 | context | ApplicationCustomizerContext | 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"] |
 | required | boolean | no | Sets the label to inform that the value is required. |
@@ -79,12 +79,12 @@ interface `IFilePickerResult`
 
 Provides options for carousel buttons location.
 
-| Value | Description |
+| Value | Type | Description |
 | ---- | ---- |
-| fileName | string | yes | File namr of the result with the extension. |
-| fileNameWithoutExtension | string | yes | File namr of the result without the extension. |
-| fileAbsoluteUrl | string | yes | Absolute URL of the file. Null in case of file upload. |
-| file | File | yes | JS Object representing File. Will be set in case of file upload. |
+| fileName | string | File namr of the result with the extension. |
+| fileNameWithoutExtension | string | File name of the result without the extension. |
+| fileAbsoluteUrl | string | Absolute URL of the file. Null in case of file upload. |
+| downloadFileContent | () => Promise<File> | Function allows to download file content. Returns File object. |
 
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/filePicker/FilePicker)
diff --git a/src/controls/filePicker/FilePicker.types.ts b/src/controls/filePicker/FilePicker.types.ts
@@ -15,9 +15,25 @@ export interface IFilePickerTab {
   onClose: () => void;
 }
 
+/**
+ * Represents the result of the FilePicker.
+ */
 export interface IFilePickerResult {
+  /**
+   * Selected file name with extension.
+   */
   fileName: string;
+  /**
+   * Selected file name without extension.
+   */
   fileNameWithoutExtension: string;
+  /**
+   * Absolute file URL. Undefined in case of file upload.
+   */
   fileAbsoluteUrl: string;
-  file: File;
+
+  /**
+   * Downloads file picker result content.
+   */
+  downloadFileContent: () => Promise<File>;
 }
diff --git a/src/controls/filePicker/IFilePickerProps.ts b/src/controls/filePicker/IFilePickerProps.ts
@@ -25,7 +25,7 @@ export interface IFilePickerProps {
   /**
    * Handler when file has been changed.
    */
-  onChanged: (filePickerResult: IFilePickerResult) => void;
+  onChanged?: (filePickerResult: IFilePickerResult) => void;
 
   /**
    * Current context.
diff --git a/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx b/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
@@ -62,10 +62,10 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
    */
   private _handleChange = (fileUrl: string) => {
     const filePickerResult: IFilePickerResult = fileUrl && this._isUrl(fileUrl) ? {
-      file: null,
       fileAbsoluteUrl: fileUrl,
       fileName: GeneralHelper.getFileNameFromUrl(fileUrl),
-      fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(fileUrl)
+      fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(fileUrl),
+      downloadFileContent: () => { return this.props.fileSearchService.downloadBingContent(fileUrl, GeneralHelper.getFileNameFromUrl(fileUrl)); }
     } : null;
     this.setState({
       filePickerResult
@@ -95,7 +95,7 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
       return strings.NoExternalLinksValidationMessage;
     }
 
-    const fileExists = await this.props.fileSearchService.fetchFile(value);
+    const fileExists = await this.props.fileSearchService.checkFileExists(value);
     this.setState({ isValid: fileExists });
 
     const strResult = fileExists ? '' : strings.ProvidedValueIsInvalid;
diff --git a/src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx b/src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx
@@ -131,6 +131,9 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
    * Is called when user selects a different file
    */
   private _handleSelectionChange = (filePickerResult: IFilePickerResult) => {
+    if (filePickerResult) {
+      filePickerResult.downloadFileContent = () => { return this.props.oneDriveService.downloadSPFileContent(filePickerResult.fileAbsoluteUrl, filePickerResult.fileName); };
+    }
     this.setState({
       filePickerResult
     });
diff --git a/src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx b/src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx
@@ -102,11 +102,12 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
       //Get the selected key
       const selectedKey: IRecentFile = selectedItems[0] as IRecentFile;
       const filePickerResult: IFilePickerResult = {
-        file: null,
         fileAbsoluteUrl: selectedKey.fileUrl,
         fileName: GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl),
-        fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedKey.fileUrl)
+        fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedKey.fileUrl),
+        downloadFileContent: () => { return this.props.fileSearchService.downloadSPFileContent(selectedKey.fileUrl, GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl)); }
       };
+
       // Save the selected file
       this.setState({
         filePickerResult
diff --git a/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx b/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx
@@ -112,6 +112,10 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
    * Is called when user selects a different file
    */
   private _handleSelectionChange = (filePickerResult: IFilePickerResult) => {
+    if (filePickerResult) {
+      filePickerResult.downloadFileContent = () => { return this.props.fileBrowserService.downloadSPFileContent(filePickerResult.fileAbsoluteUrl, filePickerResult.fileName); };
+    }
+    // this.props.fileBrowserService
     this.setState({
       filePickerResult
     });
diff --git a/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx b/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx
@@ -75,10 +75,10 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
     const file: File = files[0];
 
     const filePickerResult: IFilePickerResult = {
-      file,
       fileAbsoluteUrl: null,
       fileName: file.name,
-      fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(file.name)
+      fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(file.name),
+      downloadFileContent: () => { return Promise.resolve(file); }
     };
 
     if (GeneralHelper.isImage(file.name)) {
diff --git a/src/controls/filePicker/WebSearchTab/WebSearchTab.tsx b/src/controls/filePicker/WebSearchTab/WebSearchTab.tsx
@@ -102,10 +102,10 @@ export default class WebSearchTab extends React.Component<IWebSearchTabProps, IW
       // even if it breaks the page.
       const selectedUrl: string = selectedItem.contentUrl.replace('http://', 'https://');
       selectedFileResult = {
-        file: null,
         fileAbsoluteUrl: selectedUrl,
         fileName: GeneralHelper.getFileNameFromUrl(selectedUrl),
-        fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedUrl)
+        fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedUrl),
+        downloadFileContent: () => { return this.props.bingSearchService.downloadBingContent(selectedUrl, GeneralHelper.getFileNameFromUrl(selectedUrl)); }
       };
     }
 
diff --git a/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx b/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx
@@ -434,7 +434,7 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
         fileAbsoluteUrl: selectedItem.absoluteUrl,
         fileName: GeneralHelper.getFileNameFromUrl(selectedItem.name),
         fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedItem.name),
-        file: null
+        downloadFileContent: null
       };
     }
     this.props.onChange(filePickerResult);
@@ -443,6 +443,9 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
     });
   }
 
+  /**
+   * Handles item click.
+   */
   private _handleItemInvoked = (item: IFile) => {
    // If a file is selected, open the library
    if (item.isFolder) {
diff --git a/src/services/FileBrowserService.ts b/src/services/FileBrowserService.ts
@@ -46,6 +46,9 @@ export class FileBrowserService {
   }
 
 
+  /**
+   * Provides the URL for file preview.
+   */
   public getFileThumbnailUrl = (file: IFile, thumbnailWidth: number, thumbnailHeight: number): string => {
     const thumbnailUrl = `${this.mediaBaseUrl}/transform/thumbnail?provider=spo&inputFormat=${file.fileType}&cs=${this.callerStack}&docid=${file.spItemUrl}&${this.driveAccessToken}&width=${thumbnailWidth}&height=${thumbnailHeight}`;
     return thumbnailUrl;
@@ -77,6 +80,26 @@ export class FileBrowserService {
     }
   }
 
+  /**
+   * Downloads document content from SP location.
+   */
+  public downloadSPFileContent = async (absoluteFileUrl: string, fileName: string): Promise<File> => {
+    try {
+      const fileDownloadResult = await this.context.spHttpClient.get(absoluteFileUrl, SPHttpClient.configurations.v1);
+
+      if (!fileDownloadResult || !fileDownloadResult.ok) {
+        throw new Error(`Something went wrong when downloading the file. Status='${fileDownloadResult.status}'`);
+      }
+
+      // Return file created from blob
+      const blob : Blob = await fileDownloadResult.blob();
+      return  new File([blob], fileName);
+    } catch (err) {
+      console.error(`[FileBrowserService.fetchFileContent] Err='${err.message}'`);
+      return null;
+    }
+  }
+
   /**
    * Executes query to load files with possible extension filtering
    * @param restApi
diff --git a/src/services/FilesSearchService.ts b/src/services/FilesSearchService.ts
@@ -23,7 +23,10 @@ export class FilesSearchService {
     this.bingAPIKey = bingAPIKey;
   }
 
-  public fetchFile = async (fileUrl: string): Promise<boolean> => {
+  /**
+   * Checks if file exists
+   */
+  public checkFileExists = async (fileUrl: string): Promise<boolean> => {
     try {
       const fetchFileResult = await this.context.httpClient.fetch(fileUrl, SPHttpClient.configurations.v1, {
         headers: new Headers(),
@@ -42,6 +45,9 @@ export class FilesSearchService {
     }
   }
 
+  /**
+   * Executes Recent files search.
+   */
   public executeRecentSearch = async (accepts?: string[]) => {
     try {
       const webId = this.context.pageContext.web.id.toString();
@@ -81,7 +87,7 @@ export class FilesSearchService {
           ]
         },
         SortList: {
-          results : [
+          results: [
             {
               "Property": "LastModifiedTime",
               "Direction": 1
@@ -118,6 +124,9 @@ export class FilesSearchService {
     }
   }
 
+  /**
+   * Executes bing search for a file.
+   */
   public executeBingSearch = async (queryParams: BingQuerySearchParams): Promise<ISearchResult[]> => {
     try {
       const aspect: string = queryParams.aspect ? queryParams.aspect : 'All';
@@ -159,11 +168,54 @@ export class FilesSearchService {
     }
   }
 
+  /**
+   * Downloads document content from SP location.
+   */
+  public downloadSPFileContent = async (absoluteFileUrl: string, fileName: string): Promise<File> => {
+    try {
+      const fileDownloadResult = await this.context.spHttpClient.get(absoluteFileUrl, SPHttpClient.configurations.v1);
+
+      if (!fileDownloadResult || !fileDownloadResult.ok) {
+        throw new Error(`Something went wrong when downloading the file. Status='${fileDownloadResult.status}'`);
+      }
+
+      // Return file created from blob
+      const blob: Blob = await fileDownloadResult.blob();
+      return new File([blob], fileName);
+    } catch (err) {
+      console.error(`[FileBrowserService.fetchFileContent] Err='${err.message}'`);
+      return null;
+    }
+  }
+
+  /**
+   * Downloads document content from Remote location.
+   */
+  public downloadBingContent = async (absoluteFileUrl: string, fileName: string): Promise<File> => {
+    try {
+      const fileDownloadResult = await this.context.httpClient.get(absoluteFileUrl, SPHttpClient.configurations.v1);
+
+      if (!fileDownloadResult || !fileDownloadResult.ok) {
+        throw new Error(`Something went wrong when downloading the file. Status='${fileDownloadResult.status}'`);
+      }
+
+      // Return file created from blob
+      const blob: Blob = await fileDownloadResult.blob();
+      return new File([blob], fileName);
+    } catch (err) {
+      console.error(`[FileBrowserService.fetchFileContent] Err='${err.message}'`);
+      return null;
+    }
+  }
+
+  /**
+   * Parses Recent Search results.
+   */
   private parseRecentSearchResult = (cells: Array<any>) => {
-    const titleCell = find(cells, x=> x.Key == "Title");
-    const keyCell = find(cells, x=> x.Key == "UniqueID");
-    const fileUrlCell = find(cells, x=> x.Key == "DefaultEncodingURL");
-    const editedByCell = find(cells, x=> x.Key == "ModifiedBy");
+    const titleCell = find(cells, x => x.Key == "Title");
+    const keyCell = find(cells, x => x.Key == "UniqueID");
+    const fileUrlCell = find(cells, x => x.Key == "DefaultEncodingURL");
+    const editedByCell = find(cells, x => x.Key == "ModifiedBy");
 
     const recentFile: IRecentFile = {
       key: keyCell ? keyCell.Value : null,
@@ -174,6 +226,9 @@ export class FilesSearchService {
     return recentFile;
   }
 
+  /**
+   * Parses Bing search results.
+   */
   private parseBingSearchResult = (bingResult: IBingSearchResult): ISearchResult => {
     // Get dimensions
     const width: number = bingResult!.thumbnail!.width ? bingResult!.thumbnail!.width : bingResult!.width;
diff --git a/src/services/OneDriveService.ts b/src/services/OneDriveService.ts
@@ -98,13 +98,19 @@ export class OneDriveService extends FileBrowserService {
     return this.oneDriveRootFolderAbsoluteUrl;
   }
 
+  /**
+   * Gets OneDrive RootFolder server relative URL.
+   */
   public getOneDriveRootFolderRelativeUrl = async (): Promise<string> => {
     if (!this.oneDriveRootFolderRelativeUrl) {
       await this.getOneDriveRootFolderFullUrl();
     }
     return this.oneDriveRootFolderRelativeUrl;
   }
 
+  /**
+   * Gets OneDrive personal library Title
+   */
   public getOneDrivePersonalLibraryTitle = async (): Promise<string> => {
     if (!this.oneDrivePersonalLibraryTitle) {
       await this.getOneDriveRootFolderFullUrl();
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
