1003858: Added Spreadsheet cloud storage ug contents

Document-Processing-toc.html

@@ -5079,8 +5079,45 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/getting-started">Getting Started</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/nextjs-getting-started">Getting Started with NextJS</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/data-binding">Data Binding</a></li>
-							<li><a href="/document-processing/excel/spreadsheet/react/open-save">Open and Save</a></li>
-							<li><a href="/document-processing/excel/spreadsheet/react/docker-deployment">Docker Deployment</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/react/open/open">Open Excel File</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/file-uploader">using a file uploader</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/external-url">using an external URL</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/blob-data">from blob data</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/base64-string">from base64 string</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/server">located on a server</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/aws-lambda">using AWS Lambda hosted web service</a></li>
+								</ul>
+							</li>
+							<li><a href="/document-processing/excel/spreadsheet/react/save/save">Save Excel File</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/save/save-excel-file/blob-data">as blob data</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/save/save-excel-file/base64-string">as base64 string</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/save/save-excel-file/server">to a server</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/save/save-excel-file/aws-lambda">using AWS Lambda hosted web service</a></li>
+								</ul>
+							</li>
+							<li><a href="/document-processing/excel/spreadsheet/react/open-from-cloud">Open From Cloud</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/cloud-storage/open-from-cloud/aws-s3-bucket">AWS S3</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/cloud-storage/open-from-cloud/azure-blob-storage">Azure Blob Storage</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/cloud-storage/open-from-cloud/google-cloud-storage">Google Cloud Storage</a></li>
+								</ul>
+							</li>
+							<li><a href="/document-processing/excel/spreadsheet/react/save-to-cloud">Save To Cloud</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/cloud-storage/save-to-cloud/aws-s3-bucket">AWS S3</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/cloud-storage/save-to-cloud/azure-blob-storage">Azure Blob Storage</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/cloud-storage/save-to-cloud/google-cloud-storage">Google Cloud Storage</a></li>
+								</ul>
+							</li>
+							<li><a href="/document-processing/excel/spreadsheet/react/server-deployment">Server Deployment</a>
+							    <ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/docker-deployment">How to Deploy Spreadsheet Docker Image Locally</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-visual-studio">Deploy Spreadsheet Server Docker Image to Azure App Service using Azure CLI</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-azure-cli">Deploy Spreadsheet Server to Azure App Service using Visual Studio</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/worksheet">Worksheet</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/cell-range">Cell Range</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/editing">Editing</a></li>

Document-Processing/Excel/Spreadsheet/React/Cloud-Storage/Open-from-Cloud/aws-s3-bucket.md

