From afc4356aba0786f4fd65cda845f92a1abc4cec6a Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Mon, 9 Oct 2023 14:57:56 +0300 Subject: [PATCH 1/8] Add "how to upload and download" article --- .../POST.md | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md diff --git a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md new file mode 100644 index 0000000000..bdff2faf7c --- /dev/null +++ b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md @@ -0,0 +1,112 @@ +# How to Upload and Download Files in the ABP Framework using Angular +In this article, I will describe how to upload and download files in the ABP framework. While I will use Angular as the UI template option, most of the code is compatible with all template types. In the article I just gather the some information in one write. Nothing is new. I searched How manage files in Abp in Search engine and I didn't find. So I decided write a simple article. + +### Creating App Service. + +An empty AppService that uses IRemoteStreamContent was created. What is the content of an IRemoteStream? Documentation from ABP entitled: `ABP Framework provides a special type, IRemoteStreamContent to be used to get or return streams in the application services.` + +```csharp +public class StorageAppService: AbpFileUploadDownloadDemoAppService // <- a inherited from ApplicationService. `ProjectName`+'AppService'. +{ + public Guid UploadFile(IRemoteStreamContent file) + { + Stream fs = file.GetStream(); + + //save your file with guid or implement your logic + var id = Guid.NewGuid(); + var filePath = "Insert your file path here/" + id.ToString(); + using var stream = new FileStream(filePath, FileMode.Create); + fs.CopyTo(stream); + return id; + } + public IRemoteStreamContent DownloadFile(Guid FileName) + { + //find your file with guid or implement your logic + var filePath = "Insert your file path here" ; + var fs = new FileStream(filePath, FileMode.Open, FileAccess.Read); + return new RemoteStreamContent(fs); + } +} +``` + +When you want to upload a file, app service param must be IRemoteStreamContent or RemoteStreamContent. You be able to access a file data with getStream method in AppService. After that, There s no ABP spesific code. is a c# spesific class. You can save a file system, move somewhere or serilize as base64 etc. + +when you want to download file, A method should return IRemoteStreamContent or RemoteStreamContent. +RemoteStreamContent get a required parameter. The parameter type must be Stream. (FileStream,MemoryStream, Custom etc...) + +More information please read the topic in the Documentation: https://docs.abp.io/en/abp/latest/Application-Services#working-with-streams + +### Creating Angular proxy services + +ABP create proxy files `abp generate-proxy -t ng` command. let's check the code. + +```javascript + + uploadFileByFile = (file: FormData, config?: Partial) => + this.restService.request({ + method: 'POST', + responseType: 'text', + url: '/api/app/storage/upload-file', + body: file, + }, + { apiName: this.apiName,...config }); + +``` +Service name a little bit wierd but let's focus the first parameter. the type of The file param is `FormData`. FormData is a native object in JavaSript. See the detail. https://developer.mozilla.org/en-US/docs/Web/API/FormData . + +How to use `uploadFileByFile` function. + +```javascript +const myFormData = new FormData(); +myFormData.append('file', inputFile); // file must match variable name in AppService +storageService.uploadFileByFile(file).subscribe() +``` + inputFile type is File. Most case it come from `` File is belong to Javacsript Web Api. see the detail https://developer.mozilla.org/en-US/docs/Web/API/File + + +Let's contine with "download" + +```javascript + + downloadFileByFileName = (FileName: string, config?: Partial) => + this.restService.request({ + method: 'POST', + responseType: 'blob', + url: '/api/app/storage/download-file', + params: { fileName: FileName }, + }, + { apiName: this.apiName,...config }); + +``` + +The return type of function is Blob. the Blob is another javacript object. See the detail: https://developer.mozilla.org/en-US/docs/Web/API/Blob. + +Now our code is not ABP Spesific. It is just javascript code. If you don't want to save blob, here I asked my best Ai friend ChatGPT. `Hello, chat! The programming lang is javascript. My variable type is Blob. How do I save file to client's machine?` + +Our the gifted friend gives us the code +```javascript +function saveBlobToFile(blob, fileName) { + // Create a blob URL + const blobURL = window.URL.createObjectURL(blob); + + // Create an anchor element for the download + const a = document.createElement("a"); + a.href = blobURL; + a.download = fileName || 'download.dat'; // Provide a default file name if none is provided + + // Append the anchor to the document + document.body.appendChild(a); + + // Simulate a click on the anchor to initiate the download + a.click(); + + // Clean up: remove the anchor and revoke the blob URL + document.body.removeChild(a); + window.URL.revokeObjectURL(blobURL); +} + +// Usage example +const blob = new Blob(['Hello, World!'], { type: 'text/plain' }); +saveBlobToFile(blob, 'hello.txt'); +``` + From e2e27d0e522dadda6e0669b357886cfe6b68a69b Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Mon, 9 Oct 2023 12:10:47 +0000 Subject: [PATCH 3/8] Fix the some sentence --- .../POST.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md index bdff2faf7c..c42cf8d13f 100644 --- a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md +++ b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md @@ -1,9 +1,9 @@ # How to Upload and Download Files in the ABP Framework using Angular -In this article, I will describe how to upload and download files in the ABP framework. While I will use Angular as the UI template option, most of the code is compatible with all template types. In the article I just gather the some information in one write. Nothing is new. I searched How manage files in Abp in Search engine and I didn't find. So I decided write a simple article. +In this article, I will describe how to upload and download files in the ABP framework. While I will use Angular as the UI template option, most of the code is compatible with all template types. In the article I just gather the some information in one post. Nothing is new. I searched How manage files in Abp in Search engine and I didn't find. So I decided write a simple article. ### Creating App Service. -An empty AppService that uses IRemoteStreamContent was created. What is the content of an IRemoteStream? Documentation from ABP entitled: `ABP Framework provides a special type, IRemoteStreamContent to be used to get or return streams in the application services.` +An empty AppService that uses IRemoteStreamContent was created. What is IRemoteStreamContent, ABP Documentation described: `ABP Framework provides a special type, IRemoteStreamContent to be used to get or return streams in the application services.` ```csharp public class StorageAppService: AbpFileUploadDownloadDemoAppService // <- a inherited from ApplicationService. `ProjectName`+'AppService'. @@ -52,7 +52,7 @@ ABP create proxy files `abp generate-proxy -t ng` command. let's check the code. { apiName: this.apiName,...config }); ``` -Service name a little bit wierd but let's focus the first parameter. the type of The file param is `FormData`. FormData is a native object in JavaSript. See the detail. https://developer.mozilla.org/en-US/docs/Web/API/FormData . +Function name a little bit wierd but let's focus the first parameter. The type of file param is `FormData`. FormData is a native object in JavaSript Web API. See the detail. https://developer.mozilla.org/en-US/docs/Web/API/FormData . How to use `uploadFileByFile` function. From 8e1f5b171fe327e27e60db89bfe859f00e1d32a0 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Mon, 9 Oct 2023 12:16:17 +0000 Subject: [PATCH 4/8] Tiny fix --- .../POST.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md index c42cf8d13f..b16f156db6 100644 --- a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md +++ b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md @@ -3,7 +3,7 @@ In this article, I will describe how to upload and download files in the ABP fra ### Creating App Service. -An empty AppService that uses IRemoteStreamContent was created. What is IRemoteStreamContent, ABP Documentation described: `ABP Framework provides a special type, IRemoteStreamContent to be used to get or return streams in the application services.` +An empty AppService that uses IRemoteStreamContent was created. What is IRemoteStreamContent, ABP Documentation described: `ABP Framework provides a special type, IRemoteStreamContent to be used to get or return streams in the application services.` ```csharp public class StorageAppService: AbpFileUploadDownloadDemoAppService // <- a inherited from ApplicationService. `ProjectName`+'AppService'. From c03bb2836d8abadaaccaaf7cc07ff5e75e0f07a2 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Mon, 9 Oct 2023 15:34:29 +0300 Subject: [PATCH 5/8] Wrap `IRemoteStreamContent` into code block --- .../POST.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md index b16f156db6..39ba2c347d 100644 --- a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md +++ b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md @@ -3,7 +3,9 @@ In this article, I will describe how to upload and download files in the ABP fra ### Creating App Service. -An empty AppService that uses IRemoteStreamContent was created. What is IRemoteStreamContent, ABP Documentation described: `ABP Framework provides a special type, IRemoteStreamContent to be used to get or return streams in the application services.` +An empty AppService that uses `IRemoteStreamContent` was created. What is IRemoteStreamContent, ABP Documentation described: + +> ABP Framework provides a special type, IRemoteStreamContent to be used to get or return streams in the application services. ```csharp public class StorageAppService: AbpFileUploadDownloadDemoAppService // <- a inherited from ApplicationService. `ProjectName`+'AppService'. From bdfb436d178548198d2c853549e6d36ed4e02967 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 10 Oct 2023 09:03:26 +0300 Subject: [PATCH 6/8] Update docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md Co-authored-by: Qingxiao Ren <1829209+rqx110@users.noreply.github.com> --- .../POST.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md index 39ba2c347d..1987bffd91 100644 --- a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md +++ b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md @@ -61,7 +61,7 @@ How to use `uploadFileByFile` function. ```javascript const myFormData = new FormData(); myFormData.append('file', inputFile); // file must match variable name in AppService -storageService.uploadFileByFile(file).subscribe() +storageService.uploadFileByFile(myFormData).subscribe() ``` inputFile type is File. Most case it come from `` File is belong to Javacsript Web Api. see the detail https://developer.mozilla.org/en-US/docs/Web/API/File From 56195373269cd114d6992e10642e46f3e98301d3 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 10 Oct 2023 09:03:33 +0300 Subject: [PATCH 7/8] Update docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md Co-authored-by: Qingxiao Ren <1829209+rqx110@users.noreply.github.com> --- .../POST.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md index 1987bffd91..0b4087a3d4 100644 --- a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md +++ b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md @@ -66,7 +66,7 @@ storageService.uploadFileByFile(myFormData).subscribe() inputFile type is File. Most case it come from `` File is belong to Javacsript Web Api. see the detail https://developer.mozilla.org/en-US/docs/Web/API/File -Let's contine with "download" +Let's continue with "download" ```javascript From d8268ed08d9c16bb61d0e325be95273bf5bdd9a2 Mon Sep 17 00:00:00 2001 From: Hamza Albreem <94292623+braim23@users.noreply.github.com> Date: Tue, 10 Oct 2023 09:43:20 +0300 Subject: [PATCH 8/8] Update POST.md --- .../POST.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md index 0b4087a3d4..b6e2cc581a 100644 --- a/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md +++ b/docs/en/Community-Articles/2023-10-09-How-to-Upload-and-Download-Files-in-the-ABP-Framework-using-Angular/POST.md @@ -1,9 +1,9 @@ # How to Upload and Download Files in the ABP Framework using Angular -In this article, I will describe how to upload and download files in the ABP framework. While I will use Angular as the UI template option, most of the code is compatible with all template types. In the article I just gather the some information in one post. Nothing is new. I searched How manage files in Abp in Search engine and I didn't find. So I decided write a simple article. +In this article, I will describe how to upload and download files with the ABP framework using Angular as the UI template, most of the code is compatible with all template types. In this article, I just gather some information in one post. Nothing is new. I Googled how to manage files in ABP and I didn't find anything. So I decided write a simple article as an answer to this question. ### Creating App Service. -An empty AppService that uses `IRemoteStreamContent` was created. What is IRemoteStreamContent, ABP Documentation described: +An empty AppService that uses `IRemoteStreamContent` was created. ABP describes the IRemoteStreamContent as: > ABP Framework provides a special type, IRemoteStreamContent to be used to get or return streams in the application services. @@ -31,16 +31,16 @@ public class StorageAppService: AbpFileUploadDownloadDemoAppService // <- a inhe } ``` -When you want to upload a file, app service param must be IRemoteStreamContent or RemoteStreamContent. You be able to access a file data with getStream method in AppService. After that, There s no ABP spesific code. is a c# spesific class. You can save a file system, move somewhere or serilize as base64 etc. +When you want to upload a file, app service param must be IRemoteStreamContent or RemoteStreamContent. You should be able to access a file data with the getStream method in the AppService. After that, There is no ABP spesific code. It's a c# spesific class. You can save a file system, move somewhere or serilize as base64 etc. -when you want to download file, A method should return IRemoteStreamContent or RemoteStreamContent. -RemoteStreamContent get a required parameter. The parameter type must be Stream. (FileStream,MemoryStream, Custom etc...) +when you want to download a file, A method should return IRemoteStreamContent or RemoteStreamContent. +RemoteStreamContent gets a required parameter. The parameter type must be Stream. (FileStream, MemoryStream, Custom etc...) -More information please read the topic in the Documentation: https://docs.abp.io/en/abp/latest/Application-Services#working-with-streams +For more information please read the topic in the Documentation: https://docs.abp.io/en/abp/latest/Application-Services#working-with-streams ### Creating Angular proxy services -ABP create proxy files `abp generate-proxy -t ng` command. let's check the code. +ABP creates proxy files with the `abp generate-proxy -t ng` command. let's check the code. ```javascript @@ -54,16 +54,16 @@ ABP create proxy files `abp generate-proxy -t ng` command. let's check the code. { apiName: this.apiName,...config }); ``` -Function name a little bit wierd but let's focus the first parameter. The type of file param is `FormData`. FormData is a native object in JavaSript Web API. See the detail. https://developer.mozilla.org/en-US/docs/Web/API/FormData . +The function name is a little bit weird but let's focus the first parameter. The type of file param is `FormData`. FormData is a native object in JavaSript Web API. See the details. https://developer.mozilla.org/en-US/docs/Web/API/FormData . -How to use `uploadFileByFile` function. +How to use the `uploadFileByFile` function. ```javascript const myFormData = new FormData(); myFormData.append('file', inputFile); // file must match variable name in AppService storageService.uploadFileByFile(myFormData).subscribe() ``` - inputFile type is File. Most case it come from `` File is belong to Javacsript Web Api. see the detail https://developer.mozilla.org/en-US/docs/Web/API/File +The inputFile type is File. In most cases it comes from the ``, File belongs to the Javacsript Web Api. see the details https://developer.mozilla.org/en-US/docs/Web/API/File Let's continue with "download" @@ -81,9 +81,9 @@ Let's continue with "download" ``` -The return type of function is Blob. the Blob is another javacript object. See the detail: https://developer.mozilla.org/en-US/docs/Web/API/Blob. +The return type of function is Blob. Blob is another javacript object. See the details: https://developer.mozilla.org/en-US/docs/Web/API/Blob. -Now our code is not ABP Spesific. It is just javascript code. If you don't want to save blob, here I asked my best Ai friend ChatGPT. `Hello, chat! The programming lang is javascript. My variable type is Blob. How do I save file to client's machine?` +Now our code is not ABP Spesific. It is just javascript code. If you don't want to save the blob, here I asked my best AI friend ChatGPT. `Hello, chat! The programming lang is javascript. My variable type is Blob. How do I save file to client's machine?` Our the gifted friend gives us the code ```javascript