Installation & Quickstart

BetterStack

Home Dashboard Support Forum

Search…

Overview

File Upload Service

Installation & Quickstart

Code Examples

Account Setup

Getting Provider Access Keys

Installation & Quickstart

See how to quickly get up and running with the file upload service

Create an account, API key and provider
1.
Visit our dashboard and create an account by pressing login
2.
Navigate to the upload service dashboard and create a new upload service
3.
Inside your upload service dashboard, create an API key and a provider
For more info, see our detailed guide on setting up your account. For information on how to get your access keys for different storage services, see this page.
Install the JS upload client library
Our JavaScript client library is extremely lightweight. It's only 1.8kB gzipped and has zero external dependencies. It is supported by all modern browsers. There are only 2 browser dependencies required for it to work correctly:
Promises
Fetch API
If you need to support browsers missing either of these, you can use polyfill.io to polyfill both of those.
There are 2 ways you can install the client library. Our recommend method is to use the NPM package. The package also ships with TypeScript definitions. It can be installed with the following command:
1
npm install --save @betterstack/upload-client
Copied!
Alternatively, you can include the library via script tag in your HTML. You can include it in either the head or body of a page as long as it's included before it's used.
1
<script src="https://cdn.jsdelivr.net/npm/@betterstack/[email protected]/dist/umd/index.min.js"></script>
Copied!
Upload a file
To upload a file, you must extract it from a HTML file input <input type="file">. 
1
import UploadClient from "@betterstack/upload-client"; // NPM only
2
​
3
// Init upload client
4
const UC = new UploadClient({
5
    apiKey: "<YOUR_API_KEY>",
6
});
7
​
8
// In your HTML: <input id="file-input" type="file"/>
9
const file = document.getElementById("file-input").files[0];
10
    
11
// Create upload task
12
const task = UC.upload({
13
    providerId: "<YOUR_PROVIDER_ID>",
14
    files: [{ file: file }]
15
});
16
    
17
// Track upload progress
18
task.onProgress((e) => console.log(e.loadedPercent));
19
​
20
// Start upload with promise
21
task.start()
22
    .then((uploaded) => {
23
        const uploadedFile = uploaded[0];
24
        console.log(uploadedFile.key); // Uploaded path
25
        console.log(uploadedFile.file); // Uploaded file
26
    })
27
    .catch((e) => {
28
        console.log(e.code); // Error code
29
        console.log(e.message); // Error message      
30
        // See all errors on 'Error Handling' page      
31
    });
Copied!
Where to go from here
We recommend reading through the other sections of the documentation that are relevant for you. In particular, the Code Examples page will show you a variety of ways to upload files such as using it in React, form posts, uploading multiple files, etc.

File Upload Service

Code Examples

Last modified 2yr ago

Copy link

Contents

Create an account, API key and provider

Install the JS upload client library

Upload a file

Where to go from here