CKFinder How To Get Dimension URL And Dimension (width/height) When Choosing An Image (files:choose)?

I am using CkFinder 3, after uploading successfully an image I need to be able to detect after an User click the 'Chose' button: file name / id url width and height for original i

Solution 1:

Taking example from the files:choose event description. You get Backbone.Collection of files chosen by the user in evt.data.files.

The tricky part is to obtain image dimensions from ImageInfo server (using the command:send request) since it requires to process asynchronous code with promises.

Assuming that you only allow Images to be uploaded, example code is below:

// Listen to event.
finder.on( 'files:choose', function( evt ) {
    // Iterate over the files collection.
    evt.data.files.forEach( function( file ) {
        // Send command to the server.
        finder.request( 'command:send', {
            name: 'ImageInfo',
            folder: file.get( 'folder' ),
            params: { fileName: file.get( 'name' ) }
        } ).done( function( response ) {
            // Process server response.
            if ( response.error ) {
                // Some error handling.
                return;
            }

            // Log image data:
            console.log( '-------------------' );
            console.log( 'Name:', file.get( 'name' ) );
            console.log( 'URL:', file.getUrl() );
            console.log( 'Dimensions:', response.width + 'x' + response.height );
            console.log( 'Size:', response.size + 'B' );
        } );
    } );
} )

If you are using any remote backend such us Dropbox you might need to use the file:getUrl request to obtain the file's URL.