How to open a browsed file in a browser tab ?

Hi ,

I am trying to open a browsed file in the adjacent tab like how it is done in HTML as below:

<  a href="https://www.w3schools.com" target="_blank">Visit W3Schools  <  / a>

My snippet is here https://snippet.webix.com/9qwrwsim

I want to display the selected file through browse button in the adjacent tab of the browser, how can I achieve that in webix ?

Thanks

Hello,

You can use the onBeforeFileAdd event and get the file object as item.file.
After that, FileReader API ( HTML5 API, not related to Webix ) can be used to read data from any data blob, including the one in the file obj
Due to the browser limitations, we can suggest to add

reader.onload = function(event) {
let printWindow = window.open('');
printWindow.document.write('<object width="100%" height="100%" data="'+event.target.result+'" type="application/pdf"> <embed src="'+event.target.result+'" type="application/pdf" /> </object>');
}

Example: https://snippet.webix.com/xx6zwhn6

Thanks Nastja for your help. It works !!!

I saw that you have used view as ‘uploader’ which gives the onBeforeFileAdd event.

Suppose, I want this button in a datatable custom cell as below:
https://snippet.webix.com/aplretcl

This above snippet is just showing a popup window, instead I want open the file browser to select and open a file in a tab as done in your snippet
(https://snippet.webix.com/xx6zwhn6)

Is it possible to embed the ‘uploader’ view in the datatable cell ?

I am sorry I thought once I am able to browse and open the file , it can be put in the datatable. But now I am not sure how to implement the ‘uploader’ in place of the popup table ?

Thanks

Hello @ovi_zit !

Yes, it’s possible. Please look at this

// app initialization
webix.ui({
    view:"datatable", 
    // the datatable configuration
});
 
// uploader initialization
webix.ui({
    view:"uploader", 
    id:"uploadAPI",
    apiOnly: true, 
    upload:"php/photo.php"
});

Here uploader is initialized with a separate webix.ui() call.
And there is you can see apiOnly:true which sets the uploader to the “invisible” mode.
Please check the example: https://snippet.webix.com/dx2buk5d

More information about binding Uploader to Any Page Element you can see here