# # 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