Irakli Tchigladze
on 2022-04-08
You can give any button on your website the ability to upload files to Google Drive with little to no-code.
After going through this tutorial, this is what you will be able to build
Doing this is as simple as copying and pasting a piece of code into the HTML file of your website from our website API Spreadsheets.
If you still haven’t signed up for API Spreadsheets, go to https://www.apispreadsheets.com/signup to create an account. Once logged in, go to the ‘Import’ section of the main menu.
Here you’ll see a button saying Create a Customized Importer
You will be redirected to the page where you can configure settings of the spreadsheet importer.
To upload your files to Google Drive, you need to set up an integration with Google account.
Open the ‘Destinations’ tab of the settings and toggle the switch next to Google Drive.
Click the green ‘Add New Google Account’ button when it appears. The browser will open a prompt to select a Google account and sign in.
Once you’ve signed in, Google will ask you to confirm that you trust API Spreadsheets.
Select all the boxes to enable API Spreadsheets to automatically upload the spreadsheets to your Google Drive account.
Then click ‘Continue’.
In the ‘Destinations’ tab you’ll see that your Google account has been added.
API Spreadsheets even gives you the ability to specify the folder where you want to store uploaded spreadsheets.
Clicking the light blue text button will open a prompt to select the Google Drive folder.
Your spreadsheet importer includes a code snippet which you can use to add spreadsheet importer button directly on your page.
You can find it in the ‘Code’ section of the importer settings,
Let’s see what happens if you simply copy the importer code and paste it into an empty static HTML file:
As you can see in this live demo, simply copy/pasting the code just displays a square green button.
If you want a simple way to allow your users to upload spreadsheets directly from your website, just copy/paste the code from API Spreadsheets directly in your HTML.
If you know a bit of HTML and CSS, you have complete freedom to customize the appearance as well as functionality of your button.
Let’s observe how much you can change by adding just few lines of CSS code:
If you try clicking the button on the live demo, it works as it should: your files will be stored in API Spreadsheets and Google Drive.
You can tinker with JavaScript, HTML, and CSS to fully customize your button to meet your needs.
You can read our guide about importer code to better understand it. If you’re having problems with Google Account integration, this guide might help you troubleshoot.
