Read image dimensions

Hello, and thanks for the great lib!

Is there a way to access the image dimensions within Uppy without need to go through a Blob -> FileReader -> Image conversion? I was unable to find a width/height metadata fields on the objects returned by the upload-success and complete events.

I’m currently doing this like so:

// convert the blob URL to an object
let objFile = await fetch(elem.preview)
let objBlob = await objFile.blob()

// convert it to a data URI
let reader = new FileReader()
reader.readAsDataURL(objBlob)

reader.onload = e => {
  // retrieve the image dimensions
  let image = new Image()
  image.src = e.target.result

  image.onload = (loadEvent) => {
    // all done
    resolve({
      thumbnail: e.target.result,
      url: elem.uploadURL,
      width: loadEvent.path[0].width,
      height: loadEvent.path[0].height,
      aspectRatio: loadEvent.path[0].width / loadEvent.path[0].height
    })
  }
}

[goto-bus-stop]

Indeed uppy doesn’t have these built in. It would be possible to do with a plugin.

For the Blob/FileReader dance, the easier thing to do is to use URL.createObjectURL, which saves a few steps:

uppy.on('file-added', (file) => {
  const data = file.data // is a Blob instance
  const url = URL.createObjectURL(data)
  const image = new Image()
  image.src = url
  image.onload = () => {
    uppy.setFileMeta(file.id, { width: image.width, height: image.height })
    URL.revokeObjectURL(url)
  }
})

As for the .preview property, it’s already a blob URL, which can be assigned directly to an Image’s .src:

const image = new Image()
image.src = file.preview
image.onload = () => { ... }

Then you do not need the URL.createObjectURL and URL.revokeObjectURL calls.

[HeiVask]

Related: It would be also nice to add the image dimensions as a restriction.