Package Exports

uploader
uploader/dist/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (uploader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

File & Image Uploader
(With Integrated Cloud Storage)

Get Started — Try on CodePen

Supports: single & multi-file uploads, modal & inline views, localization, mobile, and more...

Installation

Install via NPM:

npm install uploader

Or via a <script> tag:

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

Usage — Try on CodePen

Initialize

Initialize once at the start of your application:

// Ignore if installed via a script tag.
const { Uploader } = require("uploader");

// Get production API keys from Upload.io
const uploader = new Uploader({
  apiKey: "free"
});

To display the upload widget:

uploader.open().then(
  files => alert(files.length === 0
    ? "No files selected."
    : `Files uploaded:\n${files.map(x => x.fileUrl).join("\n")}`),
  error => alert(error)
);

Single-File / Multi-File

To perform a single-file upload (default):

uploader.open({ multi: false })

To perform a multi-file upload:

uploader.open({ multi: true })

Result

.open() returns a promise of UploadedFile[]:

[
  {
    accountId: "FW251aX",                       // The Upload.io account the file was uploaded to.
    file: { ... },                              // DOM file object (from the <input> element).
    fileId: "FW251aXa9ku...",                   // The uploaded file ID. Append to 'https://files.upload.io/' for the file.
    fileUrl: "https://files.upload.io/FW25...", // The uploaded file URL.
    fileSize: 12345,                            // File size in bytes.
    mime: "image/jpeg",                         // File MIME type.
    tags: [                                     // Tags manually & automatically assigned to this file.
      { name: "tag1", searchable: true },
      { name: "tag2", searchable: true },
      ...
    ]
  },
  ...
]

Note: an empty array is returned if the user closes the dialog without clicking "Finish".

Configuration

All parameters are optional:

uploader
  .open({
    containerElementId: "custom-container", // <body> by default.
    layout: "modal",                        // "modal" by default. "inline" also supported.
    locale: myCustomLocale,                 // EN_US by default. (See "Localization" section below.)
    maxFileSizeBytes: 1024 ** 2,            // Unlimited by default.
    mimeTypes: ["image/jpeg"],              // Unrestricted by default.
    multi: false,                           // False by default.
    tags: ["profile_picture"]               // Requires an Upload.io account.
  })
  .then(files => alert(files))

Localization

const myCustomLocale = {
  "addAnotherFile":   "Add another file...",
  "cancel":           "cancel",
  "cancelled!":       "cancelled",
  "finish":           "Finished",
  "finishIcon":       true,
  "orDragDropFile":   "...or drag and drop a file.",
  "orDragDropFiles":  "...or drag and drop files.",
  "pleaseWait":       "Please wait...",
  "removed!":         "removed",
  "remove":           "remove",
  "uploadFile":       "Select a File",
  "uploadFiles":      "Select Files"
}

Resizing & Cropping Images

Given an uploaded image URL:

https://files.upload.io/W142hJkHhVSQ5ZQ5bfqvanQ

Resize with:

https://files.upload.io/W142hJkHhVSQ5ZQ5bfqvanQ/thumbnail

Auto-crop with:

https://files.upload.io/W142hJkHhVSQ5ZQ5bfqvanQ/thumbnail-square

🎯 Features

Uploader is the file & image uploader for Upload.io: the file upload service for developers.

Core features (available without an account):

Beautifully clean UI widget.
Lightweight. (29KB gzipped including all dependencies — see Upload.js for an ultra-lightweight solution.)
Single & Multi-File Uploads.
Fluid Layout & Mobile-Friendly.
Modal & Inline Modes.
Localization.
Integrated File Hosting:
- Files stored on Upload.io for 4 hours with the "free" API key.
- Files hosted via the Upload CDN: 100 locations worldwide.
Image Transformations:
- Append /thumbnail or /thumbnail-square to your image URLs.
- Get more transformations with a full account.

All features (available with an account):

Permanent Storage.
Unlimited Daily Uploads. (The "free" API key allows 100 uploads per day per IP.)
Extended CDN Coverage. (Files served from 300+ locations worldwide.)
Upload & Download Authentication. (Supports federated auth via your own JWT authorizer.)
File & Folder Management Console.
Expiring Links.
Custom CNAME.
Advanced Rules Engine:
- Rate Limiting.
- Traffic Limiting.
- File Size Limiting.
- IP Blacklisting.
- File Type Blacklisting.
- And More...

Create an Upload.io account »

Contribute

If you would like to contribute to Uploader:

Add a GitHub Star to the project (if you're feeling generous!).
Determine whether you're raising a bug, feature request or question.
Raise your issue or PR. 🚀

License

MIT

uploader