TypeScript icon, indicating that this package has built-in type declarations

4.9.0Β β€’Β PublicΒ β€’Β Published

Bytescale Upload Widget for jQuery

Beautiful File Upload Widget for jQuery
(With Built-in Cloud Storage)

Twitter URL

Get Started β€” Try on CodePen

Upload Widget Demo

100% Serverless File Upload Widget
Powered by Bytescale

Supports: Image Cropping, Video Previews, Document Previews, Drag & Drop, and more...

Full Documentation β€’ Headless SDK β€’ Media Processing APIs β€’ Storage β€’ CDN


Install via NPM:

npm install jquery@^3.6.0 @bytescale/upload-widget-jquery

Or via YARN:

yarn add jquery@^3.6.0 @bytescale/upload-widget-jquery

Or via a <script> tag:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://js.bytescale.com/upload-widget-jquery/v4"></script>


Option 1) Create an Upload Button

To display a file upload dialog on click β€” Try on CodePen

$(() => {
    // Full Configuration:
    // https://www.bytescale.com/docs/upload-widget#configuration
    apiKey: "free", // Get API keys from: www.bytescale.com
    onComplete: files => {
      if (files.length === 0) {
        console.log('No files selected.')
      } else {
        console.log('Files uploaded:');
        console.log(files.map(f => f.fileUrl));

Option 2) Create a Dropzone Area

To display a file upload dropzone inline on the page β€” Try on CodePen

$(() => {
    // Full Configuration:
    // https://www.bytescale.com/docs/upload-widget#configuration
    apiKey: "free", // Get API keys from: www.bytescale.com
    maxFileCount: 10,
    showFinishButton: true,
    dropzone: {
      width: "600px",
      height: "375px"
    onUpdate: ({ uploadedFiles, pendingFiles, failedFiles }) => {
      const uploadedFileUrls = uploadedFiles.map(x => x.fileUrl).join("\n");
    onComplete: files => {
      if (files.length === 0) {
        alert('No files selected.')
      } else {
        alert(files.map(f => f.fileUrl).join("\n"));

Special behaviour for dropzones:

onComplete only fires if showFinishButton = true (when the user clicks "Finish").

onUpdate must be used when showFinishButton = false.

Default value: showFinishButton = false


The callbacks receive a Array<UploadWidgetResult>:

  fileUrl: "https://upcdn.io/FW25...",   // URL to use when serving this file.
  filePath: "/uploads/example.jpg",      // File path (we recommend saving this to your database).

  accountId: "FW251aX",                  // Bytescale account the file was uploaded to.

  editedFile: undefined,                 // Edited file (for image crops). Same structure as below.

  originalFile: {
    fileUrl: "https://upcdn.io/FW25...", // Uploaded file URL.
    filePath: "/uploads/example.jpg",    // Uploaded file path (relative to your raw file directory).
    accountId: "FW251aX",                // Bytescale account the file was uploaded to.
    originalFileName: "example.jpg",     // Original file name from the user's machine.
    file: { ... },                       // Original DOM file object from the <input> element.
    size: 12345,                         // File size in bytes.
    lastModified: 1663410542397,         // Epoch timestamp of when the file was uploaded or updated.
    mime: "image/jpeg",                  // File MIME type.
    metadata: {
      ...                                // User-provided JSON object.
    tags: [
      "tag1",                            // User-provided & auto-generated tags.

βš™οΈ Configuration

All configuration is optional (except for the apiKey field, which is required).

const options = {
  apiKey: "free",                 // Get API keys from: www.bytescale.com
  locale: myCustomLocale,         // EN_US by default. (See "Localization" section below.)
  maxFileCount: 5,                // Unlimited by default (or 1 if multi: false).
  maxFileSizeBytes: 1024 ** 2,    // Unlimited by default.
  mimeTypes: ["image/*"],         // Unrestricted by default. Supports * wildcard suffix.
  multi: false,                   // False by default.
  onInit: ({                      // Exposes lifecycle methods for the component.
    close,                        // Closes the widget when called.
    reset,                        // Resets the widget when called.
    updateConfig                  // Updates the widget's config by passing a new config
  }) => {},                       // object to the method's first parameter.
  onUpdate: (event) => {          // Called each time the Upload Widget's list of files change.
    // event.pendingFiles         // Array of files that are either uploading or queued.
    // event.failedFiles          // Array of files that failed to upload (due to network or validation reasons).
    // event.uploadedFiles        // Array of files that have been uploaded and not removed.
  onPreUpload: async file => ({
    errorMessage: "Uh oh!",       // Displays this validation error to the user (if set).
    transformedFile: file         // Uploads 'transformedFile' instead of 'file' (if set).
  showFinishButton: true,         // Show/hide the "finish" button in the widget.
  showRemoveButton: true,         // Show/hide the "remove" button next to each file.
  styles: {
    colors: {
      primary: "#377dff",         // Primary buttons & links
      active: "#528fff",          // Primary buttons & links (hover). Inferred if undefined.
      error: "#d23f4d",           // Error messages
      shade100: "#333",           // Standard text
      shade200: "#7a7a7a",        // Secondary button text
      shade300: "#999",           // Secondary button text (hover)
      shade400: "#a5a6a8",        // Welcome text
      shade500: "#d3d3d3",        // Modal close button
      shade600: "#dddddd",        // Border
      shade700: "#f0f0f0",        // Progress indicator background
      shade800: "#f8f8f8",        // File item background
      shade900: "#fff"            // Various (draggable crop buttons, etc.)
    fontFamilies: {
      base: "arial, sans-serif"   // Base font family (comma-delimited).
    fontSizes: {
      base: 16                    // Base font size (px).
  path: {                         // Optional: a string (full file path) or object like so:
    fileName: "Example.jpg",      // Supports path variables (e.g. {ORIGINAL_FILE_EXT}).
    folderPath: "/uploads"        // Please refer to docs for all path variables.
  metadata: {
    hello: "world"                // Arbitrary JSON metadata (saved against the file).
  tags: ["profile_picture"],      // Requires a Bytescale account.
  editor: {
    images: {
      preview: true,              // True by default if cropping is enabled. Previews PDFs and videos too.
      crop: true,                 // True by default.
      cropFilePath: image => {    // Choose the file path used for JSON image crop files.
        const {filePath} = image  // In:  https://www.bytescale.com/docs/types/UploadedFile
        return `${filePath}.crop` // Out: https://www.bytescale.com/docs/types/FilePathDefinition
      cropRatio: 4 / 3,           // Width / Height. Undefined enables freeform (default).
      cropShape: "rect"           // "rect" (default) or "circ".

🏳️ Localization

Default is EN_US:

const myCustomLocale = {
  "error!": "Error!",
  "done": "Done",
  "addAnotherFile": "Add another file...",
  "addAnotherImage": "Add another image...",
  "cancel": "cancel",
  "cancelInPreviewWindow": "Cancel",
  "cancelled!": "cancelled",
  "continue": "Continue",
  "customValidationFailed": "Failed to validate file.",
  "crop": "Crop",
  "finish": "Finished",
  "finishIcon": true,
  "image": "Image",
  "maxFilesReached": "Maximum number of files:",
  "maxImagesReached": "Maximum number of images:",
  "maxSize": "File size limit:",
  "next": "Next",
  "of": "of",
  "orDragDropFile": "...or drag and drop a file.",
  "orDragDropFiles": "...or drag and drop files.",
  "orDragDropImage": "...or drag and drop an image.",
  "orDragDropImages": "...or drag and drop images.",
  "pleaseWait": "Please wait...",
  "removed!": "removed",
  "remove": "remove",
  "skip": "Skip",
  "unsupportedFileType": "File type not supported.",
  "uploadFile": "Upload a File",
  "uploadFiles": "Upload Files",
  "uploadImage": "Upload an Image",
  "uploadImages": "Upload Images",
  "validatingFile": "Validating file..."

🌐 API Support

🌐 File Management APIs

Bytescale provides a wide range of File Management APIs:

🌐 Media Processing APIs (Image/Video/Audio)

Bytescale also provides real-time Media Processing APIs:

Image Processing API (Original Image)

Here's an example using a photo of Chicago:


Image Processing API (Transformed Image)

Using the Image Processing API, you can produce this image:



Bytescale supports two types of authorization:

API Keys

The Bytescale Upload Widget uses the apiKey parameter to authenticate with Bytescale.

With API key auth, the requester has access to the resources available to the API key:

  • Secret API keys (secret_***) have access to all API endpoints (Bytescale JavaScript SDK).

  • Public API keys (public_***) have access to file upload, file download, and file listing API endpoints. File overwrites, file deletes, and all other destructive operations cannot be performed using public API keys. File listing is also disabled by default (but can be changed in the API key's settings).

You must always use public API keys (e.g. public_***) in your client-side code.

Each API key can have its read/write access limited to a subset of files/folders.

JWT Cookies

JWT cookies are optional.

With JWT cookies, the user can download private files directly via the URL, as authorization is performed implicitly via a session cookie. This allows the browser to display private files in <img> and <video> elements.

With JWT cookies, the user can also upload files to locations that aren't otherwise permitted by the API key, but are permitted by the JWT's payload. This is because the Bytescale Upload Widget internally uses the Bytescale JavaScript SDK to perform file uploads, and the Bytescale JavaScript SDK automatically injects the user's JWT into all API requests once the AuthManager.beginAuthSession method has been called.

Note: when using JWT cookies to download files, the ?auth=true query parameter must be added to the URL.

Learn more about the AuthManager and JWT cookies Β»


The Bytescale JavaScript SDK exports a UrlBuilder to construct URLs from filePaths:

import { UrlBuilder } from "@bytescale/sdk";

Recommended: you should always save filePaths to your DB instead of fileUrls.

Raw Files

To get the URL for the uploaded image /example.jpg in its original form, use the following:

// Returns: "https://upcdn.io/1234abc/raw/example.jpg"
  accountId: "1234abc",
  filePath: "/example.jpg"


To resize the uploaded image /example.jpg to 800x600, use the following:

// Returns: "https://upcdn.io/1234abc/image/example.jpg?w=800&h=600"
  accountId: "1234abc",
  filePath: "/example.jpg",
  options: {
    transformation: "image",
    transformationParams: {
      w: 800,
      h: 600

Image Processing API Docs Β»


To transcode the uploaded video /example.mov to MP4/H.264 in HD, use the following:

// Returns: "https://upcdn.io/1234abc/video/example.mov?f=mp4-h264&h=1080"
  accountId: "1234abc",
  filePath: "/example.mov",
  options: {
    transformation: "video",
    transformationParams: {
      f: "mp4-h264",
      h: 1080

Video Processing API Docs Β»


To transcode the uploaded audio /example.wav to AAC in 192kbps, use the following:

// Returns: "https://upcdn.io/1234abc/audio/example.wav?f=aac&br=192"
  accountId: "1234abc",
  filePath: "/example.wav",
  options: {
    transformation: "audio",
    transformationParams: {
      f: "aac",
      br: 192

Audio Processing API Docs Β»


To extract the file document.docx from the uploaded ZIP file /example.zip:

// Returns: "https://upcdn.io/1234abc/archive/example.zip?m=extract&artifact=/document.docx"
  accountId: "1234abc",
  filePath: "/example.zip",
  options: {
    transformation: "archive",
    transformationParams: {
      m: "extract"
    artifact: "/document.docx"

Archive Processing API Docs Β»

πŸ™‹ Can I use my own storage?

Bytescale supports AWS S3, Cloudflare R2, Google Storage, DigitalOcean, and Bytescale Storage.

Bytescale Storage Docs Β»

πŸ‘‹ Create your Bytescale Account

Bytescale is the best way to upload, transform, and serve images, videos, and audio at scale.

Create a Bytescale account Β»

Full Documentation



Package Sidebar


npm i @bytescale/upload-widget-jquery

Weekly Downloads






Unpacked Size

43.5 kB

Total Files


Last publish


  • bytescale