From 7be69f4d5e836ae08b4a7f9ed57ea431b380489d Mon Sep 17 00:00:00 2001 From: Seenivasaperumal Nachiyappan Date: Tue, 28 Jul 2026 20:24:21 +0530 Subject: [PATCH 1/5] 1043288: updated the md file for the Angular platform --- .../angular/saving-documents/aws-s3-bucket.md | 32 +++++----- .../saving-documents/azure-blob-storage.md | 26 ++++---- .../box-cloud-file-storage.md | 30 ++++----- .../dropbox-cloud-file-storage.md | 62 ++++++++++++------- .../saving-documents/google-cloud-storage.md | 52 ++++++++++------ .../angular/saving-documents/google-drive.md | 40 ++++++------ 6 files changed, 138 insertions(+), 104 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/aws-s3-bucket.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/aws-s3-bucket.md index e2da0ce202..a79217490c 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/aws-s3-bucket.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/aws-s3-bucket.md @@ -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; @@ -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; @@ -50,7 +50,7 @@ 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 @@ -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) { @@ -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 { @@ -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 @@ -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. \ No newline at end of file +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/azure-blob-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/azure-blob-storage.md index 4858f95b66..589a062549 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/azure-blob-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/azure-blob-storage.md @@ -1,7 +1,7 @@ --- 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 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. platform: document-processing control: Save document to Azure Blob Storage documentation: ug @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Save document to Azure Blob Storage -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 @@ -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; @@ -45,14 +45,14 @@ public DocumentEditorController(IConfiguration configuration, ILogger 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 @@ -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'); } } }; @@ -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. \ No newline at end of file +N> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/box-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/box-cloud-file-storage.md index fc383bf4d1..c814b33a65 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/box-cloud-file-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/box-cloud-file-storage.md @@ -1,7 +1,7 @@ --- 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 document to Box cloud file storage in Angular DOCX 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. platform: document-processing control: Save document to Box cloud file storage documentation: ug @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Save document to Box cloud file storage -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 @@ -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; @@ -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; @@ -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 { @@ -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 @@ -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'); } } }; @@ -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. \ No newline at end of file +N> The **Box.V2.Core** NuGet package (version 5.x or later) must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md index 1e7dc524b7..bdbbda520c 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md @@ -1,7 +1,7 @@ --- layout: post -title: Save document to Dropbox cloud file storage in Angular Document editor control | Syncfusion -description: Learn about how to Save document to Dropbox cloud file storage in Angular Document editor control of Syncfusion Essential JS 2 and more details. +title: Save document to Dropbox cloud file storage in Angular DOCX Editor control | Syncfusion +description: Learn about how to Save a document to Dropbox cloud file storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Save document to Dropbox cloud file storage documentation: ug @@ -10,15 +10,18 @@ domainurl: ##DomainURL## # Save document to Dropbox cloud file storage -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 angular +N> 1. In the Dropbox App Console, configure your app's permissions/scopes to grant folder access (e.g., `files.content.write`) required for uploading files. Without these scopes, the upload will fail with a permission error. +N> 2. Generate the **Access Token** from the App Console after creating your app. For production use, use the OAuth 2.0 authorization flow to obtain tokens dynamically. Refer to the [Dropbox .NET tutorial](https://www.dropbox.com/developers/documentation/dotnet#tutorial) for details. -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:** 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. **Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project @@ -34,7 +37,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; @@ -59,9 +62,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; @@ -74,16 +77,27 @@ public void SaveToDropBox(IFormCollection data) using (var dropBox = new DropboxClient(_accessToken)) { Stream stream = new MemoryStream(); - file.CopyTo(stream); - - // Upload the document to Dropbox - var uploadedFile = await dropBox.Files.UploadAsync( - _folderName + "/" + fileName, - WriteMode.Overwrite.Instance, - body: stream - ); + try{ + file.CopyTo(stream); + + // Upload the document to Dropbox + var uploadedFile = await dropBox.Files.UploadAsync( + _folderName + "/" + fileName, + 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(); + } + } } -} private string GetValue(IFormCollection data, string key) { @@ -99,7 +113,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 { @@ -115,11 +129,11 @@ private string GetValue(IFormCollection data, string key) } ``` -> 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. **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 Dropbox 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 Dropbox cloud file storage. ```typescript @@ -157,7 +171,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'); } } }; @@ -167,4 +181,4 @@ export class AppComponent implements OnInit { } ``` -> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file +N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/google-cloud-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/google-cloud-storage.md index 3cf5a0a259..ea06e89e82 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/google-cloud-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/google-cloud-storage.md @@ -1,7 +1,7 @@ --- layout: post -title: Save document to Google Cloud Storage in Angular Document editor control | Syncfusion -description: Learn about how to Save document to Google Cloud Storage in Angular Document editor control of Syncfusion Essential JS 2 and more details. +title: Save document to Google Cloud Storage in Angular DOCX Editor control | Syncfusion +description: Learn about how to Save document to Google Cloud Storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Save document to Google Cloud Storage documentation: ug @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Save document to Google Cloud Storage -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 [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:** Create the `DocumentEditorController.cs` File in the Web Service Project @@ -30,7 +30,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 @@ -67,7 +67,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) @@ -80,11 +80,23 @@ public void SaveToGoogleCloud(IFormCollection data) string bucketName = _bucketName; Stream stream = new MemoryStream(); - file.CopyTo(stream); - - // Upload the document to Google Cloud Storage - _storageClient.UploadObject(bucketName, result + "_downloaded.docx", null, stream); - + try + { + file.CopyTo(stream); + stream.Position = 0; + + // Upload the document to Google Cloud Storage + _storageClient.UploadObject(bucketName, result + "_downloaded.docx", null, stream); + } + catch (Exception ex) + { + // Log or handle the upload failure (e.g., invalid credentials, bucket not found, permission denied) + throw; + } + finally + { + stream.Dispose(); + } } private string GetValue(IFormCollection data, string key) @@ -101,7 +113,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 { @@ -116,13 +128,13 @@ private string GetValue(IFormCollection data, string key) } ``` -> 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. -> 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. +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 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 Google Cloud 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 Google Cloud Storage. ```typescript @@ -160,14 +172,16 @@ 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'); } } }; req.send(formData); - }); + }).catch((error: any) => { + console.error('Error saving document:', error); + }); } } ``` -> The **Google.Cloud.Storage.V1** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file +N> The **Google.Cloud.Storage.V1** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/google-drive.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/google-drive.md index 6f6fdb98cf..c8116152d8 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/google-drive.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/google-drive.md @@ -1,24 +1,28 @@ --- layout: post -title: Save document to Google Drive in Angular Document editor control | Syncfusion -description: Learn about how to Save document to Google Drive in Angular Document editor control of Syncfusion Essential JS 2 and more details. +title: Save document to Google Drive in Angular DOCX Editor control | Syncfusion +description: Learn about how to Save document to Google Drive in Angular Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Save document to Google Drive documentation: ug domainurl: ##DomainURL## --- -# Save document to Google Drive +# Save document to Google Drive using React Document Editor -To save a document to Google Drive, you can follow the steps below +To save a document to Google Drive, you can follow the steps below. **Step 1:** Set up Google Drive API You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk). -**Step 2:** Create a Simple [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) sample in angular +* Configure the OAuth consent screen and add the authorized redirect URIs and scopes. For more information, refer to the official [link](https://developers.google.com/drive/api/guides/enable-sdk). -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. +* Download the OAuth 2.0 Client IDs credentials JSON file from the Google Cloud Console and save it locally. Save the path to this file for use in the `appsettings.json` configuration. + +**Step 2:** 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 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project @@ -34,7 +38,7 @@ using Google.Apis.Drive.v3; using Google.Apis.Util.Store; ``` -* 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; @@ -54,14 +58,14 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC } ``` -* Create the `SaveToGoogleDrive()` method to save the downloaded document to Google Drive bucket +* Create the `SaveToGoogleDrive()` method to save the downloaded document to Google Drive. ```csharp [AcceptVerbs("Post")] [HttpPost] [EnableCors("AllowAllOrigins")] [Route("SaveToGoogleDrive")] -//Post action for downloading the document +//Post action for uploading the document to Google Drive public void SaveToGoogleDrive(IFormCollection data) { @@ -82,7 +86,7 @@ public void SaveToGoogleDrive(IFormCollection data) GoogleClientSecrets.Load(memStream).Secrets, Scopes, "user", - CancellationToken.None, + CancellationToken.None, new FileDataStore(credPath, true)); } @@ -122,7 +126,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 { @@ -139,15 +143,17 @@ private string GetValue(IFormCollection data, string key) } ``` -> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file. +N> 1. Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google Drive folder ID, your name for your application, and the path for the JSON file. -> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`. +N> 2. The **FolderId** is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`. -> You must use a unique `Client_ID` from json file to interface your application with the Google Drive API in order to save document directly to Google Drive. This Client_ID will serve as the authentication key, allowing you to save files securely. +N> 3. You must use a unique `Client_ID` from json file to interface your application with the Google Drive API in order to save document directly to Google Drive. This Client_ID will serve as the authentication key, allowing you to save files securely. + +N> 4. The **Google.Apis.Drive.v3** (v1.68.0.XXXX or later) NuGet package 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/angular/documentation/api/document-editor/#saveasblob) and sent to server-side for saving in Google Drive. +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 Google Drive. ```typescript @@ -185,7 +191,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'); } } }; @@ -194,5 +200,3 @@ export class AppComponent implements OnInit { } } ``` - -> The **Google.Apis.Drive.v3** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file From f62891d2e1d069caf678f4f2fef9aa9a3b5707f5 Mon Sep 17 00:00:00 2001 From: Seenivasaperumal Nachiyappan Date: Wed, 29 Jul 2026 12:31:32 +0530 Subject: [PATCH 2/5] 1043288: Empty commit From 3d661844213381b1c6d3232e9200abf15a4ca276 Mon Sep 17 00:00:00 2001 From: Seenivasaperumal Nachiyappan Date: Wed, 29 Jul 2026 14:36:21 +0530 Subject: [PATCH 3/5] 1043288: updating the changes to resolve the CI issue --- .../angular/saving-documents/aws-s3-bucket.md | 2 +- .../angular/saving-documents/azure-blob-storage.md | 6 +++--- .../angular/saving-documents/box-cloud-file-storage.md | 6 +++--- .../angular/saving-documents/dropbox-cloud-file-storage.md | 6 +++--- .../angular/saving-documents/google-cloud-storage.md | 6 +++--- .../Word-Processor/angular/saving-documents/google-drive.md | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/aws-s3-bucket.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/aws-s3-bucket.md index a79217490c..a8def8a51f 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/aws-s3-bucket.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/aws-s3-bucket.md @@ -118,7 +118,7 @@ N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Step 3:** Modify the index file in the Document Editor sample -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. +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 diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/azure-blob-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/azure-blob-storage.md index 589a062549..8d30134160 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/azure-blob-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/azure-blob-storage.md @@ -1,6 +1,6 @@ --- layout: post -title: Save document to Azure Blob Storage in Angular DOCX Editor control | Syncfusion +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 @@ -8,7 +8,7 @@ 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. @@ -111,7 +111,7 @@ N> Replace **Your Connection string from Azure** with the actual connection stri **Step 3:** Modify the index File in the Document Editor sample -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. +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 diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/box-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/box-cloud-file-storage.md index c814b33a65..1b276dd664 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/box-cloud-file-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/box-cloud-file-storage.md @@ -1,6 +1,6 @@ --- layout: post -title: Save document to Box cloud file storage in Angular DOCX Editor control | Syncfusion +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 @@ -8,7 +8,7 @@ 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. @@ -129,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 -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. +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 diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md index bdbbda520c..ab2acc1895 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md @@ -1,6 +1,6 @@ --- layout: post -title: Save document to Dropbox cloud file storage in Angular DOCX Editor control | Syncfusion +title: Save Document to Dropbox Storage in Angular DOCX Editor | Syncfusion description: Learn about how to Save a document to Dropbox cloud file storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Save document to Dropbox cloud file storage @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Save document to Dropbox cloud file storage +# Save document to Dropbox cloud file storage using Angular Document Editor To save a document to Dropbox cloud file storage, you can follow the steps below. @@ -133,7 +133,7 @@ N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token a **Step 4:** Modify the index File in the Document Editor sample -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 Dropbox 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 Dropbox cloud file storage. ```typescript diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/google-cloud-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/google-cloud-storage.md index ea06e89e82..16159f230a 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/google-cloud-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/google-cloud-storage.md @@ -1,6 +1,6 @@ --- layout: post -title: Save document to Google Cloud Storage in Angular DOCX Editor control | Syncfusion +title: Save to Google Cloud Storage in Angular DOCX Editor | Syncfusion description: Learn about how to Save document to Google Cloud Storage in Angular Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Save document to Google Cloud Storage @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Save document to Google Cloud Storage +# Save document to Google Cloud Storage using Angular Document Editor To save a document to Google Cloud Storage, you can follow the steps below. @@ -134,7 +134,7 @@ N> Replace **path/to/service-account-key.json** with the actual file path to you **Step 3:** Modify the index File in the Document Editor sample -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 Google Cloud 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 Google Cloud Storage. ```typescript diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/google-drive.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/google-drive.md index c8116152d8..7d2308578f 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/google-drive.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/google-drive.md @@ -1,6 +1,6 @@ --- layout: post -title: Save document to Google Drive in Angular DOCX Editor control | Syncfusion +title: Save Documents to Google Drive in Angular DOCX Editor | Syncfusion description: Learn about how to Save document to Google Drive in Angular Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Save document to Google Drive @@ -153,7 +153,7 @@ N> 4. The **Google.Apis.Drive.v3** (v1.68.0.XXXX or later) NuGet package must be **Step 4:** Modify the index File in the Document Editor sample -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 Google Drive. +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 Google Drive. ```typescript From 26c50997edaa28ec55dc07c6406f25f431eaa88c Mon Sep 17 00:00:00 2001 From: Seenivasaperumal Nachiyappan Date: Wed, 29 Jul 2026 14:53:34 +0530 Subject: [PATCH 4/5] 1043288: updating the code changes for IC success --- .../angular/saving-documents/dropbox-cloud-file-storage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md index ab2acc1895..5ef2eb8874 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/dropbox-cloud-file-storage.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Save document to Dropbox cloud file storage using Angular Document Editor +# Save document to Dropbox cloud storage using Angular Document Editor To save a document to Dropbox cloud file storage, you can follow the steps below. From 43e99104c71d0235ed23b1a241d3eeae8f798d55 Mon Sep 17 00:00:00 2001 From: Seenivasaperumal Nachiyappan Date: Wed, 29 Jul 2026 14:54:16 +0530 Subject: [PATCH 5/5] 1043288: empty commit for CI trigger