<div class="btn btn-success fileup-btn">
            Select file
            <input type="file" id="upload1">
        </div>

        <div id="upload1-queue""></div>


        <script>
            fileUp.create({
                url: '/file/upload',
                input: 'upload1',
                queue: 'upload1-queue',
                onSuccess: function(file, response) {
                    alert('Upload success');
                },
                onError: function(errorType, options) {
                    alert('Upload error');
                }
            });
        </script>

        <div id="multiple">
            <div class="btn btn-success fileup-btn">
                Select files
                <input type="file" id="upload2" multiple>
            </div>

            <button onclick="fileUp.get('multiple').uploadAll()"
                    class="btn btn-link" type="button" style="display: none">
                Upload all
            </button>
            <button onclick="fileUp.get('multiple').removeAll()"
                    class="btn btn-link" type="button" style="display: none">
                Remove all
            </button>

            <div id="upload2-queue"></div>
        </div>

        <script>
            fileUp.create({
                id: 'multiple',
                url: '/file/upload',
                input: 'upload2',
                queue: 'upload2-queue',
                lang: 'en',
                onSelect: function(file) {
                    $('#multiple button').show();
                },
                onRemove: function(file) {
                    if (Object.keys(this.getFiles()).length === 0) {
                        $('#multiple button').hide();
                    }
                },
                onSuccess: function(file, response) {
                    alert('Upload success');
                },
                onError: function(errorType, options) {
                    alert('Upload error');
                }
            });
        </script>

        <div class="btn btn-success fileup-btn">
            Select images
            <input type="file" id="upload3" multiple accept="image/*">
        </div>

        <div id="upload3-queue"></div>


        <script>
            fileUp.create({
                url: '/file/upload',
                input: 'upload3',
                queue: 'upload3-queue',
                autostart: true,
                filesLimit: 3,
                sizeLimit: 1048576 // 1 Mb
            });
        </script>

    <input type="file" id="upload4" multiple style="display: none">

    <div id="upload4-dropzone" class="fileup-dropzone p-4 d-inline-block text-primary-emphasis fs-5 rounded-4 text-center">
        <i class="bi bi-folder2-open"></i> Drop your files here or click
        <div class="fs-6 mt-2">Maximum file size 50Mb</div>
    </div>

    <div id="upload4-queue"></div>

    <script>
        let fileUpDrop = fileUp.create({
            url: '/file/upload',
            input: 'upload4',
            queue: 'upload4-queue',
            dropzone: 'upload4-dropzone',
        })

        fileUpDrop.on('load_success', function(file, response) {
            alert('Upload success');
        });
        fileUpDrop.on('error', function(errorType, options) {
            alert('Upload error');
        });

        fileUpDrop.on('dragEnter', function(event) {
            console.log('dragEnter');
        });
        fileUpDrop.on('dragLeave', function(event) {
            console.log('dragLeave');
        });
        fileUpDrop.on('dragEnd', function(event) {
            console.log('dragEnd');
        });
    </script>

        <div class="btn btn-success fileup-btn">
            Select files
            <input type="file" id="upload5" multiple>
        </div>

        <div id="upload5-queue"></div>

        <script>
            fileUp.create({
                url: '/file/upload',
                input: 'upload5',
                queue: 'upload5-queue',
                files: [
                    {
                        name: 'Cat.jpg',  // required
                        size: 254361',
                        urlPreview: 'src/img/preview/cat.jpg',
                        urlDownload: 'img/cat.jpg',
                    },
                    {
                        name: 'Flower.jpg',  // required
                        size: 924160,
                        urlPreview: 'src/img/preview/flower.jpg',
                        urlDownload: 'img/flower.jpg',
                    },
                    {
                        name: 'FileUp.zip',
                        size: 23040,
                        urlDownload: 'https://github.com/n2ref/fileup/archive/master.zip'
                    }
                ]
            });
        </script>

        <div class="fileup-theme2">
            <div class="btn btn-btn-success fileup-btn">
                Select files
                <input type="file" id="upload6" multiple>
            </div>

            <div id="upload6-queue" class="d-flex flex-wrap gap-2 mt-3"></div>
        </div>


        <script>
            fileUp.create({
                url: '/file/upload',
                input: 'upload6',
                queue: 'upload6-queue',
                files: [
                    {
                        name: 'Cat.jpg', // required
                        size: 254361,
                        urlPreview: 'src/img/preview/cat.jpg',
                        urlDownload: 'img/cat.jpg',
                    },
                    {
                        name: 'Flower.jpg', // required
                        size: 924160,
                        urlPreview: 'src/img/preview/flower.jpg',
                        urlDownload: 'img/flower.jpg',
                    },
                    {
                        name: 'FileUp.zip'
                    }
                ],
                templateFile:
                    '<div style="width:125px" class="fileup-file [TYPE] mb-2 p-1 d-flex flex-column gap-2 bg-light border border-secondary-subtle rounded rounded-1">' +
                        '<div class="fileup-preview">' +
                            '<img src="[PREVIEW_SRC]" alt="[NAME]" class="border rounded"/>' +
                            '<i class="fileup-icon fs-4 text-secondary"></i>' +
                        '</div>' +
                        '<div class="flex-fill">' +
                            '<div class="fileup-description">' +
                                '<span class="fileup-name">[NAME]</span> ' +
                                '<small class="fileup-size text-nowrap text-secondary">([SIZE])</small>' +
                            '</div>' +
                            '<div class="fileup-controls mt-1 d-flex gap-2">' +
                                '<span class="fileup-remove" title="[REMOVE]">✕</span>' +
                                '<span class="fileup-upload link-primary">[UPLOAD]</span>' +
                                '<span class="fileup-abort link-primary" style="display:none">[ABORT]</span>' +
                            '</div>' +
                            '<div class="fileup-result"></div>' +
                            '<div class="fileup-progress progress mt-2 mb-1">' +
                                '<div class="fileup-progress-bar progress-bar"></div>' +
                            '</div>' +
                        '</div>' +
                    '</div>'
            });
        </script>