@@ -0,0 +1,176 @@
+---
+layout: post
+title: Opening excel from AWS S3 in React Spreadsheet control | Syncfusion
+description: Learn about how to Open an Excel file from AWS S3 in React Spreadsheet control of Syncfusion Essential JS 2 and more details.
+platform: document-processing
+control: Open file from AWS S3
+documentation: ug
+---
+
+# Open file from AWS S3
+
+To load a file from AWS S3 in a Spreadsheet Component, you can follow the steps below
+
+**Step 1:** Create a Simple Spreadsheet Sample in React
+
+Start by following the steps provided in this [link](../../React//getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
+
+**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
+
+1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../../Spreadsheet/React/open-save.md) for instructions on how to create a web service project.
+
+2. Open the `SpreadsheetController.cs` file in your web service project.
+
+3. Import the required namespaces at the top of the file:
+
+```csharp
+
+using Amazon;
+using Amazon.Runtime;
+using Amazon.S3;
+using Amazon.S3.Model;
+using Amazon.S3.Transfer;
+
+```
+
+4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields.
+
+```csharp
+
+private IConfiguration _configuration;
+public readonly string _accessKey;
+public readonly string _secretKey;
+public readonly string _bucketName;
+
+public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
+{
+  _hostingEnvironment = hostingEnvironment;
+  _cache = cache;
+  _configuration = configuration;
+  _accessKey = _configuration.GetValue<string>("AccessKey");
+  _secretKey = _configuration.GetValue<string>("SecretKey");
+  _bucketName = _configuration.GetValue<string>("BucketName");
+}
+
+```
+
+5. Create the `OpenFromS3()` method to open the document from the AWS S3 bucket.
+
+```csharp
+
+[Route("api/[controller]")]
+[ApiController]
+public class SpreadsheetController : ControllerBase
+{
+    [HttpPost]
+    [Route("OpenFromS3")]
+    public async Task<IActionResult> OpenFromS3([FromBody] FileOptions options)
+    {
+        try
+        {
+            //Set AWS region and credentials
+            var region = RegionEndpoint.USEast1;
+            var config = new AmazonS3Config { RegionEndpoint = region };
+            var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey");
+            //Create an S3 client to interact with AWS
+            using (var client = new AmazonS3Client(credentials, config))
+            {
+                using (MemoryStream stream = new MemoryStream())
+                {
+                    //Get the full file name using input from the client
+                    string bucketName = "your-bucket-name";
+                    string fileName = options.FileName + options.Extension;
+                    //Download the file from S3 into memory
+                    var response = await client.GetObjectAsync(new GetObjectRequest
+                    {
+                        BucketName = bucketName,
+                        Key = fileName
+                    });
+                    await response.ResponseStream.CopyToAsync(stream);
+                    stream.Position = 0; // Reset stream position for reading
+                    //Wrap the stream as a FormFile for processing
+                    OpenRequest open = new OpenRequest
+                    {
+                        File = new FormFile(stream, 0, stream.Length, options.FileName, fileName)
+                    };
+                    //Convert Excel file to JSON using Workbook.Open method.
+                    var result = Workbook.Open(open);
+                    //Return the JSON result to the client
+                    return Content(result, "application/json");
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            // Handle any errors and return a message
+            Console.WriteLine($"Error: {ex.Message}");
+            return Content("Error occurred while processing the file.");
+        }
+    }
+
+    // To receive file details from the client.
+    public class FileOptions
+    {
+        public string FileName { get; set; } = string.Empty;
+        public string Extension { get; set; } = string.Empty;
+    }
+}
+
+```
+
+6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration.
+
+```json
+
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "AccessKey": "Your Access Key from AWS S3",
+  "SecretKey": "Your Secret Key from AWS S3",
+  "BucketName": "Your Bucket name from AWS S3"
+}
+
+```
+
+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 Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the AWS S3 bucket into the client-side spreadsheet.
+
+```typescript
+
+<button class="e-btn" (click)="openFromS3()">Import XLS files from AWS S3 bucket</button>
+
+// Function to open a spreadsheet file from AWS S3 via an API call
+const openFromS3 = () => {
+  spreadsheet.showSpinner();
+  // Make a POST request to the backend API to fetch the file from S3. Replace the URL with your local or hosted endpoint URL.
+  fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      FileName: fileInfo.name, // Name of the file to open
+      Extension: fileInfo.extension, // File extension
+    }),
+  })
+    .then((response) => response.json()) // Parse the response as JSON
+    .then((data) => {
+      spreadsheet.hideSpinner();
+      // Load the spreadsheet data into the UI.
+      spreadsheet.openFromJson({ file: data, triggerEvent: true });
+    })
+    .catch((error) => {
+      // Log any errors that occur during the fetch operation
+      window.alert('Error importing file:', error);
+    });
+};
+
+```
+
+N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.

Document-Processing/Excel/Spreadsheet/React/Cloud-Storage/Open-from-Cloud/azure-blob-storage.md

