Hello, Im trying to guess how could it be possible to disable the automatic file view that its opened when we double click any file inside CKFinder. The result should be that only pictures wil have the pop up preview and non pictures will be directly downloaded when we double click them.
I can understand that this functionality could require a paid support account, but I think that its very basic and most users will benefit with this example with callbacks and overloading some CKFinder functions.
Example:
- picture.png will be shown in a pop up if we double click it.
- excel.xls will be directly downloaded if we double click it.
Problems in Script callback, step 3:
- I dont know how to return the pop up window for downloading the non picture file, after I get it with getSelectedFile(). I have searched everywhere in the documentation but didnt find a way. return true or false doesnt work. I have also looked at the following topic, but I think there should be an easier way: http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery
- I dont know how to call the CKFinder function which automatically displays the picture, after I get it with getSelectedFile().
Code:
1. assign an ID to CKFinder (step only for a php symfony proyect, remember to change config.php):
<?php //session_start(); $id = $form->getObject()->getId(); $GLOBALS["id"] = $id; $_SESSION["id"] = $id; //session_write_close(); $idCKFinder = $id /*+ $sf_user->getGuardUser()->getId()*/; ?>
2. Script initialization:
<script type="text/javascript"> var finder = new CKFinder(); finder.basePath = '/js/ckfinder/'; // The path for the installation of CKFinder (default = "/ckfinder/"). finder.width = '99%'; finder.defaultLanguage = 'es'; finder.language = 'es'; finder.id = <?php echo $idCKFinder ?>; finder.rememberLastFolder = true; finder.removePlugins = 'basket'; finder.selectActionFunction = showFileInfo; //callbak api = (finder).create(); </script>
3. Script callback when we double click a file:
<script type="text/javascript"> var api = ""; var enableAgain = ""; // This is a sample function which is called when a file is selected and then double clicked in CKFinder. function showFileInfo( fileUrl, data, allFiles ) { var re = /(?:\.([^.]+))?$/; //http://stackoverflow.com/questions/680929/how-to-extract-extension-from-filename-string-in-javascript var ext = re.exec(fileUrl)[1]; // "txt" var msg = "Selected file: " + fileUrl + " , extension: " + ext + "<br /><br />"; //If we have more than one file or its a non picture file if ( (allFiles.length > 1) || ((ext != "bmp") && (ext != "jpg") && (ext != "png") && (ext != "gif")) ) { alert("disabled"); enableAgain = api.disableFileContextMenuOption('viewFile', false); // Simply call disableFileContextMenuOption to disable the menu item. if (allFiles.lenght > 1) { var files = api.getSelectedFiles(); } else { var file = api.getSelectedFile(); } } else { alert("enabling"); if ((enableAgain != null) && (enableAgain != "")) // If you want to enable it back later, remember in a variable an unlocking function. { enableAgain(); enableAgain = ""; } var file = api.getSelectedFile(); //what goes after this? //alert(file.filenameNode().$.innerHTML); } this.openMsgDialog( "Selected file: ", msg); } </script>
Thank you, any comment or tip is welcome :)
Found an easy way of doing it
Found an easy way of doing it, however it involves changing the source core of CKfinder, ckfinder.js. I think it could be a nice improvement since its really easy to implement. There are probably better solutions.
Change/add the function at line 5553 in ckfinder.js, use http://jsbeautifier.org to automatically tab it :)