Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Save document to One Drive in Angular Document editor control | Syncfusion
description: Learn about how to Save document to One Drive in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Save document to OneDrive in Angular DOCX Editor control | Syncfusion
description: Learn how to save a document to OneDrive in the Angular Document Editor of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Save document to One Drive
control: Save document to OneDrive
documentation: ug
domainurl: ##DomainURL##
---

# Save document to One Drive
# Save document to OneDrive

To save a document to One Drive, you can follow the steps below
To save a document to OneDrive, you can follow the steps below.

**Step 1:** Create the Microsoft graph API.
**Step 1:** Create the Microsoft Graph API.

Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs.
You must create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs.

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

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

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

Expand All @@ -35,7 +35,7 @@ using Microsoft.Identity.Client;
using Helpers;
```

* 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 @@ -54,14 +54,14 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
}
```

* Create the `SaveToOneDrive()` method to save the downloaded document to One Drive bucket
* Create the `SaveToOneDrive()` method to save the downloaded document to OneDrive.

```csharp
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToOneDrive")]
//Post action for downloading the document
//Post action for uploading the document to OneDrive

public void SaveToOneDrive(IFormCollection data)
{
Expand Down Expand Up @@ -115,7 +115,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 @@ -130,14 +130,13 @@ private string GetValue(IFormCollection data, string key)
"applApplicationIdicationId": "Your_Application_ID",
"FolderName": "Your_Folder_Name_To_Access_The_Files_In_Onedrive"
}

```

> Replace **Your_Tenant_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_Onedrive** with your actual tenant ID, application ID, and folder name.
N> Replace **Your_Tenant_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_OneDrive** with your actual tenant ID, application ID, and 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 One 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 OneDrive.

```typescript

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

> The following NuGet packages are required to use the previous code example
* **Microsoft.Identity.Client**
* **Microsoft.Graph**
* **Microsoft.Extensions.Configuration**
* **Microsoft.Extensions.Configuration.FileExtensions**
* **Microsoft.Extensions.Configuration.Json**
N> The following NuGet packages are required to use the previous code example:
N> 1. **Microsoft.Identity.Client**
N> 2. **Microsoft.Graph**
N> 3. **Microsoft.Extensions.Configuration**
N> 4. **Microsoft.Extensions.Configuration.FileExtensions**
N> 5. **Microsoft.Extensions.Configuration.Json**

You can install these packages using the NuGet Package Manager in Visual Studio or Visual Studio Code.