Content block
Compact documents
Files and a drop zone inside an overlay, with field and section labels.
- Copy the bindings from
- app/
features/ contracts/ routes/ dashboard/ contracts.checkout-preview/ components/ document-files-section.tsx - Route
- /
dashboard/ accounts/ :acctId/ sites/ :siteId/ submitted-forms/ :kind
Ordered uploads
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentList
items={[
{
id: 'medical',
name: 'Vaccination record.pdf',
caption: '124 KB',
},
{
id: 'care',
name: 'Home care instructions.pdf',
source: 'Included with Adoption Contract. Manage this file in contract settings.',
},
]}
onReorder={onReorder}
/>
</Form>Empty
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentList
items={[]}
onRemove={onRemove}
description="These documents will be sent after the contracts are signed."
upload={<FormFile
name="emptyDocuments"
handleAddFiles={handleAddFiles}
/>}
/>
</Form>Popover
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentList
presentation="popover"
items={[
{
id: 'one',
name: 'Adoption packet.pdf',
},
]}
onRemove={onRemove}
upload={<FormFile
name="oneDocument"
handleAddFiles={handleAddFiles}
/>}
/>
</Form>Field label, inherited and upload states
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentList
labelVariant="field"
items={[
{
id: 'medical',
name: 'Vaccination record.pdf',
caption: '124 KB',
},
{
id: 'care',
name: 'Home care instructions.pdf',
source: 'Included with Adoption Contract. Manage this file in contract settings.',
},
{
id: 'uploading',
name: 'Lab results.pdf',
status: 'Uploading…',
},
{
id: 'failed',
name: 'Discharge instructions.pdf',
error: 'Upload failed. Try again.',
},
]}
description="These documents will be sent after the contracts are signed."
onRemove={onRemove}
upload={<FormFile
name="documents"
handleAddFiles={handleAddFiles}
/>}
/>
</Form>Search and count
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentList
items={[
{
id: '0',
name: 'Medical record 1.pdf',
},
{
id: '1',
name: 'Medical record 2.pdf',
},
{
id: '2',
name: 'Medical record 3.pdf',
},
{
id: '3',
name: 'Medical record 4.pdf',
},
{
id: '4',
name: 'Medical record 5.pdf',
},
{
id: '5',
name: 'Medical record 6.pdf',
},
{
id: '6',
name: 'Medical record 7.pdf',
},
{
id: '7',
name: 'Medical record 8.pdf',
},
{
id: '8',
name: 'Medical record 9.pdf',
},
{
id: '9',
name: 'Medical record 10.pdf',
},
]}
upload={<FormFile
name="manyDocuments"
handleAddFiles={handleAddFiles}
/>}
/>
</Form>