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

FileSelectButton

configuration

Controls the visibility and configuration of the File Select button in the end affix. When enabled, users can attach files to their prompts.

fileSelectButton

Boolean|Object

Default: false

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: true,
    placeholder: "Attach files...",
    fileSelect: function(e) {
        console.log("Files selected:", e.files);
    }
});
</script>

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        multiple: true,
        accept: "image/*",
        restrictions: {
            allowedExtensions: [".jpg", ".png", ".gif"],
            maxFileSize: 5242880
        }
    },
    placeholder: "Attach images (max 5MB)..."
});
</script>

fileSelectButton.accept

String

Defines the file types that can be selected using the file input.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        accept: "image/*"
    },
    placeholder: "Select images only..."
});
</script>

fileSelectButton.enable

Boolean

Enables or disables the File Select button.

Default: true

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        enable: false
    },
    placeholder: "File selection disabled..."
});
</script>

fileSelectButton.fillMode

String

Defines the fill mode for the File Select button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        fillMode: "flat"
    },
    placeholder: "Flat file select button..."
});
</script>

fileSelectButton.icon

String

Defines the font icon name for the File Select button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        icon: "folder-open"
    },
    placeholder: "Custom file icon..."
});
</script>

fileSelectButton.multiple

Boolean

Enables multiple file selection.

Default: false

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        multiple: true
    },
    placeholder: "Select multiple files..."
});
</script>

fileSelectButton.restrictions

Object

Defines file restrictions for the file selection.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        restrictions: {
            allowedExtensions: [".pdf", ".doc", ".docx"],
            maxFileSize: 10485760
        }
    },
    placeholder: "Select documents..."
});
</script>

fileSelectButton.rounded

String

Defines the border radius for the File Select button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        rounded: "full"
    },
    placeholder: "Fully rounded file button..."
});
</script>

fileSelectButton.size

String

Defines the size of the File Select button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        size: "large"
    },
    placeholder: "Large file button..."
});
</script>

fileSelectButton.themeColor

String

Defines the theme color for the File Select button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    fileSelectButton: {
        themeColor: "primary"
    },
    placeholder: "Primary colored file button..."
});
</script>

Related Members