Skip to content

Commit 878e19e

Browse files
sathiyaseelanksf3503sathiyaseelanksf3503
committed
987332: Updated save and trouble shooting
1 parent 13f8693 commit 878e19e

File tree

7 files changed

+167
-170
lines changed

7 files changed

+167
-170
lines changed

‎Document-Processing/PDF/PDF-Viewer/asp-net-mvc/save-pdf-file/to-amazon-s3.md‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
---
22
layout: post
3-
title: AWS S3 in ASP.NET MVC Syncfusion PDF Viewer Component
4-
description: Learn here all about how to Save PDF files from AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
3+
title: Save PDF files to AWS S3 in ASP.NET MVC PDF Viewer | Syncfusion
4+
description: Learn how to save PDF files to AWS S3 using the Syncfusion ASP.NET MVC PDF Viewer component in standalone and server-backed configurations.
55
platform: document-processing
66
control: PDF Viewer
77
publishingplatform: ASP.NET MVC
88
documentation: ug
99
---
1010

11-
# Save PDF file to AWS S3
11+
# Save PDF files to AWS S3
1212

13-
PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3.
13+
The ASP.NET MVC PDF Viewer component supports saving PDF files to AWS S3 using either the standalone or server-backed configuration. The following steps demonstrate both approaches.
1414

15-
## Using Standalone PDF Viewer
15+
## Using the standalone PDF Viewer
1616

17-
To save a PDF file to AWS S3 bucket, you can follow the steps below
17+
To save a PDF file to AWS S3, follow these steps:
1818

19-
**Step 1:** Create AWS S3 account
19+
**Step 1:** Create an AWS S3 account
2020

2121
Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials.
2222

23-
**Step 2:** Create PDF Viewer Sample in ASP.NET MVC
23+
**Step 2:** Create a PDF Viewer sample in ASP.NET MVC
2424

25-
Follow instructions provided in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started/) to create a simple PDF Viewer sample in ASP.NET MVC.
25+
Follow instructions provided in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC.
2626

27-
**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project
27+
**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` file in the project
2828

2929
1. Add the required scripts using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
3030

@@ -39,7 +39,7 @@ Follow instructions provided in the Syncfusion<sup style="font-size:70%">&reg;</
3939
{% endhighlight %}
4040
{% endtabs %}
4141

42-
**Step 4:** Modify the `~/Views/Home/Index.cshtml` File in the Project
42+
**Step 4:** Modify the `~/Views/Home/Index.cshtml` file in the project
4343

4444
1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3.
4545

@@ -53,7 +53,7 @@ AWS.config.update({
5353
});
5454
```
5555

56-
2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
56+
2. Configure a custom toolbar item for the download function to save a PDF file to AWS S3.
5757

5858
```csharp
5959
<div>
@@ -123,30 +123,30 @@ N> The **AWSSDK.S3** NuGet package must be installed in your application to use
123123

124124
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
125125

126-
## Using Server-Backed PDF Viewer
126+
## Using the server-backed PDF Viewer
127127

128-
To save a PDF file to AWS S3 bucket, you can follow the steps below
128+
To save a PDF file to AWS S3, follow these steps:
129129

130-
**Step 1:** Create AWS S3 account
130+
**Step 1:** Create an AWS S3 account
131131

132132
Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials.
133133

134-
**Step 2:** Create PDF Viewer Sample in ASP.NET MVC
134+
**Step 2:** Create a PDF Viewer sample in ASP.NET MVC
135135

136-
Follow instructions provided in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started/-with-server-backed#integrate-pdf-viewer-into-an-aspnet-mvc-application) to create a simple PDF Viewer sample in ASP.NET MVC.
136+
Follow instructions provided in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET MVC.
137137

138-
**Step 3:** Modify the `HomeController.cs` File in the Project
138+
**Step 3:** Modify the `HomeController.cs` file in the project
139139

140140
1. Import the required namespaces at the top of the file.
141141

142142
```csharp
143143
using System.IO;
144144
using Amazon;
145145
using Amazon.S3;
146-
using Amazon.S3.Model
146+
using Amazon.S3.Model;
147147
```
148148

149-
3. Modify the `Download()` method to save the downloaded PDF files to AWS S3 container
149+
3. Modify the `Download()` method to save the downloaded PDF files to AWS S3 bucket
150150

151151
```csharp
152152
private readonly string _accessKey = "Your Access Key from AWS S35";
@@ -185,9 +185,9 @@ public ActionResult Download(jsonObjects jsonObject)
185185

