Syncfusion React Spreadsheet + Google Cloud Integration

A comprehensive sample demonstrating how to integrate the Syncfusion React Spreadsheet component with Google Cloud 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.

📁 Project Structure

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

✨ Features

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

🧩 Technologies Used

• React + Syncfusion Spreadsheet
• ASP.NET Core Web API
• Google Cloud Storage for .NET
• Google Cloud for cloud storage

🚀 Getting Started

1. Clone the Repository

   git clone https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-google-cloud-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 Google Cloud Storage access, update the appsettings.json file with the following settings, "BucketName": "your-bucket-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 OpenFromGoogleCloud and SaveToGoogleCloud.

• 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' },
  ];

• Tested files used in the dropdown can be found here: Tested Excel files

• You can update this list to match the actual Excel files stored in your Google Cloud storage container.

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

• Once you make edits, click the "Save to GoogleCloud" button to save the changes back to the same file in your Google Cloud 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!