@@ -0,0 +1,154 @@
+---
+layout: post
+title: Open excel from Azure Blob in React Spreadsheet control | Syncfusion
+description: Learn about how to Open an Excel file from Azure Blob Storage in React Spreadsheet control of Syncfusion Essential JS 2.
+platform: document-processing
+control: Open file from Azure Blob Storage
+documentation: ug
+---
+
+# Open file from Azure Blob Storage
+
+To load a file from Azure Blob Storage in a Spreadsheet Component, you can follow the steps below
+
+**Step 1:** Create a Simple Spreadsheet Sample in React
+
+Start by following the steps provided in this [link](../../React//getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
+
+**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
+
+1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../../Spreadsheet/React/open-save.md) for instructions on how to create a web service project.
+
+2. Open the `SpreadsheetController.cs` file in your web service project.
+
+3. Import the required namespaces at the top of the file:
+
+```csharp
+
+using System;
+using System.IO;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Configuration;
+using Syncfusion.EJ2.Spreadsheet;
+using Azure.Storage.Blobs;
+using Azure.Storage.Blobs.Specialized;
+
+```
+
+4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields.
+
+```Csharp
+
+private readonly string _storageConnectionString;
+private readonly string _storageContainerName;
+
+public SpreadsheetController(IConfiguration configuration)
+{
+    // Fetch values from appsettings.json
+    _storageConnectionString = configuration.GetValue<string>("connectionString");
+    _storageContainerName = configuration.GetValue<string>("containerName");
+}
+
+```
+
+5. Create the `OpenFromAzure()` method to open the document from the Azure Blob Storage.
+
+```Csharp
+
+[HttpPost]
+[Route("OpenFromAzure")]
+public async Task<IActionResult> OpenFromAzure([FromBody] FileOptions options)
+{
+    if (options == null || string.IsNullOrWhiteSpace(options.FileName) || string.IsNullOrWhiteSpace(options.Extension))
+        return BadRequest("Invalid file options.");
+
+    try
+    {
+        using (MemoryStream stream = new MemoryStream())
+        {
+            string fileName = options.FileName + options.Extension;
+
+            // Connect to Azure Blob Storage
+            BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString);
+            BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName);
+            BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName);
+
+            // Download file into memory
+            await blockBlobClient.DownloadToAsync(stream);
+            stream.Position = 0;
+
+            // Wrap stream as FormFile and convert to Spreadsheet-compatible JSON
+            OpenRequest open = new OpenRequest
+            {
+                File = new FormFile(stream, 0, stream.Length, options.FileName, fileName)
+            };
+
+            string result = Workbook.Open(open);
+            return Content(result, "application/json");
+        }
+    }
+    catch (Exception ex)
+    {
+        Console.WriteLine($"Error: {ex.Message}");
+        return Content("Error occurred while processing the file.");
+    }
+}
+
+// DTO that receives file details from the client
+public class FileOptions
+{
+    public string FileName { get; set; } = string.Empty;
+    public string Extension { get; set; } = string.Empty;
+}
+
+```
+
+6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration.
+
+```Json
+
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "connectionString": "DefaultEndpointsProtocol=https;AccountName=yourAccount;AccountKey=yourKey;EndpointSuffix=core.windows.net",
+  "containerName": "your-container-name"
+}
+
+```
+N> Note: Install the Azure.Storage.Blobs NuGet package in the service project.
+
+**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Cloud Storage into the client-side spreadsheet.
+
+```typescript
+
+<button class="e-btn" onClick={openFromAzure}>
+  Import XLS file from Azure Blob Storage
+</button>;
+
+const openFromAzure = () => {
+  spreadsheet.showSpinner();
+
+  fetch("https://localhost:portNumber/api/spreadsheet/OpenFromAzure", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      FileName: fileInfo.name,      // e.g., "Report"
+      Extension: fileInfo.extension // e.g., ".xlsx"
+    })
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      spreadsheet.hideSpinner();
+      spreadsheet.openFromJson({ file: data, triggerEvent: true });
+    })
+    .catch((err) => window.alert("Error importing file: " + err));
+};
+
+```