Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
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
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
---
layout: post
title: Save document to AWS S3 in Angular Document editor control | Syncfusion
description: Learn about how to Save document to AWS S3 in Angular Document editor of Syncfusion Essential JS 2 and more details.
title: Save document to AWS S3 in Angular DOCX Editor control | Syncfusion
description: Learn about how to save a document to AWS S3 in Angular Document Editor of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Save document to AWS S3
documentation: ug
domainurl: ##DomainURL##
---

# Save document to AWS S3
# Save document to AWS S3 in Angular Document Editor

To save a document to AWS S3, you can follow the steps below
To save a document to AWS S3, follow the steps below.

**Step 1:** Create a Simple [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) sample in Angular
**Step 1:** Create a simple [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) sample in Angular.

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Angular. This will give you a basic setup of the Document Editor component.

**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project

* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../web-services-overview) for instructions on how to create a web service project.
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../web-services-overview) for instructions on how to create a web service project.

* Open the `DocumentEditorController.cs` file in your web service project.
2. Open the `DocumentEditorController.cs` file in your web service project.

* Import the required namespaces at the top of the file:
3. Import the required namespaces at the top of the file:

```csharp
using System.IO;
Expand All @@ -31,7 +31,7 @@ using Amazon.S3;
using Amazon.S3.Model;
```

* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
4. Add the following private fields and constructor parameters to the `DocumentEditorController` class. In the constructor, assign the values from the configuration to the corresponding fields.

```csharp
private IConfiguration _configuration;
Expand All @@ -50,15 +50,15 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
}
```

* Create the `SaveToS3()` method to save the document to AWS S3 bucket
5. Create the `SaveToS3()` method to save the document to AWS S3 bucket.

```csharp

[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToS3")]
//Post action for save the document to AWS S3
//Post action to save the document to AWS S3

public void SaveToS3(IFormCollection data)
{
Expand Down Expand Up @@ -97,7 +97,7 @@ private string GetValue(IFormCollection data, string key)
}
```

* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
6. Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration.

```json
{
Expand All @@ -114,11 +114,11 @@ private string GetValue(IFormCollection data, string key)
}
```

> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name
N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key, and bucket name.

**Step 3:** Modify the index File in the Document Editor sample
**Step 3:** Modify the index file in the Document Editor sample

In the client-side, to export the document into blob the document using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#saveasblob) and sent to server-side for saving in AWS S3 Bucket.
On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) and send it to the server side for saving in an AWS S3 Bucket.

```typescript

Expand Down Expand Up @@ -166,4 +166,4 @@ export class AppComponent implements OnInit {
}
```

> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Save document to Azure Blob Storage in Angular Document editor control | Syncfusion
description: Learn about how to Save document to Azure Blob Storage in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Save Document to Azure Blob Storage in Angular DOCX Editor Syncfusion
description: Learn about how to Save document to Azure Blob Storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Save document to Azure Blob Storage
documentation: ug
domainurl: ##DomainURL##
---

# Save document to Azure Blob Storage
# Save document to Azure Blob Storage using Angular Document Editor

To save a document to Azure Blob Storage, you can follow the steps below
To save a document to Azure Blob Storage, you can follow the steps below.

**Step 1:** Create a Simple [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) sample in Angular
**Step 1:** Create a Simple [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) sample in Angular.

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in angular. This will give you a basic setup of the Document Editor component.
Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Angular. This will give you a basic setup of the Document Editor component.

**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project

Expand All @@ -30,7 +30,7 @@ using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Specialized;
```

* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
* Add the following private fields and constructor parameters to the `DocumentEditorController` class. In the constructor, assign the values from the configuration to the corresponding fields.

```csharp
private readonly string _storageConnectionString;
Expand All @@ -45,14 +45,14 @@ public DocumentEditorController(IConfiguration configuration, ILogger<DocumentEd
}
```

* Create then 'SaveToAzure' method to save the downloaded documents to Azure Blob Storage container
* Create the `SaveToAzure` method to save the downloaded documents to the Azure Blob Storage container.

```csharp

[HttpPost("SaveToAzure")]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
[Route("[controller]/SaveToAzure")]
//Post action for downloading the documents
//Post action for uploading documents to Azure Blob Storage

public void SaveToAzure(IFormCollection data)
{
Expand Down Expand Up @@ -91,7 +91,7 @@ private string GetValue(IFormCollection data, string key)

```

* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
* Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration.

```json
{
Expand All @@ -107,11 +107,11 @@ private string GetValue(IFormCollection data, string key)
}
```

> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name
N> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name.

**Step 3:** Modify the index File in the Document Editor sample

In the client-side, to export the document into blob the document using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#saveasblob) and sent to server-side for saving in Azure Blob Storage container.
On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) and send it to the server side for saving in the Azure Blob Storage container.

```typescript

Expand Down Expand Up @@ -149,7 +149,7 @@ export class AppComponent implements OnInit {
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand All @@ -159,4 +159,4 @@ export class AppComponent implements OnInit {
}
```

> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example.
N> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example.
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Save document to Box cloud file storage in Angular Document editor control | Syncfusion
description: Learn about how to Save document to Box cloud file storage in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Save to Box cloud file Storage in Angular DOCX Editor | Syncfusion
description: Learn about how to Save document to Box cloud file storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Save document to Box cloud file storage
documentation: ug
domainurl: ##DomainURL##
---

# Save document to Box cloud file storage
# Save document to Box cloud file storage using Angular Document Editor

To save a document to Box cloud file storage, you can follow the steps below
To save a document to Box cloud file storage, you can follow the steps below.

**Step 1:** Set up a Box developer account and create a Box application

To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose.
To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose.

**Step 2:** Create a Simple Document Editor sample in angular
**Step 2:** Create a Simple Document Editor sample in Angular

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in angular. This will give you a basic setup of the Document Editor component.
Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Angular. This will give you a basic setup of the Document Editor component.

**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project

Expand All @@ -29,13 +29,15 @@ Follow the instructions provided in this [link](../getting-started) to create a
* Import the required namespaces at the top of the file:

```csharp
// Imports required for Box cloud file storage access
using Box.V2;
using Box.V2.Auth;
using Box.V2.Config;
using Box.V2.Models;
using System.IO;
```

* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
* Add the following private fields and constructor parameters to the `DocumentEditorController` class. In the constructor, assign the values from the configuration to the corresponding fields.

```csharp
private IConfiguration _configuration;
Expand Down Expand Up @@ -63,9 +65,9 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToBoxCloud")]
//Post action for downloading the document
//Post action for uploading the document to Box

public void SaveToBoxCloud(IFormCollection data)
public async Task SaveToBoxCloud(IFormCollection data)
{
if (data.Files.Count == 0)
return;
Expand Down Expand Up @@ -105,7 +107,7 @@ private string GetValue(IFormCollection data, string key)
}
```

* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
* Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration.

```json
{
Expand All @@ -123,11 +125,11 @@ private string GetValue(IFormCollection data, string key)
}
```

> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret.
N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret.

**Step 4:** Modify the index File in the Document Editor sample

In the client-side, to export the document into blob the document using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#saveasblob) and sent to server-side for saving in Box cloud file storage.
On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) and send it to the server side for saving in Box cloud file storage.

```typescript

Expand Down Expand Up @@ -165,7 +167,7 @@ export class AppComponent implements OnInit {
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand All @@ -175,4 +177,4 @@ export class AppComponent implements OnInit {
}
```

> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example.
N> The **Box.V2.Core** NuGet package (version 5.x or later) must be installed in your application to use the previous code example.
Loading