New to Kendo UI for jQuery? Start a free 30-day trial

FileAttachment

configuration

Configures the file select button (attachment button) in the message input area. Can be set to:

true: Shows the button with default settings
false: Hides the button completely (does not render)
Object: Shows the button with custom configuration

fileAttachment

Boolean|Object

Default: true

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: false,
    authorId: "user"
});
</script>

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        icon: "attachment",
        fillMode: "flat",
        size: "medium",
        multiple: true,
        accept: "image/*,.pdf,.doc,.docx"
    },
    authorId: "user"
});
</script>

fileAttachment.accept

String

The accept attribute for the file input, specifying which file types are allowed.

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        accept: "image/*,.pdf"
    },
    authorId: "user"
});
</script>

fileAttachment.fillMode

String

The fill mode for the button (e.g., "flat", "solid", "outline").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        fillMode: "solid"
    },
    authorId: "user"
});
</script>

fileAttachment.icon

String

The icon name for the file select button.

Default: "attachment"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        icon: "upload"
    },
    authorId: "user"
});
</script>

fileAttachment.multiple

Boolean

Whether to allow multiple file selection.

Default: true

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        multiple: false
    },
    authorId: "user"
});
</script>

fileAttachment.restrictions

Object

File restrictions configuration.

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        restrictions: {
            allowedExtensions: [".jpg", ".png", ".pdf"],
            maxFileSize: 10485760,
            minFileSize: 1024
        }
    },
    authorId: "user"
});
</script>

fileAttachment.rounded

String

The border radius for the button (e.g., "small", "medium", "large", "full").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        rounded: "medium"
    },
    authorId: "user"
});
</script>

fileAttachment.size

String

The size of the button (e.g., "small", "medium", "large").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        size: "medium"
    },
    authorId: "user"
});
</script>

fileAttachment.themeColor

String

The theme color for the button (e.g., "base", "primary", "secondary").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    fileAttachment: {
        themeColor: "primary"
    },
    authorId: "user"
});
</script>

Related Members