From eeddfdc4fad75b3738f42bf32a5e4741017b79b3 Mon Sep 17 00:00:00 2001 From: Deira <166362424+DeiraSF4418@users.noreply.github.com> Date: Mon, 27 Oct 2025 05:45:53 +0530 Subject: [PATCH 1/4] 984977: Need to include the UG section for saving the spreadsheet to the AWS S3 bucket --- .../React/saving-documents-aws-s3-bucket.md | 162 ++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/React/saving-documents-aws-s3-bucket.md diff --git a/Document-Processing/Excel/Spreadsheet/React/saving-documents-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/React/saving-documents-aws-s3-bucket.md new file mode 100644 index 000000000..c7c47b9c5 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/saving-documents-aws-s3-bucket.md @@ -0,0 +1,162 @@ +--- +layout: post +title: Save spreadsheet to AWS S3 in React Spreadsheet control | Syncfusion +description: Learn how to save a Excel file from AWS S3 in React Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: React +control: Save file to AWS S3 +documentation: ug +domainurl: ##DomainURL## +--- + +# Save spreadsheet to AWS S3 + +To save a file to the AWS S3, 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 `SaveToS3()` method to open the document from the AWS S3 bucket + +```csharp + +[HttpPost] +[Route("SaveToS3")] +public async Task SaveToS3([FromForm] SaveSettings saveSettings) +{ + try + { + // Convert spreadsheet JSON to Excel file stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; // Reset stream for upload + + // Set AWS region and credentials + var region = RegionEndpoint.USEast1; + var config = new AmazonS3Config { RegionEndpoint = region }; + var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); + + // Define S3 bucket and file name + string bucketName = "your-bucket-name"; + string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); + + // Initialize S3 client + using (var client = new AmazonS3Client(credentials, config)) + { + // Use TransferUtility to upload the file stream + var fileTransferUtility = new TransferUtility(client); + await fileTransferUtility.UploadAsync(fileStream, bucketName, fileName); + } + + // Return success message + return Ok("Excel file successfully saved to AWS S3."); + } + catch (Exception ex) + { + } +} + +``` + +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 using [`saveAsJson`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#saveasjson) method to serialize the spreadsheet and send it to the backend + +```tsx + +// Function to save the current spreadsheet to AWS S3 via an API call +const saveToS3 = () => { + // Convert the current spreadsheet to JSON format + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to S3. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToS3', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; + +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. From 6c1179f070afff8c02e3b8f0b671e2fd315b1dad Mon Sep 17 00:00:00 2001 From: Deira <166362424+DeiraSF4418@users.noreply.github.com> Date: Mon, 27 Oct 2025 11:39:33 +0530 Subject: [PATCH 2/4] 984977: Need to include the UG section for saving the spreadsheet to the AWS S3 bucket --- .../React/saving-documents/aws-s3-bucket.md | 162 ++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md diff --git a/Document-Processing/Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md new file mode 100644 index 000000000..c7c47b9c5 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md @@ -0,0 +1,162 @@ +--- +layout: post +title: Save spreadsheet to AWS S3 in React Spreadsheet control | Syncfusion +description: Learn how to save a Excel file from AWS S3 in React Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: React +control: Save file to AWS S3 +documentation: ug +domainurl: ##DomainURL## +--- + +# Save spreadsheet to AWS S3 + +To save a file to the AWS S3, 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 `SaveToS3()` method to open the document from the AWS S3 bucket + +```csharp + +[HttpPost] +[Route("SaveToS3")] +public async Task SaveToS3([FromForm] SaveSettings saveSettings) +{ + try + { + // Convert spreadsheet JSON to Excel file stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; // Reset stream for upload + + // Set AWS region and credentials + var region = RegionEndpoint.USEast1; + var config = new AmazonS3Config { RegionEndpoint = region }; + var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); + + // Define S3 bucket and file name + string bucketName = "your-bucket-name"; + string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); + + // Initialize S3 client + using (var client = new AmazonS3Client(credentials, config)) + { + // Use TransferUtility to upload the file stream + var fileTransferUtility = new TransferUtility(client); + await fileTransferUtility.UploadAsync(fileStream, bucketName, fileName); + } + + // Return success message + return Ok("Excel file successfully saved to AWS S3."); + } + catch (Exception ex) + { + } +} + +``` + +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 using [`saveAsJson`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#saveasjson) method to serialize the spreadsheet and send it to the backend + +```tsx + +// Function to save the current spreadsheet to AWS S3 via an API call +const saveToS3 = () => { + // Convert the current spreadsheet to JSON format + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to S3. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToS3', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; + +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. From 9cbb0f2b847b13e28cb6ebe4ee10f0050102cbf0 Mon Sep 17 00:00:00 2001 From: Deira <166362424+DeiraSF4418@users.noreply.github.com> Date: Mon, 27 Oct 2025 11:41:13 +0530 Subject: [PATCH 3/4] 984977: Need to include the UG section for saving the spreadsheet to the AWS S3 bucket --- .../Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md index c7c47b9c5..153e8a112 100644 --- a/Document-Processing/Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md +++ b/Document-Processing/Excel/Spreadsheet/React/saving-documents/aws-s3-bucket.md @@ -14,11 +14,11 @@ To save a file to the AWS S3, 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. +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. +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. From 458362b2712fc7f5cb465125d106495659caf820 Mon Sep 17 00:00:00 2001 From: Deira <166362424+DeiraSF4418@users.noreply.github.com> Date: Mon, 27 Oct 2025 11:52:13 +0530 Subject: [PATCH 4/4] 984977: Need to include the UG section for saving the spreadsheet to the AWS S3 bucket --- .../React/saving-documents-aws-s3-bucket.md | 162 ------------------ 1 file changed, 162 deletions(-) delete mode 100644 Document-Processing/Excel/Spreadsheet/React/saving-documents-aws-s3-bucket.md diff --git a/Document-Processing/Excel/Spreadsheet/React/saving-documents-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/React/saving-documents-aws-s3-bucket.md deleted file mode 100644 index c7c47b9c5..000000000 --- a/Document-Processing/Excel/Spreadsheet/React/saving-documents-aws-s3-bucket.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -layout: post -title: Save spreadsheet to AWS S3 in React Spreadsheet control | Syncfusion -description: Learn how to save a Excel file from AWS S3 in React Spreadsheet control of Syncfusion Essential JS 2 and more details. -platform: React -control: Save file to AWS S3 -documentation: ug -domainurl: ##DomainURL## ---- - -# Save spreadsheet to AWS S3 - -To save a file to the AWS S3, 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 `SaveToS3()` method to open the document from the AWS S3 bucket - -```csharp - -[HttpPost] -[Route("SaveToS3")] -public async Task SaveToS3([FromForm] SaveSettings saveSettings) -{ - try - { - // Convert spreadsheet JSON to Excel file stream - Stream fileStream = Workbook.Save(saveSettings); - fileStream.Position = 0; // Reset stream for upload - - // Set AWS region and credentials - var region = RegionEndpoint.USEast1; - var config = new AmazonS3Config { RegionEndpoint = region }; - var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); - - // Define S3 bucket and file name - string bucketName = "your-bucket-name"; - string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); - - // Initialize S3 client - using (var client = new AmazonS3Client(credentials, config)) - { - // Use TransferUtility to upload the file stream - var fileTransferUtility = new TransferUtility(client); - await fileTransferUtility.UploadAsync(fileStream, bucketName, fileName); - } - - // Return success message - return Ok("Excel file successfully saved to AWS S3."); - } - catch (Exception ex) - { - } -} - -``` - -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 using [`saveAsJson`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#saveasjson) method to serialize the spreadsheet and send it to the backend - -```tsx - -// Function to save the current spreadsheet to AWS S3 via an API call -const saveToS3 = () => { - // Convert the current spreadsheet to JSON format - spreadsheet.saveAsJson().then((json) => { - const formData = new FormData(); - - // Append necessary data to the form for the API request - formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save - formData.append('saveType', loadedFileInfo.saveType); // Save type - formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data - formData.append( - 'PdfLayoutSettings', - JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings - ); - - // Make a POST request to the backend API to save the file to S3. Replace the URL with your local or hosted endpoint URL. - fetch('https://localhost:portNumber/api/spreadsheet/SaveToS3', { - method: 'POST', - body: formData, - }) - .then((response) => { - // Check if the response is successful - if (!response.ok) { - throw new Error( - `Save request failed with status ${response.status}` - ); - } - window.alert('Workbook saved successfully.'); - }) - .catch((error) => { - // Log any errors that occur during the save operation - window.alert('Error saving to server:', error); - }); - }); -}; - -``` - -N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.