Content block

Image grid

Ordered photo thumbnails with uploading, removal, and empty states.

Copy the bindings from
app/features/animals/routes/dashboard/animals.group.id.edit/components/animal-images-section.tsx
Route
/dashboard/accounts/:acctId/sites/:siteId/animals/:group/:id/edit
Empty
No images yet. Drop one below to get started.
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <ImageGridUploader
    value={[]}
    imagesBaseUrl="/images"
    onChange={onChange}
  />
</Form>
One
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <ImageGridUploader
    value={[
      'cedar',
    ]}
    imagesBaseUrl="/images"
    urlById={new Map([
      [
        'cedar',
        '/img/dog-lover.png',
      ],
      [
        'brie',
        '/img/dog-lover.png',
      ],
      [
        'cleo',
        '/img/dog-lover.png',
      ],
    ])}
    onChange={onChange}
  />
</Form>
Many
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <ImageGridUploader
    value={[
      'cedar',
      'brie',
      'cleo',
    ]}
    imagesBaseUrl="/images"
    urlById={new Map([
      [
        'cedar',
        '/img/dog-lover.png',
      ],
      [
        'brie',
        '/img/dog-lover.png',
      ],
      [
        'cleo',
        '/img/dog-lover.png',
      ],
    ])}
    onChange={onChange}
  />
</Form>
Read only
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <ImageGridUploader
    value={[
      'cedar',
      'brie',
      'cleo',
    ]}
    imagesBaseUrl="/images"
    urlById={new Map([
      [
        'cedar',
        '/img/dog-lover.png',
      ],
      [
        'brie',
        '/img/dog-lover.png',
      ],
      [
        'cleo',
        '/img/dog-lover.png',
      ],
    ])}
    onChange={onChange}
    readOnly
  />
</Form>