File Preview, JavaScript Programming Example of File Preview in File Manager

JavaScript Programming Example of File Preview in File Manager

With the programming example below you can preview files in File Manager. You should double-click a file to see its content. You are welcome to use free Webix coding samples for creating custom business web applications.

JS Code

webix.ready(function(){

  webix.ui({
    rows:[
      { view:"label", css:"header", label:"Double-click a file to see its content."},
      {
        view:"filemanager",
        id:"fmanager"
      },
      {view:"resizer", height:2},
      {
        id:"preview",
        template:" ",
        gravity:0.6,
        scroll:true,
        hidden:true
      }
    ]
  });
  $$("fmanager").load("https://docs.webix.com/samples/64_file_manager/common/data.php");

  // load file content on double click and show it in 'preview'
  $$("fmanager").attachEvent("onBeforeRun",function(id){
    webix.ajax().post("https://docs.webix.com/samples/64_file_manager/common/data.php", {action: "preview",source: id},function(text){
      if(text){
        var content = "";
        if(text.indexOf("data:image")==0){
          content = '<img src="'+text+'">';
        }
        else{
          content = '<pre>'+text+'</pre>';
        }
        $$("preview").show();
        $$("preview").setHTML(content);
      }
    });
    return false;
  });
});

HTML Code

<style>
  .header div{
  	padding: 0 10px;
  }
</style>