Want to render the content of a local disc file when a button is clicked

Hi,

I am trying to read and view a text file while clicking a button in my webix application. The code that I have developed so far looks like below :

toolbar =  {  
  id:'tb',
  view: 'toolbar',
  height: rowHeight,
  type: 'clean', 
  cols: [
    {
      view:"button", id:"viewfile",  
      type:"icon", icon:"external-link", 
      label:"View Report", width:buttonWidth, 
      tooltip: "click to view report", 
      on: {
        onItemClick:function(){viewReportFile()}
      }
    }     
  ]};

function viewReportFile(){
  webix.ui( {
    view:"window",
    height:250,
    width:300,
    left:50, top:50,
    move:true,
    resize: true,
    head:"This window can be resized",
    body:{
      template:"Some text"
    }
  }).show();      
}

I have already been able to achieve the same functionality using normal JavaScript and the code for the same is given below :

<input type="file" onchange="onFileSelected(event)">
<br>
<textarea id="result" rows="10" cols="50"></textarea>
<script>
function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var result = document.getElementById("result");

  reader.onload = function(event) {
    result.innerHTML = event.target.result;
  };

  reader.readAsText(selectedFile);
}

</script>

Clicking the ‘View Report’ button , either a pop up window should open up or another tab which will render the content of the file. Is there a way to achieve that, kindly help me. Thanks.

Can anybody please provide a solution or a hint of this requirement?

In ui.uploader,onBeforeFileAdd andonAfterFileAdd events take file object (+info) as a parameter:

$$("uploader").attachEvent("onAfterFileAdd",function(data){
    var file = data.file;
    // your code 
});

Returningfalse from onBefore- event will prevent default sending attempt, so you can use it to call FileReader and handle the file on the client side:

http://webix.com/snippet/6c465e58

Hi Listopad,
Thanks a lot for replying to my question. Your solution is working as per my requirement.

Hi Listopad,
Is it possible to open the file browser with particular initial directory each time ? Basically, I want the file browser to be always open with a specific directory (for example /home/user/mydir) always and let the user start browsing his file right from there ?

Thanks.

Please correct me, if I’m wrong, but such kind of interaction between OS and browser is not allowed due to the main principles of security. The client-side script has no information about the file system.

Ok. thank you!