Best JavaScript Image Upload Libraries Compared

The short answer: most JavaScript image upload work is four jobs: show a preview, shrink the file before it leaves the browser, fix or edit the image, and send it somewhere. upup and Uppy cover previews, in-browser shrinking and upload straight to your own S3-compatible bucket: Uppy as separate plugins, upup as pipeline options, with upup's editor in its React and Preact packages only. FilePond covers the four jobs with plugins and posts to your own server. Uploadcare does it as a hosted service. browser-image-compression and Compressor.js do only the shrinking.

Try it first: the live vanilla JS demo uploads a real file from your browser, and the Vanilla JS quickstart gets it running on your page. The image options below work the same in the React, Vue, Svelte, Angular and Preact packages.

This page compares seven options on the image-specific features that usually decide the choice, then shows how to pick. For the general upload features (cloud drives, resumable uploads, hosting model), see the vanilla JavaScript roundup.

Comparison table

"Not documented" means the library's official docs we read do not mention the feature, not that it can never be done. Test with your own files.

What each library does with images

upup

upup's image handling is a pipeline of opt-in steps that run before the upload starts, on a Web Worker when one is available:

• Previews: thumbnailGenerator adds a small JPEG thumbnail (320 px by default) to each image's metadata as a data URL, and the allowPreview prop (on by default) shows an expanded preview for files the browser can render.
• Resize and compress: imageCompression caps the longest edge at 1920 px and re-encodes at quality 0.82 by default. An optional maxSizeMB target retries at lower quality. Animated GIF, WebP and APNG files are skipped so they keep their frames. See client-side image compression.
• HEIC: heicConversion decodes iPhone HEIC and HEIF photos to JPEG with libheif-js, an optional dependency you install yourself. See HEIC to JPEG.
• EXIF: stripExifData removes EXIF metadata, including GPS location, by re-encoding the image. Compression's own re-encode also drops it when it replaces the file. Animated GIF, WebP and APNG are skipped, so any EXIF in them stays; check metadata.metadataStripSkipped if that matters.
• Crop and edit: the image editor (crop, rotate, flip, annotate, filters, watermark) ships in @useupup/react and @useupup/preact only. The vanilla, Vue, Svelte and Angular packages stub it.
• Storage: files go directly to your S3-compatible bucket with presigned URLs.

Uppy

Uppy splits image features into plugins. The Dashboard includes the Thumbnail Generator (200 px wide by default). @uppy/compressor wraps Compressor.js; its default quality is 0.6, which applies to JPEG and WebP images. @uppy/image-editor lets users crop, rotate, zoom and flip, and is built on Cropper.js. The pages we read do not mention HEIC; a community plugin, uppy-heic (last released in 2022), converts it. Uploads reach S3 through the AWS S3 plugin, which needs a signing endpoint or Companion, just as upup needs a presign endpoint. See upup vs Uppy.

FilePond

FilePond's image features are separate MIT-licensed plugins. The image preview plugin renders reduced-size previews, and the EXIF orientation plugin lets previews and transforms correct the rotation phone cameras record in JPEG metadata. The image transform plugin applies crop and resize edits in the browser before upload, can output JPEG or PNG, and strips JPEG EXIF data by default. The image edit plugin connects an editor, including Pintura, a separate paid product from the same company. FilePond posts to your own server endpoint and has no built-in S3 signing. See upup vs FilePond.

Dropzone.js

Dropzone.js creates image thumbnails by default (120 by 120 px, cropped) and can resize images before they upload with resizeWidth, resizeHeight, resizeQuality (0.8 by default) and resizeMimeType. It has no editor, and it posts each file to a URL you configure.

Uploadcare File Uploader

Uploadcare's File Uploader has a built-in cloud image editor, and an image-shrink option that resizes images in the browser before upload with a value such as 1600x1600 95%. It runs on a canvas, so it only handles formats the browser supports natively, skips images from URL or social sources, and copies EXIF data over unchanged, including orientation and geolocation. Files are stored by Uploadcare, which also transforms images on the fly through its CDN. The service is paid, with a free plan limited to personal use; see their pricing page for current terms.

browser-image-compression and Compressor.js

These two are compression libraries, not uploaders. Both are MIT-licensed and run in the browser.

