Syncfusion React Spreadsheet + Azure Blob Integration

A comprehensive sample demonstrating how to integrate the Syncfusion React Spreadsheet component with Azure Blob Storage using an ASP.NET Core Web API backend. This solution includes client-side file selection, secure cloud-based open/save operations, and efficient Excel file handling for modern web applications.

🔗 Live Demo

• React Client Sample (StackBlitz): react-syncfusion-Azure-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 Azure Blob into Syncfusion Spreadsheet.
• Edit spreadsheet data in-browser.
• Save changes back to Azure Blob with a single click.
• Dropdown list to select files from Azure Blob.

🧩 Technologies Used

• React + Syncfusion Spreadsheet
• ASP.NET Core Web API
• Azure Storage Blob for .NET
• Azure Blob for cloud storage

🚀 Getting Started

1. Clone the Repository

   git clone https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-azure-blob-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 Server:

   To configure Azure Blob Storage access, update the appsettings.json file with the following settings, "connectionString": "your-azure-storage-connection-string", "containerName": "your-container-name"

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 OpenFromAzure and SaveToAzure.

• 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 Azure blob storage container.

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

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

📄 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!