#444 Add support for IE11 for FilePicker

Author: Piotr Siatka

src/common/utilities/GeneralHelper.ts

@@ -232,6 +232,24 @@ export class GeneralHelper {
       }
     }
 
+    /**
+     * To support IE11 that has no support for File constructor
+     * @param blob
+     */
+    public static getFileFromBlob(blob :Blob, fileName: string) : File {
+      let result : any = null;
+      // IE 11 foesn't support File API, create a workaround to return Blob with fileName assigned.
+      try {
+        result = new File([blob], fileName);
+      }
+      catch (ieErr) {
+        result = blob;
+        result.fileName = fileName;
+      }
+
+      return result;
+    }
+
     public static formatBytes(bytes, decimals) {
       if (bytes == 0) {
         return strings.EmptyFileSize;

src/services/FileBrowserService.ts

@@ -92,8 +92,8 @@ export class FileBrowserService {
       }
 
       // Return file created from blob
-      const blob : Blob = await fileDownloadResult.blob();
-      return  new File([blob], fileName);
+      const blob: Blob = await fileDownloadResult.blob();
+      return GeneralHelper.getFileFromBlob(blob, fileName);
     } catch (err) {
       console.error(`[FileBrowserService.fetchFileContent] Err='${err.message}'`);
       return null;

src/services/FilesSearchService.ts

@@ -3,6 +3,7 @@ import { SPHttpClient } from "@microsoft/sp-http";
 import { ISearchResult, BingQuerySearchParams, IRecentFile } from "./FilesSearchService.types";
 import { find } from "office-ui-fabric-react/lib/Utilities";
 import { ExtensionContext } from "@microsoft/sp-extension-base";
+import { GeneralHelper } from "../common/utilities";
 
 /**
  * Maximum file size when searching
@@ -181,7 +182,8 @@ export class FilesSearchService {
 
       // Return file created from blob
       const blob: Blob = await fileDownloadResult.blob();
-      return new File([blob], fileName);
+      // Retrieve file from blob - method supports IE11
+      return GeneralHelper.getFileFromBlob(blob, fileName);
     } catch (err) {
       console.error(`[FileSearchService.fetchFileContent] Err='${err.message}'`);
       return null;
@@ -204,7 +206,7 @@ export class FilesSearchService {
 
       // Return file created from blob
       const blob: Blob = await fileDownloadResult.blob();
-      return new File([blob], fileName);
+      return GeneralHelper.getFileFromBlob(blob, fileName);
     } catch (err) {
       console.error(`[FileSearchService.fetchFileContent] Err='${err.message}'`);
       return null;

src/services/OneDriveService.ts

@@ -5,6 +5,7 @@ import { SPHttpClient } from '@microsoft/sp-http';
 import { FileBrowserService } from "./FileBrowserService";
 import { FilesQueryResult } from "./FileBrowserService.types";
 import { ExtensionContext } from "@microsoft/sp-extension-base";
+import { GeneralHelper } from "../Utilities";
 
 export class OneDriveService extends FileBrowserService {
   protected oneDrivePersonalUrl: string;
@@ -77,8 +78,8 @@ export class OneDriveService extends FileBrowserService {
       }
 
       // Return file created from blob
-      const blob : Blob = await fileDownloadResult.blob();
-      return  new File([blob], fileName);
+      const blob: Blob = await fileDownloadResult.blob();
+      return GeneralHelper.getFileFromBlob(blob, fileName);
     } catch (err) {
       console.error(`[OneDriveService.fetchFileContent] Err='${err.message}'`);
       return null;