Documentation

Introduction

Upload is a turn-key solution for adding file upload functionality to your website.

See Getting Started to get set up quickly.

Quick Guide

At its core, Upload is a Software as a Service (SaaS) that provides file storage, file transformation and file hosting functionality, with Upload.js as its client-side library.

Uploading

To begin uploading files, simply include Upload.js in your webpage:

<head>  ...  <script src="https://js.upload.io/upload-js/v1"></script>  ...</head>

Add the initialization code:

<head>  ...  <script src="https://js.upload.io/upload-js/v1"></script>  ...  <script>    const onFileSelected =
      new Upload({ apiKey: "YOUR_API_KEY_HERE" }).createFileInputHandler({
        onUploaded: ({ fileUrl, fileId }) => {

           // -----------------------------------------
           // File successfully uploaded to upload.io!
           // -----------------------------------------
           // Send the file ID to your API, for example,
           // to set it as the profile picture for a user.
           // -----------------------------------------
          console.log(`File uploaded to: ${fileUrl}`);

        }
      });
  </script>  ...</head>

And finally, add the upload button:

<body>  ...  <input type="file" onchange="onFileSelected(event)" />  ...</body>

Storing

All files are permanently stored on Upload after being uploaded, until you delete them. To use the file in your web app, simply save its fileId to your database. You can use this ID to construct a URL to the file whenever you require it:

https://files.upload.io/AYU81093TgPQauaR                        \____File ID___/\_______________File URL_______________/

Downloading

To download your file, simply put the file ID after the Upload CDN base URL:

https://files.upload.io/FILE_ID

Files are publicly accessible by default. To access-protect your files, such that your API authorizes each individual access attempt to your files, see access-protected files.

Transforming

To transform a file, append the desired transformation's "slug" to the file URL:

https://files.upload.io/FILE_ID/TRANSFORMATION_SLUG

To find the "slug" for the transformation you want to use, go to the Upload Dashboard and browse the available transformations, then take note of the desired transformation's "slug".

The response from the URL will be the transformed file.


For example, if the file ID AYU81093TgPQauaR points to a JPEG image, and you've created a transformation with the slug 300x200 in the Upload Dashboard that resizes images to 300x200, you would access the resized version of your JPEG using the following URL:

https://files.upload.io/AYU81093TgPQauaR/300x200

Of course, the original file will continue to be accessible via:

https://files.upload.io/AYU81093TgPQauaR

You are using an outdated browser.

This website requires a modern web browser -- the latest versions of these browsers are supported: