Search code examples
javascriptjqueryckfinder

CKEdidor return multiple selected files


I am using CKFinder 3 in a Web project as described on the CKFinder Website my problem is that I can't return multiple selected Images. The problem is that when I select multiple Images just the first one is returned. Is there a way to return multiple files?

var button1 = document.getElementById( 'ckfinder-popup-1' );
var button2 = document.getElementById( 'ckfinder-popup-2' );

button1.onclick = function() {
    selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
    selectFileWithCKFinder( 'ckfinder-input-2' );
};

function selectFileWithCKFinder( elementId ) {
    CKFinder.modal( {
        chooseFiles: true,
        width: 800,
        height: 600,
        onInit: function( finder ) {
            finder.on( 'files:choose', function( evt ) {
                var file = evt.data.files.first();
                var output = document.getElementById( elementId );
                output.value = file.getUrl();
            } );

            finder.on( 'file:choose:resizedImage', function( evt ) {
                var output = document.getElementById( elementId );
                output.value = evt.data.resizedUrl;
            } );
        }
    } );


Solution

  • I have found a way how to do it. The only bummer is that you can’t resize images.

      var button1 = document.getElementById( 'ckfinder-popup-1' );
    
    button1.onclick = function() {
        selectFileWithCKFinder( 'ckfinder-input-1' );
    };
    
    
    function selectFileWithCKFinder( elementId ) {
        CKFinder.modal( {
            chooseFiles: true,
            width: 800,
            height: 600,
            onInit: function( finder ) {
                finder.on( 'files:choose', function( evt ) {
    
    
            var url='';
            for(i = 0; i < evt.data.files.models.length  ; i++){
              var file = evt.data.files.models[i];
    
              var tempurl = file.getUrl();
    
              url +=','+tempurl;
            }
    
            var output = document.getElementById( elementId );
                    output.value = url;
    
    
                } );
    
                finder.on( 'file:choose:resizedImage', function( evt ) {
            var url='';
            for(i = 0; i < evt.data.files.models.length  ; i++){
              var file = evt.data.files.models[i];
    
              var tempurl = file.getUrl();
    
              url +=','+tempurl;
            }
    
            var output = document.getElementById( elementId );
                    output.value = url;
                } );
            }
        } );
    }
      </script> ```