186186
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
187187

188-
**Step 4:** Set the PDF Viewer Properties in ASP.NET MVC PDF viewer component
188+
**Step 4:** Configure the PDF Viewer component
189189

190-
Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from AWS S3. Ensure that you correctly pass the document name from the files available in your azure container to the documentPath property.
190+
Set the [serviceUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ServiceUrl) property of the PDF Viewer component with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from AWS S3, and ensure that the document exists in the target bucket.
191191

192192
```csharp
193193

‎Document-Processing/PDF/PDF-Viewer/asp-net-mvc/save-pdf-file/to-azure-active-directory.md‎

Lines changed: 54 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,103 @@
11
---
22
layout: post
3-
title: Save PDF To AAD in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
4-
description: Learn here all about How to Save Pdf To AAD in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
3+
title: Save PDF files to Azure Active Directory (AAD) in ASP.NET MVC PDF Viewer | Syncfusion
4+
description: Learn how to load and save PDF files with Azure Active Directory (AAD) using the Syncfusion ASP.NET MVC PDF Viewer component and a server-backed web service.
55
platform: document-processing
6-
control: Save PDF To AAD
6+
control: PDF Viewer
77
publishingplatform: ASP.NET MVC
88
documentation: ug
99
---
1010

11-
# Save PDF To Azure Active Directory in Viewer
11+
# Save PDF files to Azure Active Directory (AAD)
1212

1313
### **Overview**
1414

15-
The Syncfusion PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer.
15+
The ASP.NET MVC PDF Viewer component supports loading and saving PDF files with Azure Active Directory (AAD). The following steps describe how to securely load and store PDF documents using a server-backed web service.
1616

17-
### **Steps to Open the PDF File from Azure Active Directory**
17+
### **Step 1: Register an application in Azure Active Directory (AAD)**
1818

19-
---
20-
21-
### **Step 1: Register an Application in Azure Active Directory (AAD)**
22-
23-
1. **Go to the Azure Portal**:
19+
1. **Go to the Azure portal**:
2420
- Navigate to [Azure Portal](https://portal.azure.com).
2521

26-
2. **Register your Application**:
22+
2. **Register the application**:
2723
- In the Azure portal, go to **Azure Active Directory** > **App registrations** > **New registration**.
2824
- Register your application and note down the **Application (client) ID** and **Directory (tenant) ID**.
2925

3026
![app-registration](../images/app-registration.png)
3127

32-
3. **Create a Client Secret**:
28+
3. **Create a client secret**:
3329
- In the registered application, go to **Certificates & secrets**.
3430
- Click **New client secret**.
3531
- Provide a description and set an expiration period.
3632
- Click **Add**.
3733
- Copy the client secret value immediately, as it will be hidden later. Store it securely.
3834

39-
![client-secret](../../images/client-secret.png)
40-
41-
---
35+
![client-secret](../images/client-secret.png)
4236

43-
### **Step 2: Create the Azure Storage Account**
37+
### **Step 2: Create the Azure Storage account**
4438

45-
1. **Create a Storage Account**:
39+
1. **Create a storage account**:
4640
- In the Azure portal, use the search bar to search for **Storage accounts**.
4741
- Create a new storage account by filling in the required details (e.g., name, location, resource group, etc.).
4842

49-
![storage-account](../../images/storage-account.png)
50-
51-
---
43+
![storage-account](../images/storage-account.png)
5244

53-
### **Step 3: Assign Role to the Application**
45+
### **Step 3: Assign a role to the application**
5446

55-
1. **Go to your Storage Account**:
47+
1. **Go to the storage account**:
5648
- Navigate to **Access control (IAM)** > **Add role assignment** in your Azure Storage Account.
5749

58-
2. **Assign Role**:
50+
2. **Assign a role**:
5951
- Assign the **Storage Blob Data Contributor** role to your registered application.
6052
- In the **Assign access to** dropdown, select **User, group, or service principal**.
6153
- Click on **Select members** and search for your registered application by name or client ID.
6254
- Select your application and click **Select**.
6355
- Click **Review + assign** to finalize the role assignment.
6456

65-
![add-role](../../images/add-role.png)
66-
---
57+
![add-role](../images/add-role.png)
6758

68-
### **Step 4: Upload the PDF Document to the Azure Storage Account**
59+
### **Step 4: Upload the PDF document to Azure Storage**
6960

70-
1. **Navigate to Data Storage**:
61+
1. **Navigate to Data storage**:
7162
- In the Azure portal, go to **Data storage** > **Containers**.
7263

73-
2. **Upload the PDF File**:
64+
2. **Upload the PDF file**:
7465
- Create a new container and upload the PDF document you want to access in the PDF Viewer.
7566

76-
![upload-pdf](../../images/upload-pdf.png)
77-
---
67+
![upload-pdf](../images/upload-pdf.png)
68+
69+
### **Step 5: Server-side configuration**
70+
71+
1. **Configure server-side code**:
72+
- Open the server-side application (e.g., ASP.NET MVC) and configure the following details in the `PdfViewerController` file:
73+
- `tenantId` (your Azure AD tenant ID),
74+
- `clientId` (your registered application client ID),
75+
- `clientSecret` (your registered application client secret),
76+
- `blobServiceEndpoint` (your storage account blob service URL),
77+
- `containerName` (your container name in Azure Blob Storage).
7878

79-
### **Step 5: ASP.NET MVC PDF Viewer Control Configuration**
80-
1. Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started/-with-server-backed) to create a simple PDF Viewer sample.
79+
2. **Run the web service**:
80+
- After configuring the necessary details, run the web service to make it accessible.
8181

82-
2. Add the following code snippet in `HomeController.cs`.
82+
### **Client-side configuration**
83+
84+
1. **Run the ASP.NET MVC sample**:
85+
- Start the ASP.NET MVC (Razor) sample that includes the Syncfusion PDF Viewer.
86+
87+
2. **Load a PDF from AAD**:
88+
- When the user clicks the **Load from AAD** button, the client-side JavaScript will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage.
89+
- The server will retrieve the PDF from Azure, convert it to a Base64 string, and return it to the client.
90+
91+
3. **Display the PDF in the PDF Viewer**:
92+
- Once the Base64 string is received, the PDF Viewer will load the PDF using the `viewer.load()` method.
93+
94+
### **Save the PDF document to Azure**
95+
96+
1. Save PDF to AAD:
97+
- The user can click the **Save to AAD** button to upload any modifications to the PDF back to Azure Blob Storage.
98+
- This action sends the modified PDF to the server, where it is converted into a byte array and saved to the specified Azure Blob container.
99+
100+
### **Server-side code snippets**
83101

84102
{% tabs %}
85103
{% highlight c# tabtitle="~/HomeController.cs" %}
@@ -135,15 +153,7 @@ public async Task<ActionResult> SaveToAAD(jsonObjects responseData)
135153
{% endhighlight %}
136154
{% endtabs %}
137155

138-
3. Configure Server-Side Code:
139-
- Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file:
140-
- `tenantId` (your Azure AD tenant ID),
141-
- `clientId` (your registered application client ID),
142-
- `clientSecret` (your registered application client secret),
143-
- `blobServiceEndpoint` (your storage account blob service URL),
144-
- `containerName` (your container name in Azure Blob Storage).
145-
146-
4. Add the following code snippet in `Index.cshtml`.
156+
### **Client-side code snippets**
147157

148158
{% tabs %}
149159
{% highlight c# tabtitle="~/Index.cshtml" %}
@@ -196,15 +206,4 @@ public async Task<ActionResult> SaveToAAD(jsonObjects responseData)
196206
{% endhighlight %}
197207
{% endtabs %}
198208

199-
5. Run the Application
200-
- Build and run your MVC application. The PDF Viewer will be displayed with Load from AAD and Save to AAD buttons.
201-
202-
6. Load PDF from AAD
203-
- Click the Load from AAD button.
204-
- The server fetches the PDF from Azure Blob Storage and loads it into the Syncfusion PDF Viewer.
205-
206-
7. Save PDF to AAD
207-
- Click the Save to AAD button.
208-
- The server uploads the modified PDF back to Azure Blob Storage.
209-
210-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad).
209+
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad).

0 commit comments

Comments
 (0)