Alasql: Object.alasql.from.FILE Wrong usage of FILE() function

[digish777]

  loadFile(event) {
            alasql('SELECT * FROM FILE(?,{headers:true})', [event], function (data) {
                console.log(data);
                // You can data to div also.
            });
        }
 let buttonUpload = $("#uploadBtn");
 buttonUpload.on("change", (evt) => this.loadFile(evt));

the code is above

I am using the above code in controller of angular js 1.5 and typescript app

please help

[mathiasrw]

Please ask question like this on Stack Overflow

[digish777]

Wrong usage of FILE() is thrown by alasql

[mathiasrw]

Have a look at http://jsfiddle.net/3ve90afo/

I beleave your problem is with how angular is used in conjunction with alasql

[deepakshrma]

There is issue while working with angularjs. You can not directly call anglarjs method with plane javascript. Same $event doesn not work with ng-change. As Angular recommend, I come to a solution. As they say, create directive for any native javascript/jquery event binding. Please refer to below given code.

angular.directive('nngFileUpload', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        scope: {},
        link: function (scope, elm, attrs) {
            //elm should be input field else find input field(elm.find("input[type='file']"))
            elm.on('change', function (event) {
                $rootScope.$emit("FILE_UPLOADED", event.originalEvent);
            });
        }
    }
}]);

```js
//in controller
$rootScope.$on('FILE_UPLOADED', function(event, originalEvent){
alasql('SELECT RECORDSET * FROM FILE(?,{headers:true})',[originalEvent],function(data){
console.log("Data from file=",data.columns);
});
});

```html
<!-- HTML syntax-->
<input type="file" value="alasqlupload" nng-file-upload>

Note: Things you should note down here. alasql does not work with jquery event, so pass _event.originalEvent_ instead of event.

[mathiasrw]

nice - thanks for a great description.

WOuld it make senese to let alasql check IF there is a .originalEvent and use that instead - or does it make more sense to learn people to give the original event?

[deepakshrma]

Not Sure man :) Just make a check. It will be convenient for a user but people might used other library apart from jquery. So just make a note on the README.md. I will suggest.

Or i can write angular version of your module :-D what you say ?

[mathiasrw]

The README it is...

[TryingToImprove]

For people working wil alasql and react.js, then you need to get the nativeEvent from the event, otherwise it will give you a error

    window.alasql('SELECT * FROM FILE(?,{headers:true})', [e.nativeEvent], function (data) {
      console.log(data)
    });

[mathiasrw]

Added to https://github.com/agershun/alasql/wiki/How-to-upload-and-parse-CSV-file-from-server-and-from-desktop

[rohitmsaxena]

There is issue while working with angularjs. You can not directly call anglarjs method with plane javascript. Same $event doesn not work with ng-change. As Angular recommend, I come to a solution. As they say, create directive for any native javascript/jquery event binding. Please refer to below given code.

angular.directive('nngFileUpload', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        scope: {},
        link: function (scope, elm, attrs) {
            //elm should be input field else find input field(elm.find("input[type='file']"))
            elm.on('change', function (event) {
                $rootScope.$emit("FILE_UPLOADED", event.originalEvent);
            });
        }
    }
}]);

//in controller
$rootScope.$on('FILE_UPLOADED', function(event, originalEvent){
    alasql('SELECT RECORDSET * FROM FILE(?,{headers:true})',[originalEvent],function(data){
        console.log("Data from file=",data.columns);
    });
});

<!-- HTML syntax-->
<input type="file" value="alasqlupload" nng-file-upload>

Note: Things you should note down here. alasql does not work with jquery event, so pass _event.originalEvent_ instead of event.

Instead of $rootScope you should use $scope. $rootScope events aren't destroyed when you leave the page and so can be fired twice.