importing csv into datatable with filedialg to select file.

In need of assistance :( been at this for a couple of days now. Here is what I aiming to achive.

  1. on clicking a button, pops up a fileDialog allows me to select a csv file on my local machine.
  2. obtain the selected files name and use this open and import the cvs into a datatable that may or
    may not have entries in it already.

Having issues selecting filename and importing (tried bothy).

This is how I had been thinking of doing it.

Do I have to used an uploader view?

Any help would be much appricated



  • I think I have found out how to import data into the datatable

    Does require that the id's are data0, data1 etc. Original data will have different id's

  • Still in need of help, I have been able to get a file selecting dialog and select a file. All I get however is the filename not the directory in which the file resides.

    Not sure if I have done this correctly, if so then how do I get directory. If not can someone suggest another way.


  • Hello!
    As far as I know, it's not possible. For security reasons, browsers prevent JavaScript from knowing file's local full path.

  • Hi, thanks for getting back to me.

    kind of figured that which was why I was surprised when I found I could load a local excel file into a datatable.

    The problem now is I do not seem to be able to mix and match data loaded locally with that loaded from a file as you can see in the snippet.

    Still working on resolving this. I see you have answered my other query, maybe this will help.

    Thanks again, been fighting with this for over a week now.

  • edited March 2018

    Hi @Gee,

    You can add extra logic for your onBeforeFileAdd handler to convert Excel data into normal JSON with the necessary fields.

    Just get Excel data as an array using the toObject() method of Webix Excel DataDriver and apply the needed transformations to it:

          //turn into  JSON records

    Check the snippet, please:

  • GeeGee
    edited March 2018

    Hi Helga,

    Thanks for your assistance. Do you know if this works diffrently withon webix jet? I added the following to my program and I never see 'process xsl'

    view: "uploader",
    value: "Import Receivers",
    on: {
        onBeforeFileAdd: function (upload) {
        webix.message('onBeforeFileAdd: ' + JSON.stringify(upload));
        webix.message('process xsl');
  • I.m seeing in debug, if that is any help:
    groups.js:128 Uncaught TypeError: Cannot read property 'toObject' of undefined
    at h.onBeforeFileAdd (groups_receivers.js:128)
    at h.callEvent (webix_debug.js:574)
    at h.addFile (webix_debug.js:36506)
    at h.cs (webix_debug.js:36455)
    at h. (webix_debug.js:36239)
    at HTMLInputElement. (webix_debug.js:247)

  • It seems you are using GPL version of Webix.
    Excel data driver is included only in Webix Pro.

  • This is true I am not using the pro version I'm developing for personal development purposes with a view to getting my employer to purchase. Is it possible in the non pro version to import say .cvs

  • Another question, do I need pro just to import excel into a datatable... I'm guessing so.

  • edited March 2018

    Is it possible in the non pro version to import say .cvs

    Yes, you can use HTML FileReader API to get the contents of a CSV file and parse it into the datatable:

    do I need pro just to import excel into a datatable

    Yes, here you need a Pro version. Meanwhile, you can get a 30-day free trial.

  • Helga, Thanks for your assistance. I might just go ahead and purchase a pro just for myself. I did download the 30-day trial by accident when downloading 5.2 but I'm reluctant to use as if I use some of the pro features after the 30 days I will be forced to purchase.

    Given the support the Webix Team has provide me I think it only fair however I go ahead and purchase.

    Your support is much appreciated.


Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!