Skip to content
Merged
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,22 +1,20 @@
---
layout: post
title: Save document to Azure Blob Storage in JavaScript (ES6) Document editor control | Syncfusion
description: Learn about how to Save document to Azure Blob Storage in JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more details.
title: Save document to Azure Blob Storage in DOCX Editor | Syncfusion
description: Learn about how to save a document to Azure Blob Storage in the Syncfusion JavaScript (ES6) Document Editor of 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 in JavaScript (ES6)

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 Document Editor sample in TypeScript
**Step 1:** Create a Simple [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) sample in TypeScript.

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) component.
Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in TypeScript. 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 @@ -32,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 @@ -47,16 +45,16 @@ 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 Download(IFormCollection data)
public void SaveToAzure(IFormCollection data)
{
if (data.Files.Count == 0)
return;
Expand Down Expand Up @@ -93,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 @@ -109,11 +107,11 @@ private string GetValue(IFormCollection data, string key)
}
```

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
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
**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/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/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in the Azure Blob Storage container.



Expand Down
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
---
layout: post
title: Save document to Box cloud file storage in JavaScript (ES6) Document editor control | Syncfusion
description: Learn about how to Save document to Box cloud file storage in JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more details.
title: Save document to Box cloud file storage in DOCX Editor | Syncfusion
description: Learn how to save a document to Box cloud file storage in the Syncfusion JavaScript (ES6) Document Editor of 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 in JavaScript (ES6)

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.

N> 1. 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 TypeScript

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Typescript. 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 TypeScript. This will give you a basic setup of the Document Editor component.



Expand All @@ -41,7 +43,7 @@ using Box.V2.Config;
using Box.V2.Models;
```

* 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 @@ -69,9 +71,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 All @@ -93,6 +95,7 @@ public void SaveToBoxCloud(IFormCollection data)

Stream stream = new MemoryStream();
file.CopyTo(stream);
stream.Position = 0;

var boxFile = await client.FilesManager.UploadAsync(fileRequest, stream);
}
Expand All @@ -111,7 +114,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 @@ -131,9 +134,9 @@ private string GetValue(IFormCollection data, string key)

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
**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/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/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in Box cloud file storage.



Expand Down
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: post
title: Save document to Dropbox cloud file storage in JavaScript (ES6) Document editor control | Syncfusion
description: Learn about how to Save document to Dropbox cloud file storage in JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more details.
title: Save document to Dropbox in DOCX Editor | Syncfusion
description: Learn how to save a document to Dropbox cloud file storage in the Syncfusion JavaScript (ES6) Document Editor of Essential JS 2 and more details.
platform: document-processing
control: Save document to Dropbox cloud file storage
documentation: ug
domainurl: ##DomainURL##
---

# Save document to Dropbox cloud file storage
# Save document to Dropbox cloud file storage in JavaScript (ES6)

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

**Step 1:** Create a Dropbox API
**Step 1:** Create a Dropbox API app

To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
To create a Dropbox API App, you should follow the official [Dropbox .NET tutorial](https://www.dropbox.com/developers/documentation/dotnet#tutorial) provided by Dropbox. The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.



**Step 2:** Create a Simple Document Editor sample in TypeScript

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Typescript. 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 TypeScript. 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 @@ -38,7 +38,7 @@ using Dropbox.Api;
using Dropbox.Api.Files;
```

* 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 All @@ -63,9 +63,9 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToDropBox")]
//Post action for downloading the document
//Post action for uploading the document to Dropbox

public void SaveToDropBox(IFormCollection data)
public async Task SaveToDropBox(IFormCollection data)
{
if (data.Files.Count == 0)
return;
Expand All @@ -79,6 +79,7 @@ public void SaveToDropBox(IFormCollection data)
{
Stream stream = new MemoryStream();
file.CopyTo(stream);
stream.Position = 0;

// Upload the document to Dropbox
var uploadedFile = await dropBox.Files.UploadAsync(
Expand All @@ -103,7 +104,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 @@ -121,9 +122,9 @@ private string GetValue(IFormCollection data, string key)

N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name.

**Step 4:** Modify the index File in the Document Editor sample
**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/documentation/api/document-editor#saveAsBlob) and sent to server-side for saving in Dropbox cloud file storage.
On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in Dropbox cloud file storage.



Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
---
layout: post
title: Save document to Google Cloud Storage in JavaScript (ES6) Document editor control | Syncfusion
description: Learn about how to Save document to Google Cloud Storage in JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more details.
title: Save document to Google Cloud Storage in DOCX Editor | Syncfusion
description: Learn how to save a document to Google Cloud Storage in the Syncfusion JavaScript (ES6) Document Editor of Essential JS 2 and more details.
platform: document-processing
control: Save document to Google Cloud Storage
documentation: ug
domainurl: ##DomainURL##
---

# Save document to Google Cloud Storage
# Save document to Google Cloud Storage in JavaScript (ES6)

To save a document to Google Cloud Storage, you can follow the steps below
To save a document to Google Cloud Storage, you can follow the steps below.



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

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) component.
Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in TypeScript. This will give you a basic setup of the Document Editor component.

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

Expand All @@ -34,7 +32,7 @@ using Google.Cloud.Storage.V1;
using Google.Apis.Auth.OAuth2;
```

* 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 object _storageClient
Expand Down Expand Up @@ -71,7 +69,7 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToGoogleCloud")]
//Post action for downloading the document
//Post action for uploading the document to Google Cloud Storage
public void SaveToGoogleCloud(IFormCollection data)
{
if (data.Files.Count == 0)
Expand Down Expand Up @@ -105,7 +103,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 @@ -120,13 +118,13 @@ private string GetValue(IFormCollection data, string key)
}
```

N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket
N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket.

N> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.

**Step 4:** Modify the index File in the Document Editor sample
**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/documentation/api/document-editor#saveAsBlob) and sent to server-side for saving in Google Cloud Storage.
On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in Google Cloud Storage.



Expand Down
Loading