validate image size is a multiple of block size

Author: david-crespo

app/components/form/fields/FileField.tsx

@@ -9,7 +9,9 @@ import {
   useController,
   type Control,
   type FieldPath,
+  type FieldPathValue,
   type FieldValues,
+  type Validate,
 } from 'react-hook-form'
 
 import { FieldLabel } from '~/ui/lib/FieldLabel'
@@ -30,6 +32,7 @@ export function FileField<
   accept,
   description,
   disabled,
+  validate,
 }: {
   id: string
   name: TName
@@ -40,11 +43,12 @@ export function FileField<
   accept?: string
   description?: string | React.ReactNode
   disabled?: boolean
+  validate?: Validate<FieldPathValue<TFieldValues, TName>, TFieldValues>
 }) {
   const {
     field: { value: _, ...rest },
     fieldState: { error },
-  } = useController({ name, control, rules: { required } })
+  } = useController({ name, control, rules: { required, validate } })
   return (
     <div className="max-w-lg">
       <div className="mb-2">

app/components/form/fields/RadioField.tsx

@@ -13,6 +13,7 @@ import {
   type FieldPath,
   type FieldValues,
   type PathValue,
+  type RegisterOptions,
 } from 'react-hook-form'
 
 import { FieldLabel } from '~/ui/lib/FieldLabel'
@@ -41,6 +42,9 @@ export type RadioFieldProps<
   units?: string
   control: Control<TFieldValues>
   items: { value: PathValue<TFieldValues, TName>; label: string }[]
+  /** Forwarded to react-hook-form's `useController`; use `deps` to trigger
+   * validation on other fields when this one changes. */
+  rules?: Pick<RegisterOptions<TFieldValues, TName>, 'deps'>
 } & (PathValue<TFieldValues, TName> extends string // this is wild lmao
     ? { parseValue?: never }
     : {
@@ -63,10 +67,11 @@ export function RadioField<
   control,
   items,
   parseValue,
+  rules,
   ...props
 }: RadioFieldProps<TFieldValues, TName>) {
   const id = useId()
-  const { field } = useController({ name, control })
+  const { field } = useController({ name, control, rules })
   return (
     <div>
       <div className="mb-2">

app/forms/image-upload.tsx

@@ -495,7 +495,9 @@ export default function ImageCreate() {
     setAllDone(true)
   }
 
-  const form = useForm({ defaultValues })
+  // onChange mode so the file-size / block-size cross-validation surfaces
+  // inline as soon as the user picks a file or changes block size
+  const form = useForm({ defaultValues, mode: 'onChange' })
   const file = form.watch('imageFile')
   const blockSize = form.watch('blockSize')
 
@@ -590,6 +592,8 @@ export default function ImageCreate() {
           units="Bytes"
           control={form.control}
           parseValue={(val) => parseInt(val, 10) as BlockSize}
+          // re-run imageFile validation when block size changes
+          rules={{ deps: ['imageFile'] }}
           items={[
             { label: '512', value: 512 },
             { label: '2048', value: 2048 },
@@ -605,6 +609,13 @@ export default function ImageCreate() {
           label="Image file"
           required
           control={form.control}
+          // Crucible rejects bulk-write imports whose total size isn't a
+          // multiple of the block size, so catch it before the long upload.
+          validate={(f, { blockSize }) => {
+            if (f && f.size % blockSize !== 0) {
+              return `File size must be a multiple of the block size (${blockSize} bytes)`
+            }
+          }}
         />
         {imageValidation && <BootableNotice {...imageValidation} />}
       </div>

test/e2e/image-upload.e2e.ts

@@ -101,6 +101,52 @@ test.describe('Image upload', () => {
     // TODO: changing name alone should cause error to disappear
   })
 
+  test('block size validation', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(browserName === 'webkit', 'safari. stop this')
+
+    await page.goto('/projects/mock-project/images-new')
+
+    await page.fill('role=textbox[name="Name"]', 'new-image')
+    await page.fill('role=textbox[name="Description"]', 'image description')
+    await page.fill('role=textbox[name="OS"]', 'Ubuntu')
+    await page.fill('role=textbox[name="Version"]', 'Dapper Drake')
+
+    const sideModal = page.getByRole('dialog', { name: 'Upload image' })
+    const uploadError = sideModal.getByText(/must be a multiple of the block size/i)
+    const submit = page.getByRole('button', { name: 'Upload image' })
+    const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
+
+    // 1000 bytes is not a multiple of any supported block size (512/2048/4096)
+    await page.getByLabel('Image file').setInputFiles({
+      name: 'my-image.iso',
+      mimeType: 'application/octet-stream',
+      buffer: Buffer.alloc(1000, 'a'),
+    })
+
+    await expect(uploadError).toBeVisible()
+
+    // clicking submit does nothing — validation blocks it and the progress
+    // modal never opens
+    await submit.click()
+    await expect(progressModal).toBeHidden()
+    await expect(uploadError).toBeVisible()
+
+    // replace with an aligned file — error clears
+    await page.getByLabel('Image file').setInputFiles({
+      name: 'my-image.iso',
+      mimeType: 'application/octet-stream',
+      buffer: Buffer.alloc(2048, 'a'),
+    })
+
+    await expect(uploadError).toBeHidden()
+
+    // switching block size to one that no longer divides the file brings it
+    // back (exercises the cross-field `deps` re-validation path)
+    await page.getByLabel('4096').click()
+    await expect(uploadError).toBeVisible()
+  })
+
   test('form validation', async ({ page, browserName }) => {
     // eslint-disable-next-line playwright/no-skipped-test
     test.skip(browserName === 'webkit', 'safari. stop this')