Lucy Muturi for Syncfusion, Inc.

Posted on Dec 19 • Originally published at syncfusion.com on Dec 18

React Spreadsheet AWS S3 Integration: Open and Save Excel Files in the Cloud

#react #awssintegration #cloudfilemanagement #excelinreact

TL;DR: Easily integrate a React spreadsheet component with AWS S3 for seamless cloud-based Excel file management. This guide covers opening and saving Excel files using secure APIs and best practices for React applications.

In today’s cloud-first world, seamless access to documents is no longer optional it’s essential. Whether for collaboration, reporting, or data analysis, managing Excel files in the cloud has become a critical requirement.

By integrating the Syncfusion React Spreadsheet Editor component with AWS S3, you can bring this capability directly into your web app. This approach eliminates the need for extra downloads or tool switching and delivers an Excel-like experience directly in the browser.

In this guide, we will discover how to open Excel files from AWS S3 and render them in Syncfusion React Spreadsheet, as well as save changes securely to AWS S3, eliminating the need for manual uploads. By the end, you’ll have a fully cloud-integrated spreadsheet solution ready for production.

Why choose Syncfusion React Spreadsheet for cloud integration?

Syncfusion React Spreadsheet is designed for enterprise-grade applications that require seamless cloud connectivity and scalability.

Here are the key reasons:

1. Built-in Open/Save APIs

Features like allowOpen, allowSave, openUrl, and saveUrl make it easy to integrate with cloud storage or backend services.
Reduces the need for custom API development for file operations.

2. Server-Side Processing

Offload heavy tasks such as formula calculations, Excel parsing, and PDF export to the server using Syncfusion’s Document Processing Libraries.
Improves performance and ensures smooth handling of large datasets.

3. Format Versatility

Supports multiple formats, including Excel (.xlsx), CSV, and PDF.
Ideal for applications that require importing and exporting data across different systems.

4. Enterprise-Grade User Experience

Provides a rich toolbar, dialogs, and keyboard shortcuts for an Excel-like interface.
Enhances usability and reduces the learning curve for end-users.

5. Scalability

Optimized for handling large files efficiently, making it suitable for cloud-based applications serving multiple users.

How to open and save Excel files in React using AWS S3

Cloud-based Excel handling should be simple. With built-in open and save APIs, React spreadsheet components make AWS S3 integration effortless, so that you can focus on user experience, not file complexity.

Let’s dive into the key open and save features.

Open features

Flexible file sources: Load files from local uploads, external URLs, blob data, Base64 strings, or server endpoints, ideal for cloud-based workflows.
Intuitive UI access: Users open files via the built-in ribbon menu, while developers can configure the open method for programmatic access.
Deserialization: The openFromJson method deserializes a JSON object back into a fully functional workbook, allowing seamless restoration of spreadsheet data, formatting, and structure from backend services or cloud sources.
Event hooks for customization: Use beforeOpen and openComplete for adding validations or custom logic.
Optimized performance: Accelerate large Excel file loading with optimized performance, chunked response handling ensures smooth rendering, while selective processing minimizes overhead for faster open operations.
Secure access: Add custom headers, such as authentication tokens, for protected cloud storage.
Format support: Supports .xlsx, .xls, .xlsm, .xlsb, and .csv formats – making both open operations versatile and reliable.

Save features

Flexible save options: Users can save data locally or send it to a server using JSON or blob formats, ideal for cloud storage workflows.
Intuitive UI access: Users can save files using the built-in ribbon menu, while developers can use the save method to perform programmatic saving to backend services or cloud storage.
Serialization: The saveAsJsonmethod serializes the entire workbook into JSON, enabling seamless transmission to backend services for further processing or cloud uploads.
Server-side conversion: Convert JSON to Excel using Syncfusion’s server libraries.
Event hooks: Customize the save process using beforeSave and saveComplete events – perfect for logging, validation, or triggering additional actions.
PDF export support: Export spreadsheets as PDFs with layout preservation.

Prerequisites

Before diving into the integration process, make sure you have the following components ready. This preparation ensures a smooth development experience.

Frontend setup

Step 1: React project

Begin by creating a React application using tools such as Create React App or Vite. These tools provide a solid foundation for building your interface more efficiently.

Step 2: Syncfusion spreadsheet component:

Next, install the Syncfusion Spreadsheet component via npm:

npm install @syncfusion/ej2-react-spreadsheet

Refer to the official documentation for detailed instructions on configuring the Syncfusion React Spreadsheet component.

Step 3: Basic UI setup

Finally, ensure the spreadsheet renders correctly with the toolbar and ribbon enabled. This step guarantees a smooth user experience before moving on to backend integration.

Backend setup

Once the frontend is ready, the next step is to configure the backend, the part that connects your React app to AWS S3.

Step 1: ASP.NET Core Web API

Create a new ASP.NET Core Web API project to handle open/save operations. This API acts as the service layer between the Syncfusion React Spreadsheet and your S3 bucket. Think of it as the engine powering your cloud-based spreadsheet experience.

