Build a spreadsheet uploader on your website that saves files to AWS S3

In this guide, we’ll walk you through creating an HTML button to collect spreadsheet files and store them in an AWS S3 bucket.

Once the button is set up, it will store uploaded spreadsheets to your AWS S3 buckets:

To implement this feature, all you have to do is copy the code from settings and paste it in the HTML of your website where you want the button to appear.

Creating a spreadsheet importer automatically generates the code needed to create this button.

How to get started

Create an account

Sign up for an account on https://www.apispreadsheets.com/signup. Start with a free plan and upgrade if you need any of the advanced features.

Log into your account to create your first spreadsheet importer.

Create a Spreadsheet Importer

Click on ‘Import’ in the main menu.

On this page, click the ‘Create Your Own Import Configuration’ button to create a spreadsheet importer.

Once created, API Spreadsheets will redirect you to the settings page where you can add your AWS account to host your files on AWS S3.

Integrate AWS S3 Account

Open the ‘Destinations’ tab to add your AWS account and toggle on the switch for AWS integration.

Click on the yellow ‘Add New AWS S3 Account’ button.

Enter Credentials to Upload Straight to AWS

Clicking the button will open a prompt, where you’ll have to enter your AWS credentials. Specifically, your:

• Account Name (a unique name for this account for API Spreadsheets. This is not related to your AWS account in any way )
• AWS Access Key
• AWS Secret Key

Note: we recommend you create a seperate user in your AWS account that has S3 write access.

Then you can use the access and secret keys from that account.

After filling in the credentials, click the green button to connect to your AWS S3 account and store your spreadsheets there.

If you entered everything correctly, your account should appear under ‘Select AWS S3 Accounts to Upload File’.

Tick the checkbox next to your account ID, and select the bucket to store your files.

Here we are choosing the folder ‘Spreadsheets to AWS’ in the ‘apispreadsheets-content’ bucket.

There may be multiple sub-folders under your bucket so make sure to select the appropriate one.

To finally save your selection, click on the green ‘Save Destinations’ button on the right.

From this point on, every file uploaded using this spreadsheet importer will be saved to the specified folder on AWS S3.

Work With Importer Code

Every spreadsheet importer contains an HTML code to display a basic button.

This button will be tied to your specific spreadsheet importer, with the functionality of uploading files to your AWS S3 account.

You can find it in the ‘Code’ tab of spreadsheet importer settings:

Basic Example:

You can implement a basic button just by copy/pasting the code directly in the HTML structure of your page where you want the button to appear.

For example, you can place the button on your homepage:

Advanced Example:

You can use CSS to style your button, and keep all the custom functionality.

Here’s how much you can change by adding few CSS rules:

This changes the appearance, but the button retains all the custom functionality, such as uploading to AWS S3.

Further reading

Read up on importer code to better understand every line of code and how it all ties together. On the other hand, this guide can help you better understand opportunities for customizing spreadsheet importers.

Read the ‘Adding a user’ section of AWS docs to create users, manage their permissions, and get the necessary credentials (access and secret keys).