Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add FileUtilsService to provide utility methods for file operations #17860

Merged
merged 5 commits into from
Oct 17, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions docs/en/UI/Angular/File-Utils-Service.md
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 4 additions & 0 deletions docs/en/docs-nav.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
]
},
Expand Down
29 changes: 29 additions & 0 deletions npm/ng-packs/packages/core/src/lib/services/file-utils.service.ts
Original file line number Diff line number Diff line change
@@ -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);
masum-ulu marked this conversation as resolved.
Show resolved Hide resolved
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);
}
}
1 change: 1 addition & 0 deletions npm/ng-packs/packages/core/src/lib/services/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Loading