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
Expand Up @@ -8,17 +8,17 @@ documentation: ug
domainurl: ##DomainURL##
---

# Save document to AWS S3
# Save Documents to AWS S3 in Vue DOCX 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 [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) sample in Vue
**Step 1:** Create a simple [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) sample in Vue.

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

**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project
**Step 2:** Modify the `DocumentEditorController.cs` file in the 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.
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../web-services) for instructions on how to create a web service project.

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

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

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
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 @@ -58,7 +58,7 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
[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)
}
```

6. 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)
}
```

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
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/vue/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/vue/documentation/api/document-editor#saveasblob) and send it to the server side for saving in an AWS S3 Bucket.

```typescript
<template>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Save document to Azure Blob Storage in Vue Document editor control | Syncfusion
title: Save Documents to Azure Blob Storage in Vue DOCX Editor | Syncfusion
description: Learn about how to Save document to Azure Blob Storage in Vue 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 Documents to Azure Blob Storage in Vue DOCX 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 [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) sample in Vue

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in vue. 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 Vue. 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)
}
```

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

In the client-side, to export the document into blob the document using [`saveAsBlob`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in the Azure Blob Storage container.

```typescript
<template>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
---
layout: post
title: Save document to Box cloud file storage in Vue Document editor control | Syncfusion
title: Save to Box Cloud File Storage in Vue DOCX Editor | Syncfusion
description: Learn about how to Save document to Box cloud file storage in Vue 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 Documents to Box Cloud File Storage in Vue DOCX 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
**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> Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose. After creating the Box application, grant it access to the specific folder where documents will be saved. In the Box Developer Console, navigate to your application's configuration and add the target folder under the authorized folders. This folder authorization is required for App Tokens/JWT authentication to access files.

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

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in vue. 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 Vue. 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 @@ -35,7 +37,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 @@ -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 All @@ -89,7 +91,7 @@ public void SaveToBoxCloud(IFormCollection data)
file.CopyTo(stream);

var boxFile = await client.FilesManager.UploadAsync(fileRequest, stream);
}
}

private string GetValue(IFormCollection data, string key)
{
Expand All @@ -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 @@ -127,7 +129,7 @@ N> replace **Your_Box_Storage_Access_Token** with your actual box access token,

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

```typescript
<template>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Save document to Dropbox cloud file storage in Vue Document editor control | Syncfusion
title: Save to Dropbox Cloud Storage in Vue DOCX Editor | Syncfusion
description: Learn about how to Save document to Dropbox cloud file storage in Vue Document editor control of Syncfusion 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 Documents to Dropbox Cloud Storage in Vue DOCX Editor

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 Vue

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in vue. 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 Vue. 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 @@ -34,7 +34,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 @@ -59,9 +59,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 @@ -73,7 +73,9 @@ public void SaveToDropBox(IFormCollection data)

using (var dropBox = new DropboxClient(_accessToken))
{
Stream stream = new MemoryStream();
Stream stream = new MemoryStream();
try
{
file.CopyTo(stream);

// Upload the document to Dropbox
Expand All @@ -82,6 +84,16 @@ public void SaveToDropBox(IFormCollection data)
WriteMode.Overwrite.Instance,
body: stream
);
}
catch (Exception ex)
{
// Log or handle the upload failure (e.g., invalid token, folder not found, permission denied)
throw;
}
finally
{
stream.Dispose();
}
}
}

Expand Down Expand Up @@ -115,11 +127,11 @@ 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.
N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name. The **Dropbox.Api** NuGet package (version 7.x or later) must be installed in your application to use the previous code example.

**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/vue/documentation/api/document-editor#saveasblob) and sent to server-side for saving in Dropbox cloud file storage.
On the client-side, to export the document into blob the document using [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#saveasblob) and sent to server-side for saving in Dropbox cloud file storage.

```typescript
<template>
Expand Down