CODEWITHSUNDEEP
pdfviewckfinder
pibrom
pibrom

Reputation: 1

CKFINDER 3.0 : Link to PDF files on double click on them

I use ckfinder 3.0 on one of my websites, on standalone mode I uploaded several images and PDF files.

When I double click on images, they display in a popin view. When I double click on PDF files, PDF icon display in popin view, but I have to right-click on PDF icon, then choose 'download' in contextual menu to download my PDF file and open it. Or, I'd like for this kind of file (who can be read directly on my browser), to open them in a new tab of my browser instead of displaying the PDF icon in the popin !

I tried to develop a plugin in order to do so, but I Don't know where I can disable the 'popin display' when I double click on my PDF file in CKFinder.

CKFinder.define( [ 'jquery' ], function( jQuery ) {
'use strict';

return {
    init: function( finder ) {

        finder.on( 'file:dblclick', function( evt ) {
            finder.request( 'files:getSelected' ).forEach( function( file ) {
                 finder.request( 'file:getUrl', { file: file } )
                     .then( function( fileUrl ) {
                        console.log( 'The file: ' + file.get( 'name' ) + ' has url: ' + fileUrl );
                        if(fileUrl.match(/.pdf/gi))
                        {    
                            window.open(fileUrl);
                        }
                } );
         } );              

    } );

}
};
});

Does anyone know how to disable this functionality in CKFinder ?

Thanks for your help !

Upvotes: 0

Views: 551

Answers (1)

jodator
jodator

Reputation: 2475

you can disable file preview (gallery) by canceling an event:

finder.on( 'file:dblclick', function( evt ) {
    var file = evt.data.file;

    if ( file.getExtension().toLowerCase() === 'pdf' ) {
        // Cancel the event so the default handler won't be called
        evt.cancel();

        // Do whatever you want with file
        alert( file.getUrl() );
    }
}, null, null, 5 );

In upcoming 3.1 version there will be a PDF file preview. You can create similar plugin by listening on file:preview event and changing the template so it display an iframe with PDF:

finder.on( 'file:preview', function( evt ) {
    // Check if file extension is supported your plugin

    if ( evt.data.extension === 'pdf' ) {
        // Stop event propagation so no other listener is fired
        evt.stop();
        // Add data for template
        evt.data.templateData = {
            url : evt.data.url
        };

        // Add template for file preview rendering
        evt.data.template = '<iframe src="{{= it.url}}"></iframe>';
    }
} );

Above example will not work on remote backends such as Dropbox or Amazon because of problems with obtaining direct URL. However version 3.1 will support Proxy command that will allow to load such files.

Upvotes: 1

Related Questions