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..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 @@ -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..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,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 @@ -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..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,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 @@ -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..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 @@ -1,24 +1,27 @@ --- 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 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 documentation: ug domainurl: ##DomainURL## --- -# Save document to Dropbox cloud file storage +# 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 +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..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,20 +1,20 @@ --- 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 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 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 +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..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,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 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 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