Attachment Picker

ID: attachment-picker

The attachment-picker field type renders a modal picker for an attachment.

Definition configuration:

{
    "type": "object",
    "_attachment": {
        "id": "default"
    }
}

Form configuration:

{
    "type": "attachment-picker"
}

Options

The following options may be specified for the control:

Create a Document with an Attachment

Define a content model definition with some attachment-picker fields:

Preview content model:

Create a content instance:

The document will be created, with the 3 attachments. Note: if there is no attachment with an id of 'default' then there will not be a thumbnail displayed for the document.

Now the document's json looks like this:

{
    "title": "Sample doc",
    "attachment1": {
        "id": "default1",
        "name": "janeausten.jpg",
        "size": 89873,
        "contentType": "image/jpeg"
    },
    "attachment2": {
        "id": "default2",
        "name": "hemingway.jpg",
        "size": 22116,
        "contentType": "image/jpeg"
    },
    "attachment3": {
        "id": "default3",
        "name": "shakespeare.jpg",
        "size": 28573,
        "contentType": "image/jpeg"
    }
}

Replace an Attachment

Go to Edit Properties page and click Upload... button, choose a different file then save:

Now the attachment is replaced and the JSON is updated with the new attachment's information:

{
    "title": "Sample doc",
    "attachment1": {
        "id": "default1",
        "name": "janeausten.jpg",
        "size": 89873,
        "contentType": "image/jpeg"
    },
    "attachment2": {
        "id": "default2",
        "name": "hemingway.jpg",
        "size": 22116,
        "contentType": "image/jpeg"
    },
    "attachment3": {
        "id": "default3",
        "name": "carlsagan.jpg",
        "size": 20989,
        "contentType": "image/jpeg"
    }
}

Delete an Attachment

Go to Edit Properties page and click Clear button, then Save. The attachment is removed and the document icon. Note: if there is no attachment with an id of 'default' then there will not be a thumbnail displayed for the document.

Content Modeling Example

Suppose you define a new content type (such as custom:thing) with the following schema:

{
    "title": "Thing",
    "type": "object",
    "properties": {
        "title": {
            "type": "string"
        },
        "file": {
            "type": "object",
            "_attachment": {
                "id": "file"
            }
        }
    }
}

You can then define the form to customize the attachment field.

{
    "fields": {
        "title": {
            "label": "Title"
        },
        "file": {
            "label": "File",
            "type": "attachment-picker",
            "picker": {
                "fileTypes": [
                    "jpeg",
                    "jpg"
                ]
            }
        }
    },
    "title": "Default Form"
}