• browser-image-compression takes a File and returns a smaller one. Options include maxSizeMB, maxWidthOrHeight and useWebWorker (on by default), and preserveExif is off by default. It documents JPEG, PNG, WebP and BMP input.
• Compressor.js exposes quality (0.8 by default), maxWidth, maxHeight and mimeType. It reads the EXIF orientation of JPEGs and rotates them accordingly (checkOrientation, on by default), drops EXIF data unless you set retainExif, and returns the original if the result would be larger (strict).

Pair either with your own file input and upload code, or with an uploader that accepts a pre-processed File.

Looking for a Pintura alternative?

Pintura, from the makers of FilePond, is a paid image editor that offers cropping with fixed aspect ratios, rotate and flip, filters, color adjustments, annotation, stickers and watermarks, with FilePond, Dropzone and Uppy integrations. Check its pricing and license pages for current terms. If you want an open-source editor instead:

• Uppy's Image Editor is MIT-licensed and covers crop, rotate, zoom and flip.
• upup's image editor adds annotation, filters and watermarks, but only in the React and Preact packages.
• Uploadcare's editor is included in its hosted service.

How to choose

• You want previews, resizing and an upload to your own bucket from one library: upup or Uppy.
• You need HEIC photos from iPhones to arrive as JPEG: upup. With the others, add a separate converter and test it with your own files.
• You need users to crop or edit before upload in plain JavaScript: Uppy or Uploadcare. upup's editor needs its React or Preact package.
• You already post to your own server endpoint: FilePond or Dropzone.js. FilePond has the richer image plugin set.
• You do not want to run storage: Uploadcare, then check its pricing page against your expected volume.
• You only need smaller files, with your own UI: browser-image-compression or Compressor.js.
• Privacy matters: decide where EXIF data is removed. upup's stripExifData, Compressor.js's default and FilePond's transform plugin strip it; Uploadcare's image-shrink keeps it. upup skips animated GIF, WebP and APNG, so EXIF in those stays.

Minimal upup example

Install the package, plus the optional HEIC decoder if you want HEIC conversion:

npm i @useupup/vanilla libheif-js

Mount the uploader with the image options switched on:

import { createUploader } from '@useupup/vanilla'
import '@useupup/vanilla/styles'

const uploader = createUploader('#uploader', {
    provider: 'aws',
    uploadEndpoint: '/api/upload-token',
    imageCompression: true,
    heicConversion: true,
    thumbnailGenerator: true,
    stripExifData: true,
})

The Vanilla JS quickstart covers the endpoint that returns the presigned URL, and File Processing lists every pipeline step and its order.

FAQ

What is the best JavaScript image upload library?

For a ready-made image uploader that resizes in the browser and sends files to your own S3-compatible bucket, upup or Uppy. For previews, resizing and cropping on top of your own server endpoint, FilePond with its image plugins. For no storage setup, Uploadcare's hosted service. If you only need to shrink images and already have the UI, browser-image-compression or Compressor.js.

How do I compress images in the browser before upload?

Re-encode them through a canvas before the request starts. upup does this with the imageCompression option, Uppy with its Compressor plugin, FilePond with the image transform plugin, and Dropzone.js with resizeWidth and resizeHeight. browser-image-compression and Compressor.js do only this step and leave the uploader to you.

Which libraries convert HEIC photos to JPEG in the browser?

upup converts HEIC and HEIF to JPEG with the heicConversion option, using the optional libheif-js package. None of the other libraries here document a built-in in-browser HEIC converter. Uppy has a community plugin, uppy-heic, and Uploadcare accepts HEIC and converts it on its CDN after upload, not in the browser.

Which image upload libraries include an image editor?

Uppy (Image Editor plugin, crop, rotate, zoom and flip) and Uploadcare (a built-in cloud image editor) include one. FilePond connects to editors through its image edit plugin, and the full editor it pairs with, Pintura, is a paid product. upup's editor covers crop, rotate, flip, annotation, filters and watermarks, but ships in the React and Preact packages only.

Are these image upload libraries free?

upup, Uppy, FilePond (including its image plugins), Dropzone.js, browser-image-compression and Compressor.js are MIT-licensed. Pintura is a separate paid product. Uploadcare's File Uploader library is open source, but the hosted service behind it is paid, with a free plan limited to personal use.

Related comparisons

• JavaScript file upload libraries compared
• Best vanilla JavaScript file upload libraries
• upup vs Uppy
• upup vs FilePond
• Client-side image compression
• Convert HEIC to JPEG in the browser