CKfinder multiple image upload without CKEditor

Question

I am using the ckfinder modal without CKEditor to upload multiple files to the form section.

I used the code provided in the documentation section,

CKfinder modal opens as expected, selected multiple file but i couldn't able to get all the images url. The response i got only the first image.

window.CKFinder = {
        _popupOptions: {
            'popup-1-config': { // Config ID for first popup
                chooseFiles: true,
                onInit: function( finder ) {
                    finder.on( 'files:choose', function( evt ) {
                        var file = evt.data.files.first();
                        var output = document.getElementById( 'output' );
                        output.innerHTML = 'Selected in popup 1: ' + file.get( 'name' ) + '<br>URL: <img src=" ' + file.getUrl() + '">';
                    } );
                }
            },
            
        }
    };

    var popupWindowOptions = [
        'location=no',
        'menubar=no',
        'toolbar=no',
        'dependent=yes',
        'minimizable=no',
        'modal=yes',
        'alwaysRaised=yes',
        'resizable=yes',
        'scrollbars=yes',
        'width=800',
        'height=600'
    ].join( ',' );

    document.getElementById( 'popup-1-button' ).onclick = function() {
        // Note that config ID is passed in configId parameter
        window.open( 'http://foxhills.localhost/admin/ckfinder/ckfinder.html?popup=1&configId=popup-1-config', 'CKFinderPopup1', popupWindowOptions );
    };

In the above code var file = evt.data.files.first(); is the reason why i am getting the first image. How i can change the code to get the all the urls as array.

Answer 1

For your event, try testing with this

finder.on( 'files:choose', function( evt ) {
    var files = evt.data.files;

    var chosenFiles = '';

    files.forEach( function( file, i ) {
        chosenFiles += ( i + 1 ) + '. ' + file.get( 'name' ) + '\n';
    } );

    alert( chosenFiles );
} );

Source: https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Application-event-files_choose