# File selector

The usage of File selector is almost same as xbutton. It inherits from the XbuttonComponent and supports the accept property and the change event.

# Code example

<html>
    <template id="layout-template">
        <webpdf>
            <div class="file-selector-container">
                <!-- accepts all type of files -->
                <file-selector accept="*.*">Select all type of file</file-selector>
                <!-- accepts PDF files -->
                <file-selector accept=".pdf">Select PDF</file-selector>
                <!-- accepts image files -->
                <file-selector accept=".png;.jpg;.bmp" @controller="custom:SelectSingleFileController">Select Image</file-selector>
                <!-- select multiple files -->
                <file-selector @controller="custom:SelectMultipleFileController" accept="image/*" multiple>Select multiple files</file-selector>
                <!-- use in dropdown -->
                <dropdown style="width: auto" text="dropdown with file selector" separate="false">
                    <file-selector accept=".xfdf;.fdf" text="import FDF/XFDF" icon-class="fv__icon-sidebar-import-comment"></file-selector>
                </dropdown>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<style>
    .file-selector-container {
        display: flex;
        flex-wrap: wrap;
    }
    .file-selector-container > .fv__ui-fileselector {
        flex: 1 1 auto;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom', [])
        .controller('SelectSingleFileController', {
            handle: function(file) {
                alert('Selected file: ' + file.name);
            }
        })
        .controller('SelectMultipleFileController', {
            handle: function(files) {
                alert('Selected files: \r\n' + files.map(it => it.name));
            }
        })
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: CustomAppearance,
            addons: []
    });
</script>

# API

You may check xbutton for more details.

# Events

Name	Description	Example	Version
change	Triggered when the button is clicked. If the file selector turns on multiple selection, file is an array, otherwise it is a single file instance	`fileSelector.on('change', (file) => { if(Array.isArray(file)) {} else {} })`	7.4

← Ribbon button component Dropdown component →