From e99a7d47c92346edcb8cf1971dd085d1fc039379 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Thu, 12 Oct 2023 15:56:50 +0300 Subject: [PATCH 1/4] add FileUtilsService to provide utility methods for file operations in Angular --- docs/en/UI/Angular/File-Utils-Service.md | 37 +++++++++++++++++++ docs/en/docs-nav.json | 4 ++ .../src/lib/services/file-utils.service.ts | 29 +++++++++++++++ .../packages/core/src/lib/services/index.ts | 1 + 4 files changed, 71 insertions(+) create mode 100644 docs/en/UI/Angular/File-Utils-Service.md create mode 100644 npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts diff --git a/docs/en/UI/Angular/File-Utils-Service.md b/docs/en/UI/Angular/File-Utils-Service.md new file mode 100644 index 0000000000..ea6ed4a7cf --- /dev/null +++ b/docs/en/UI/Angular/File-Utils-Service.md @@ -0,0 +1,37 @@ +# File Utils Service +FileUtilsService is an Angular service designed to provide utility methods related to file operations. The service has a `downloadBlob` function, which is used for downloading blobs as files within the context of a web application. + +## Usage + +To make use of the FileUtilsService in your Angular application, follow the steps below: + +Injection: +Firstly, ensure that the service is injected into the component or any other Angular entity where you wish to use it. + +```js +import { FileUtilsService } from '@abp/ng.core'; + +constructor(private fileUtils: FileUtilsService) { } +// or +// private fileUtils = inject(FileUtilsService) +``` + +Downloading a Blob: + +Once you have the service injected, you can use the downloadBlob method to initiate the download of blob data as a file. For instance: + +```js +someMethod() { + const myBlob = new Blob(["Hello, World!"], { type: "text/plain" }); + this.fileUtils.downloadBlob(myBlob, "hello.txt"); +} +``` + +Permissions & Considerations: + +Ensure that you have appropriate permissions and user interactions before triggering a download. Since downloadBlob initiates a download programmatically, it's best to tie this action to direct user interactions, such as button clicks, to prevent unexpected behaviors or browser restrictions. + + +### DOCUMENT Token in Service + +Angular, being a platform-agnostic framework, is designed to support not only browser-based applications but also other environments like server-side rendering (SSR) through Angular Universal. This design philosophy introduces challenges when accessing global browser-specific objects like window or document directly. To address this, Angular provides a DOCUMENT token that can be used to inject the document object into Angular entities like components and services. \ No newline at end of file diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index afdf89657c..cfe52ffd78 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1153,6 +1153,10 @@ { "text": "Content Security Strategy", "path": "UI/Angular/Content-Security-Strategy.md" + }, + { + "text":"File Utils Service", + "path":"UI/Angular/File-Utils-Service.md" } ] }, diff --git a/npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts b/npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts new file mode 100644 index 0000000000..32a5bea88b --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts @@ -0,0 +1,29 @@ +import { Injectable, inject } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; + +@Injectable({ + providedIn: 'root', +}) +export class FileUtilsService { + protected readonly document = inject(DOCUMENT); + get window() { + return this.document.defaultView; + } + downloadBlob(blob: Blob, fileName: string) { + const blobUrl = this.window.URL.createObjectURL(blob); + const a = this.document.createElement('a'); + a.style.display = 'none'; + a.href = blobUrl; + a.download = fileName; + this.document.body.appendChild(a); + a.dispatchEvent( + new MouseEvent('click', { + bubbles: true, + cancelable: true, + view: this.window, + }), + ); + this.window.URL.revokeObjectURL(blobUrl); + this.document.body.removeChild(a); + } +} diff --git a/npm/ng-packs/packages/core/src/lib/services/index.ts b/npm/ng-packs/packages/core/src/lib/services/index.ts index 9b193ab67f..43b7865d95 100644 --- a/npm/ng-packs/packages/core/src/lib/services/index.ts +++ b/npm/ng-packs/packages/core/src/lib/services/index.ts @@ -21,3 +21,4 @@ export * from './track-by.service'; export * from './local-storage.service'; export * from './window.service'; export * from './internet-connection-service' +export * from './file-utils.service' From 213fd6234e9bf8efc7bf50e4b330c796cb750c89 Mon Sep 17 00:00:00 2001 From: Masum ULU <49063256+masumulu28@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:08:04 +0300 Subject: [PATCH 2/4] Improve document for FileUtilsService --- docs/en/UI/Angular/File-Utils-Service.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/en/UI/Angular/File-Utils-Service.md b/docs/en/UI/Angular/File-Utils-Service.md index ea6ed4a7cf..27c8a57e1f 100644 --- a/docs/en/UI/Angular/File-Utils-Service.md +++ b/docs/en/UI/Angular/File-Utils-Service.md @@ -1,11 +1,11 @@ # File Utils Service FileUtilsService is an Angular service designed to provide utility methods related to file operations. The service has a `downloadBlob` function, which is used for downloading blobs as files within the context of a web application. -## Usage +### Usage To make use of the FileUtilsService in your Angular application, follow the steps below: -Injection: +### Injection Firstly, ensure that the service is injected into the component or any other Angular entity where you wish to use it. ```js @@ -16,7 +16,7 @@ constructor(private fileUtils: FileUtilsService) { } // private fileUtils = inject(FileUtilsService) ``` -Downloading a Blob: +### Downloading a Blob Once you have the service injected, you can use the downloadBlob method to initiate the download of blob data as a file. For instance: @@ -27,11 +27,11 @@ someMethod() { } ``` -Permissions & Considerations: +### Permissions & Considerations Ensure that you have appropriate permissions and user interactions before triggering a download. Since downloadBlob initiates a download programmatically, it's best to tie this action to direct user interactions, such as button clicks, to prevent unexpected behaviors or browser restrictions. ### DOCUMENT Token in Service -Angular, being a platform-agnostic framework, is designed to support not only browser-based applications but also other environments like server-side rendering (SSR) through Angular Universal. This design philosophy introduces challenges when accessing global browser-specific objects like window or document directly. To address this, Angular provides a DOCUMENT token that can be used to inject the document object into Angular entities like components and services. \ No newline at end of file +Angular, being a platform-agnostic framework, is designed to support not only browser-based applications but also other environments like server-side rendering (SSR) through Angular Universal. This design philosophy introduces challenges when accessing global browser-specific objects like window or document directly. To address this, Angular provides a DOCUMENT token that can be used to inject the document object into Angular entities like components and services. From 6a5f08a97b1cac62ee30ef3a82e32e8e1a2e58f3 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Thu, 12 Oct 2023 16:19:11 +0300 Subject: [PATCH 3/4] FileUtil Methods moved to Abp Window Service --- ...Utils-Service.md => Abp-Window-Service.md} | 15 ++++++---- docs/en/docs-nav.json | 4 +-- .../src/lib/services/file-utils.service.ts | 29 ------------------- .../packages/core/src/lib/services/index.ts | 3 +- .../core/src/lib/services/window.service.ts | 20 ++++++++++++- 5 files changed, 31 insertions(+), 40 deletions(-) rename docs/en/UI/Angular/{File-Utils-Service.md => Abp-Window-Service.md} (71%) delete mode 100644 npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts diff --git a/docs/en/UI/Angular/File-Utils-Service.md b/docs/en/UI/Angular/Abp-Window-Service.md similarity index 71% rename from docs/en/UI/Angular/File-Utils-Service.md rename to docs/en/UI/Angular/Abp-Window-Service.md index ea6ed4a7cf..a27a7704c6 100644 --- a/docs/en/UI/Angular/File-Utils-Service.md +++ b/docs/en/UI/Angular/Abp-Window-Service.md @@ -1,5 +1,8 @@ -# File Utils Service -FileUtilsService is an Angular service designed to provide utility methods related to file operations. The service has a `downloadBlob` function, which is used for downloading blobs as files within the context of a web application. +# Abp Window Service + + +## Download Blob as File +AbpWindowService is an Angular service designed to provide utility methods related to window operations. The service has a `downloadBlob` function, which is used for downloading blobs as files within the context of a web application. ## Usage @@ -9,11 +12,11 @@ Injection: Firstly, ensure that the service is injected into the component or any other Angular entity where you wish to use it. ```js -import { FileUtilsService } from '@abp/ng.core'; +import { AbpWindowService } from '@abp/ng.core'; -constructor(private fileUtils: FileUtilsService) { } +constructor(private abpWindowService: AbpWindowService) { } // or -// private fileUtils = inject(FileUtilsService) +// private abpWindowService = inject(AbpWindowService) ``` Downloading a Blob: @@ -23,7 +26,7 @@ Once you have the service injected, you can use the downloadBlob method to initi ```js someMethod() { const myBlob = new Blob(["Hello, World!"], { type: "text/plain" }); - this.fileUtils.downloadBlob(myBlob, "hello.txt"); + this.abpWindowService.downloadBlob(myBlob, "hello.txt"); } ``` diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index cfe52ffd78..582dcf98cc 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1155,8 +1155,8 @@ "path": "UI/Angular/Content-Security-Strategy.md" }, { - "text":"File Utils Service", - "path":"UI/Angular/File-Utils-Service.md" + "text":"Abp Window Service", + "path":"UI/Angular/Abp-Window-Service.md" } ] }, diff --git a/npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts b/npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts deleted file mode 100644 index 32a5bea88b..0000000000 --- a/npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Injectable, inject } from '@angular/core'; -import { DOCUMENT } from '@angular/common'; - -@Injectable({ - providedIn: 'root', -}) -export class FileUtilsService { - protected readonly document = inject(DOCUMENT); - get window() { - return this.document.defaultView; - } - downloadBlob(blob: Blob, fileName: string) { - const blobUrl = this.window.URL.createObjectURL(blob); - const a = this.document.createElement('a'); - a.style.display = 'none'; - a.href = blobUrl; - a.download = fileName; - this.document.body.appendChild(a); - a.dispatchEvent( - new MouseEvent('click', { - bubbles: true, - cancelable: true, - view: this.window, - }), - ); - this.window.URL.revokeObjectURL(blobUrl); - this.document.body.removeChild(a); - } -} diff --git a/npm/ng-packs/packages/core/src/lib/services/index.ts b/npm/ng-packs/packages/core/src/lib/services/index.ts index 43b7865d95..5d3e9d6d1e 100644 --- a/npm/ng-packs/packages/core/src/lib/services/index.ts +++ b/npm/ng-packs/packages/core/src/lib/services/index.ts @@ -20,5 +20,4 @@ export * from './subscription.service'; export * from './track-by.service'; export * from './local-storage.service'; export * from './window.service'; -export * from './internet-connection-service' -export * from './file-utils.service' +export * from './internet-connection-service' \ No newline at end of file diff --git a/npm/ng-packs/packages/core/src/lib/services/window.service.ts b/npm/ng-packs/packages/core/src/lib/services/window.service.ts index f4780ec10d..522bb19c94 100644 --- a/npm/ng-packs/packages/core/src/lib/services/window.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/window.service.ts @@ -3,7 +3,8 @@ import { DOCUMENT } from '@angular/common'; @Injectable({ providedIn: 'root' }) export class AbpWindowService { - protected readonly window = inject(DOCUMENT).defaultView; + protected readonly document = inject(DOCUMENT); + protected readonly window = this.document.defaultView; protected readonly navigator = this.window.navigator; copyToClipboard(text: string): Promise { @@ -17,4 +18,21 @@ export class AbpWindowService { reloadPage(): void { this.window.location.reload(); } + downloadBlob(blob: Blob, fileName: string) { + const blobUrl = this.window.URL.createObjectURL(blob); + const a = this.document.createElement('a'); + a.style.display = 'none'; + a.href = blobUrl; + a.download = fileName; + this.document.body.appendChild(a); + a.dispatchEvent( + new MouseEvent('click', { + bubbles: true, + cancelable: true, + view: this.window, + }), + ); + this.window.URL.revokeObjectURL(blobUrl); + this.document.body.removeChild(a); + } } From 69b92e5f5ed9b00c7ac7438db07b21bbaca1eedd Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Thu, 12 Oct 2023 16:22:31 +0300 Subject: [PATCH 4/4] fix typo --- docs/en/UI/Angular/Abp-Window-Service.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/en/UI/Angular/Abp-Window-Service.md b/docs/en/UI/Angular/Abp-Window-Service.md index ab0c059102..bc060f79b5 100644 --- a/docs/en/UI/Angular/Abp-Window-Service.md +++ b/docs/en/UI/Angular/Abp-Window-Service.md @@ -6,7 +6,7 @@ AbpWindowService is an Angular service designed to provide utility methods relat ### Usage -To make use of the FileUtilsService in your Angular application, follow the steps below: +To make use of the `AbpWindowService` in your Angular application, follow the steps below: ### Injection Firstly, ensure that the service is injected into the component or any other Angular entity where you wish to use it. @@ -38,3 +38,4 @@ Ensure that you have appropriate permissions and user interactions before trigge ### DOCUMENT Token in Service Angular, being a platform-agnostic framework, is designed to support not only browser-based applications but also other environments like server-side rendering (SSR) through Angular Universal. This design philosophy introduces challenges when accessing global browser-specific objects like window or document directly. To address this, Angular provides a DOCUMENT token that can be used to inject the document object into Angular entities like components and services. +