Skip to main content

​
Overview

The ImageItem type represents a single image in the annotation dataset. It contains the original file, a blob URL for display, all associated annotations, and the image dimensions.

​
Type Definition

export type ImageItem = {
  id: string
  file: File
  url: string
  annotations: AnnotationBox[]
  width?: number
  height?: number
}

​
Properties

​
id
string
required
Unique identifier for the image. Generated using a combination of filename, last modified timestamp, and a UUID:
`${file.name}-${file.lastModified}-${crypto.randomUUID()}`
​
file
File
required
The original File object from the user’s file input. Contains the actual image data.
​
url
string
required
A blob URL created using URL.createObjectURL(file) for displaying the image in the browser. Must be revoked when the image is removed.
​
annotations
AnnotationBox[]
required
Array of all bounding box annotations associated with this image.
​
width
number
The natural width of the image in pixels. Populated after the image loads.
​
height
number
The natural height of the image in pixels. Populated after the image loads.

​
Usage Example

Creating new image items when files are selected: 
const next = onlyImages.map((file) => ({
  id: `${file.name}-${file.lastModified}-${crypto.randomUUID()}`,
  file,
  url: URL.createObjectURL(file),
  annotations: [],
}))

setImages((previous) => {
  const updated = [...previous, ...next]
  if (!currentId && updated.length > 0) setCurrentId(updated[0].id)
  return updated
})
Updating dimensions when the image loads: 
onLoad={(event) => {
  const imageWidth = event.currentTarget.naturalWidth
  const imageHeight = event.currentTarget.naturalHeight

  setImages((previous) =>
    previous.map((image) => {
      if (image.id !== currentImage.id) return image
      if (image.width === imageWidth && image.height === imageHeight) return image
      return {
        ...image,
        width: imageWidth,
        height: imageHeight,
      }
    }),
  )
}}

​
Memory Management

Blob URLs created with URL.createObjectURL() must be manually revoked to prevent memory leaks: 
useEffect(() => {
  return () => {
    for (const image of imagesRef.current) {
      URL.revokeObjectURL(image.url)
    }
  }
}, [])
  • AnnotationBox - Individual annotations within the image
  • CsvRow - Flattened format combining image and annotation data