Step 2: Install required NuGet packages

Add the necessary packages to your project:

Install-Package AWSSDK.S3
Install-Package Syncfusion.EJ2.Spreadsheet.AspNet.Core

Step 3: AWS S3 bucket

Set up an S3 bucket with appropriate read/write permissions. Then, generate AWS access keys or securely configure IAM roles for authentication.

Note: For detailed backend setup about hosting open and save services for a Spreadsheet with ASP.NET Core and Docker, check out our blog post.

From cloud to React app: Open it, save it, own it!

Ever wondered what happens when you open or save an Excel file in your web app? Here’s the flow.

Opening a file

Opening a file is all about fetching data from the cloud and rendering it seamlessly in your browser. Here’s how the process works:

React request: The app sends a request to open a file.
Backend fetch: ASP.NET Core uses the AWS SDK to retrieve the file from S3.
Convert to JSON: The backend converts the Excel file into JSON using Syncfusion’s Open method.
Send to frontend: This JSON is returned to the frontend (React Spreadsheet app).
Render in browser: The React app uses openFromJson to render the spreadsheet in the browser.

Saving a file

Saving a file reverses the process, taking user edits from the browser and securely storing them in the cloud. Here’s the step-by-step flow:

Serialize in React: The app calls saveAsJson to serialize the workbook.
Send to backend: JSON is sent via FormData with metadata.
Convert to Excel: The backend uses the Save to create an Excel stream.
Upload to S3: The file is uploaded using AWS SDK.

Next, we’ll walk through the step-by-step implementation of opening an Excel file from S3, editing it in React, and saving it back to the cloud.

Before starting the implementation, please ensure that all prerequisites are complete. This includes having a React spreadsheet sample and a server-side open/save ASP.NET Core Web API project ready for a smooth development experience.

Step-by-step guide: Open Excel files from AWS S3

Want to load Excel files from AWS S3 into your React app? Follow these steps:

Step 1: Backend controller logic

On the backend, you will fetch the Excel file from S3, convert it into Spreadsheet-compatible JSON by passing the OpenRequest into our Open method, and then return the JSON to the frontend.

SpreadsheetController.cs:

using Amazon;
using Amazon.Runtime;
using Amazon.S3;
using Amazon.S3.Model;
using Amazon.S3.Transfer;
using Syncfusion.EJ2.Spreadsheet;

namespace WebAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class SpreadsheetController : ControllerBase
    {
        [HttpPost]
        [Route("OpenFromS3")]
        public async Task<IActionResult> 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-secret-key");

                // 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;
        }
    }
}

Step 2: Load file in React

Make a fetch call to your backend API and use openFromJson to load the Excel data into the Spreadsheet component.

index.js:

// 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);
    });
};

Note: For full implementation details, including file selection, open/save buttons, and backend connectivity, refer to the GitHub reference section below. It contains a live demo and downloadable backend project to help you get started quickly.

Step-by-step guide: Save Excel files back to AWS S3

Great job! You’ve opened your Excel file from AWS S3 and made your edits, added formulas, tweaked data, and styled cells. Now, let’s save those changes back to the cloud so they’re accessible at any time.

Step 1: Serialize and send spreadsheet data

Use saveAsJson in your React app to serialize the spreadsheet into JSON. Send this JSON to your backend along with metadata, such as filename and save type.

index.js:

// 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);
        });
    });
};

Step 2: Convert and upload to AWS S3

On the backend, receive the JSON, convert it into an Excel stream using the spreadsheet processing library, and upload it to AWS S3 via the AWS SDK. Quick, secure, and cloud-ready.

SpreadsheetController.cs:

[HttpPost]
[Route("SaveToS3")]
public async Task<IActionResult> SaveToS3([FromForm] SaveSettings saveSettings)
{
    try
    {
        // Convert spreadsheet JSON to Excel file stream
        Stream fileStream = Workbook.Save<Stream>(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-secret-key");

        // 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)
    {
        // Handle errors and return message
        return BadRequest("Error saving file to AWS S3: " + ex.Message);
    }
}

Open and save Excel files from AWS S3 in Syncfusion React Spreadsheet

GitHub reference

Get our GitHub repo for a complete solution: A React client and ASP.NET Core backend to open Excel files from AWS S3 and save changes back with one click. Fast, secure, and easy to integrate

Conclusion

Thanks for reading! In this blog, we’ve explored how to integrate a Syncfusion React Spreadsheet Editor with Amazon S3 to securely manage Excel files in the cloud. From loading data to saving changes, we walked through a developer‑friendly approach that scales effortlessly for dashboards, analytics tools, and enterprise applications, removing the hassle of manual file handling and ensuring a smooth, reliable workflow.

The Syncfusion Spreadsheet Editor is also available in other components such as Blazor, Angular, JavaScript, Vue, ASP.NET Core, and ASP.NET MVC.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Reference links

Related Blogs

This article was originally published at Syncfusion.com

DEV Community