transloadit/uppy · warning · Error

could not extract blob, probably an old browser

Error message

could not extract blob, probably an old browser

What it means

Fallback path in canvasToBlob for browsers lacking canvas.toBlob: it converts via canvas.toDataURL + dataURItoBlob, and if that yields null the blob could not be extracted. The message attributes it to an 'old browser' since only legacy engines take this branch.

Source

Thrown at packages/@uppy/thumbnail-generator/src/index.ts:74

  if (canvas.toBlob) {
    return new Promise<Blob | null>((resolve) => {
      canvas.toBlob(resolve, type, quality)
    }).then((blob) => {
      if (blob === null) {
        throw new Error(
          'cannot read image, probably an svg with external resources',
        )
      }
      return blob
    })
  }
  return Promise.resolve()
    .then(() => {
      return dataURItoBlob(canvas.toDataURL(type, quality), {})
    })
    .then((blob) => {
      if (blob === null) {
        throw new Error('could not extract blob, probably an old browser')
      }
      return blob
    })
}

function rotateImage(image: HTMLImageElement, translate: Rotation) {
  let w = image.width
  let h = image.height

  if (translate.deg === 90 || translate.deg === 270) {
    w = image.height
    h = image.width
  }

  const canvas = document.createElement('canvas')
  canvas.width = w
  canvas.height = h

View on GitHub (pinned to 5d4dedd02a)

Solutions

1. Detect lack of canvas.toBlob up front and disable the ThumbnailGenerator plugin for that environment
2. Test on the actual embedded WebView and plan a polyfill (e.g. toBlob polyfill via toDataURL)
3. Catch thumbnail errors and provide a generic file-type icon instead
4. Upgrade the embedded browser/WebView where possible

Example fix

// before
new ThumbnailGenerator(uppy) // old WebView -> 'could not extract blob, probably an old browser'

// after
if (typeof HTMLCanvasElement.prototype.toBlob === 'function') {
  uppy.use(ThumbnailGenerator, { thumbnailWidth: 200 })
}

const supportsCanvasToBlob =
  typeof HTMLCanvasElement.prototype.toBlob === 'function'
if (supportsCanvasToBlob) uppy.use(ThumbnailGenerator, { thumbnailWidth: 200 })

const canGenerateThumbnails = (): boolean =>
  typeof HTMLCanvasElement !== 'undefined' &&
  typeof HTMLCanvasElement.prototype.toBlob === 'function'

try { await plugin.requestThumbnail(file) }
catch (err) { if (/old browser/.test(err.message)) useFallbackIcon(file) }

When it happens

Trigger: createThumbnail running in a browser without canvas.toBlob where dataURItoBlob returns null (unparseable data URL, e.g. 'data:,' produced for a tainted canvas).

Common situations: Legacy WebViews (old Android, embedded browsers, enterprise kiosk builds); the same tainting conditions as 132 but on the fallback code path.

Related errors

• cannot read image, probably an svg with external resources
• ThumbnailGenerator: The `lazy` and `waitForThumbnailsBeforeU
• File data is empty
• Failed to get canvas context

AI-assisted analysis of transloadit/uppy@5d4dedd02a (2026-08-28). Data as JSON: /api/errors/3e1c5ec36ddf864f. Report an issue: GitHub.