Syncfusion React Spreadsheet + AWS S3 Integration

This repository demonstrates how to integrate the Syncfusion React Spreadsheet component with AWS S3 cloud storage using a React frontend and an ASP.NET Core Web API backend.

🔗 Live Demo

• React Client Sample (StackBlitz): react-syncfusion-s3-spreadsheet
• Tested files used in the dropdown can be found here: Tested Excel files

📁 Project Structure

├── client/       # React app with Syncfusion Spreadsheet
└── server/       # ASP.NET Core Web API project

✨ Features

• Open Excel files directly from AWS S3 into Syncfusion Spreadsheet.
• Edit spreadsheet data in-browser.
• Save changes back to AWS S3 with a single click.
• Dropdown list to select files from S3.

🧩 Technologies Used

• React + Syncfusion Spreadsheet
• ASP.NET Core Web API
• AWS SDK for .NET
• AWS S3 for cloud storage

🚀 Getting Started

1. Clone the Repository

   git clone https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-aws-s3-integration.git

2. Setup the Client

   cd client
   npm install
   npm start

3. Setup the Server

   cd server
   # Open in Visual Studio or VS Code
   # Restore NuGet packages

   Update the following in the controller:

   • AWS Access Key
   • AWS Secret Key
   • S3 Bucket Name
   • Region

4. Run the Server

   Run the project and test the endpoints directly from the React app

   dotnet run

📌 Notes

• Update the fetch() URLs in the React sample to point to your local backend endpoints for OpenFromS3 and SaveToS3.

• The React sample includes a dropdown list with three predefined Excel files:

  const fileList = [
     { name: 'Car Sales Report', extension: '.xlsx' },
     { name: 'Shopping Cart', extension: '.xls' },
     { name: 'Price Details', extension: '.csv' },
  ];

• You can update this list to match the actual Excel files stored in your AWS S3 bucket.

• After selecting a file, click the "Open From S3" button to load the selected Excel file into the Syncfusion Spreadsheet.

• Once you make edits, click the "Save to S3" button to save the changes back to the same file in your S3 bucket.

📄 License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion^® licensed software, including this control, is subject to the terms and conditions of Syncfusion^® EULA. To acquire a license for 140+ JavaScript UI controls, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

---

Feel free to fork, customize, and contribute to this project!