Foxit Developer

File selector ​

The file selector works like xbutton: it extends XbuttonComponent, supports the accept attribute, and fires a change event.

Code example ​

html
<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 ​

For details, see xbutton.

Events ​

NameDescriptionExampleVersion
changeFired after the user selects files; with multiple, the callback receives an array, otherwise a single FilefileSelector.on('change', (file) => { if(Array.isArray(file)) {} else {} })7.4