From c0319534bf3e2e5c92858f7dfed711c6a23ef05e Mon Sep 17 00:00:00 2001 From: Deira <166362424+DeiraSF4418@users.noreply.github.com> Date: Mon, 27 Oct 2025 05:38:13 +0530 Subject: [PATCH 1/3] 984098: Need to include the UG section for the opening Excel from AWS S3 --- .../React/opening-documents-aws-s3-bucket.md | 177 ++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/React/opening-documents-aws-s3-bucket.md diff --git a/Document-Processing/Excel/Spreadsheet/React/opening-documents-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/React/opening-documents-aws-s3-bucket.md new file mode 100644 index 000000000..69d7f71dc --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/opening-documents-aws-s3-bucket.md @@ -0,0 +1,177 @@ +--- +layout: post +title: Open document from AWS S3 in React Spreadsheet control | Syncfusion +description: Learn about how to Open Excel file from AWS S3 in React Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: React +control: Open file from AWS S3 +documentation: ug +domainurl: ##DomainURL## +--- + +# 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("AccessKey"); + _secretKey = _configuration.GetValue("SecretKey"); + _bucketName = _configuration.GetValue("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 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 + + + +// 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. From 39c5cf9d84b529bec06fab330d59d551fba8f4e3 Mon Sep 17 00:00:00 2001 From: Deira <166362424+DeiraSF4418@users.noreply.github.com> Date: Mon, 27 Oct 2025 11:44:27 +0530 Subject: [PATCH 2/3] 984098: Need to include the UG section for the opening Excel from AWS S3 --- .../React/opening-documents/aws-s3-bucket.md | 177 ++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/React/opening-documents/aws-s3-bucket.md diff --git a/Document-Processing/Excel/Spreadsheet/React/opening-documents/aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/React/opening-documents/aws-s3-bucket.md new file mode 100644 index 000000000..858eca7df --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/opening-documents/aws-s3-bucket.md @@ -0,0 +1,177 @@ +--- +layout: post +title: Open document from AWS S3 in React Spreadsheet control | Syncfusion +description: Learn about how to Open Excel file from AWS S3 in React Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: React +control: Open file from AWS S3 +documentation: ug +domainurl: ##DomainURL## +--- + +# 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("AccessKey"); + _secretKey = _configuration.GetValue("SecretKey"); + _bucketName = _configuration.GetValue("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 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 + + + +// 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. From e91221f2bc7241ff93781645c08dca6c00ea1471 Mon Sep 17 00:00:00 2001 From: Deira <166362424+DeiraSF4418@users.noreply.github.com> Date: Mon, 27 Oct 2025 11:52:51 +0530 Subject: [PATCH 3/3] 984098: Need to include the UG section for the opening Excel from AWS S3 --- .../React/opening-documents-aws-s3-bucket.md | 177 ------------------ 1 file changed, 177 deletions(-) delete mode 100644 Document-Processing/Excel/Spreadsheet/React/opening-documents-aws-s3-bucket.md diff --git a/Document-Processing/Excel/Spreadsheet/React/opening-documents-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/React/opening-documents-aws-s3-bucket.md deleted file mode 100644 index 69d7f71dc..000000000 --- a/Document-Processing/Excel/Spreadsheet/React/opening-documents-aws-s3-bucket.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -layout: post -title: Open document from AWS S3 in React Spreadsheet control | Syncfusion -description: Learn about how to Open Excel file from AWS S3 in React Spreadsheet control of Syncfusion Essential JS 2 and more details. -platform: React -control: Open file from AWS S3 -documentation: ug -domainurl: ##DomainURL## ---- - -# 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("AccessKey"); - _secretKey = _configuration.GetValue("SecretKey"); - _bucketName = _configuration.GetValue("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 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 - - - -// 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.