Fix download for Edge browser

Author: ahmelsayed

client/src/app/download-function-app-content/download-function-app-content.component.ts

@@ -6,6 +6,8 @@ import { Subject } from 'rxjs/Subject';
 import { Component, Input, Output } from '@angular/core';
 import { KeyCodes } from 'app/shared/models/constants';
 import { FunctionAppService } from '../shared/services/function-app.service';
+import { FileUtilities } from '../shared/Utilities/file';
+import { GlobalStateService } from '../shared/services/global-state.service';
 
 type DownloadOption = 'siteContent' | 'vsProject';
 
@@ -22,7 +24,9 @@ export class DownloadFunctionAppContentComponent {
     public currentDownloadOption: DownloadOption;
     public includeAppSettings: boolean;
 
-    constructor(private _translateService: TranslateService, private _functionAppService: FunctionAppService) {
+    constructor(private _translateService: TranslateService,
+        private _functionAppService: FunctionAppService,
+        private _globalStateService: GlobalStateService) {
         this.close = new Subject<boolean>();
         this.downloadOptions = [{
             displayLabel: this._translateService.instant(PortalResources.downloadFunctionAppContent_siteContent),
@@ -38,22 +42,15 @@ export class DownloadFunctionAppContentComponent {
     downloadFunctionAppContent() {
         if (this.context) {
             const includeCsProj = this.currentDownloadOption === 'siteContent' ? false : true;
-
-            // https://github.com/eligrey/FileSaver.js/blob/00e540fda507173f83a9408f1604622538d0c81a/src/FileSaver.js#L128-L136
-            const anchor = document.createElement('a');
-            anchor.style.display = 'none';
-            document.body.appendChild(anchor);
+            this._globalStateService.setBusyState();
+            this.closeModal();
             this._functionAppService.getAppContentAsZip(this.context, includeCsProj, this.includeAppSettings)
                 .subscribe(data => {
                     if (data.isSuccessful) {
-                        const url = window.URL.createObjectURL(data.result);
-                        anchor.href = url;
-                        anchor.download = `${this.context.site.name}.zip`;
-                        anchor.click();
-                        window.URL.revokeObjectURL(url);
+                        FileUtilities.saveFile(data.result, `${this.context.site.name}.zip`);
                     }
-                    anchor.remove();
-                });
+                    this._globalStateService.clearBusyState();
+                }, () => this._globalStateService.clearBusyState());
         }
     }
 

client/src/app/shared/Utilities/file.ts

@@ -7,4 +7,26 @@ export class FileUtilities {
     public static isBinary(fileName: string): boolean {
         return !!fileName && FileUtilities.binaryExtensions.some(e => fileName.toLowerCase().endsWith(e));
     }
+
+    // https://github.com/eligrey/FileSaver.js/blob/00e540fda507173f83a9408f1604622538d0c81a/src/FileSaver.js#L128-L136
+    public static saveFile(blob: Blob, fileName: string) {
+        const windowUrl = window.URL || (<any>window).webkitURL;
+        if (window.navigator.msSaveOrOpenBlob) {
+            // Currently, Edge doesn' respect the "download" attribute to name the file from blob
+            // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7260192/
+            window.navigator.msSaveOrOpenBlob(blob, fileName);
+        } else {
+            const anchor = document.createElement('a');
+            anchor.style.display = 'none';
+            document.body.appendChild(anchor);
+            // http://stackoverflow.com/questions/37432609/how-to-avoid-adding-prefix-unsafe-to-link-by-angular2
+            setTimeout(() => {
+                const url = windowUrl.createObjectURL(blob);
+                anchor.href = url;
+                anchor.download = fileName;
+                anchor.click();
+                window.URL.revokeObjectURL(url);
+            });
+        }
+    }
 }