bahaaldine / angular-csv-import Goto Github PK

when upload a csv the ñ is replaced by the character �

I want to ignore comma (,) in certain data. But it returns an empty array whenever I do this:

AKSHYATA SINGH DANGOL,"Lagankhel-15, Lalitpur",[email protected]
AYUSH BAJRA BAJRACHARYA,Kathmandu,[email protected]
BEN SHRESTHA,Kathmandu,[email protected] 

This works fine in excel, "Lagankhel-15, Lalitpur" is considered as single data or comma is ignored. But not working with this library. Can anyone help?

Hi

When I upload a new file and then, I modify the content and try to upload the same file but with diffrent content the script doesn't work

I fixed with

---------------- OLD angular-csv-import\dist\angular-csv-import.js ----------------------------------------
LINE 70:

scope.onClick = function() {
input.click();
};

---------------- NEW angular-csv-import\dist\angular-csv-import.js ----------------------------------------
LINE 70:

scope.onClick = function() {
input.value = "";
input.val('');
input.click();
};

Hello, I have a problem when my clients include "," in address field. I use "," as delimiter. So, I couldn't insert a new row because "," inside the address field.
My CSV read file result like this:

0, Name, Address
1, Devid, Working Street Indonesia
2, Devid, "Not working Street, Indonesia"

But, only row 0 and 1 are working to be parsed in JSON.

Hi your plugin working great . But I find minor issue in it , Lets suppose in any column we placed enter then it did not read that row . You split on the basis of /n. Please help me to find

hi,

trying to use this repo. while trying to install dependencies, it asks something like below in cmd terminal

Prefix the choice with ! to persist it to bower.json

? Answer aaa
? Answer

could you pls explain why and what is this and how to run your app.??

thank you

Thanks for this directive, simple and straightforward.

If callback is not specified, or is not a function, there are errors in the console.

The CSV parsing function does not remove quotes from quoted values.

The previous pull request merge made the change in the dist folder, not in the source file lib/angular-csv-import.js

I've created a PR for some fixes: #47

I have not run grunt to create the dist files and bump the version. The un-quoting logic is not very basic and will break with some use cases involving quoted and escaped CSV values. At least its a little better than before and covers all my use cases.

Thanks!

try to register this callback as acceptSizeExceedCallback

var acceptSizeExceedCallback = function(file) {
alert(file);
}

i try to get the data to an html table, but i have error, this error says that is a string not an array

      <ul ng-repeat="item in toPrettyJSON(csv.result, 2)">
                <li ng-repeat="(key, val) in item">{{key}}:::::: {{val}}</li>
      </ul>

when i add the "track by $index" to ng-repeat in get me letter by letter, not item by item, i I forget something?

thank you

Hi.
I trying to do it with ionic 1.5 but the load file isnt working for me didnt have any upload manager.
any solution ?

if CSV fields are as following
name,address
kuna, world,india,

convert to json
{ "name":"kuna", "address":" "world,india," " }

but actually needs
{ "name":"kuna", "address": "world,india, " }

I came across a CSV file that contained carriage returns. This prevents the module from splitting the file into multiple lines. A quick fix would be to add a check in the change event function. Or this could be pulled into its own data scrubbing function if other checks might be added in the future.

Quick Fix:

element.on('change', function(onChangeEvent) {
  var reader = new FileReader();
  reader.onload = function(onLoadEvent) {
    scope.$apply(function() {
      var content = {
        csv: onLoadEvent.target.result,
        header: scope.header,
        separator: scope.separator
      };

      scope.content = content.csv;

      // Account for possible carriage returns (or CR + new line) and replace with new lines
      if(scope.content.match(/\r\n|\r/g)){
        scope.content = scope.content.replace(/\r\n|\r/g,'\n');
      }

      scope.result = csvToJSON(content);
    });
  };
  ...
});

Kindly help publish the current version which has fixed a lot of things to npm repo

Thanks

I'd try to upload CSV file, I found some error after upload, therefore, I changed some content inside and reupload again, I found that the latest update file can not be readed unless I reload the whole html page, any idea about this?

I found an error in processing data.
<tr ng-repeat="data in BuildData(csv.result)"> <td class="text-center">{{data.height1}}</td> <td class="text-center">{{data.volume1}}</td> <td class="text-center">{{data.height2}}</td> <td class="text-center">{{data.volume2}}</td> <td class="text-center">{{data.height3}}</td> <td class="text-center">{{data.volume3}}</td> <td class="text-center">{{data.height4}}</td> <td class="text-center">{{data.volume4}}</td> </tr>

`$scope.BuildData = function (json) {
console.log(calFlag);
console.log(JSON.stringify(json));
if(json==null||calFlag){
return;
}
calFlag=true;
console.log("2:"+calFlag);
var result = [];
var obj = [];
// console.log($scope.csv.result.length);
for (var i = 0;i<json.length;i++) {

        var element = json[i]; 
        var key = i % 4 + 1;

      //  console.log(JSON.stringify( element)+":" +key);

        obj["height" + key] = element["#高度"];
        obj["volume" + key] = element["体积"];           
        if (key === 4) {
          //  console.log(JSON.stringify(result));
            result.push(obj);
            obj = [];
        }
    }
     if(obj.length>0){
        result.push(obj);
        obj = [];
    }  
    //console.log(JSON.stringify(result));
    calFlag=false;
    return result;
};

angular.js:11383 Error: [$rootScope:infdig] 15 $digest() iterations reached. Aborting!
at angular.js:80
at Scope.$digest (angular.js:14080)
at Scope.$apply (angular.js:14304)
at FileReader.reader.onload (angular-csv-import.js:110)(anonymous function) @ angular.js:11383(anonymous function) @ angular.js:8459$apply @ angular.js:14306reader.onload @ angular-csv-import.js:110
angular.js:80 Uncaught Error: [$rootScope:infdig] 15 $digest() iterations reached. Aborting!(…)(anonymous function) @ angular.js:80$digest @ angular.js:14080$apply @ angular.js:14304reader.onload @ angular-csv-import.js:110`

body is too long (maximum is 65536 characters).

event is not firing when selecting a file on subsequent attempts.

Hi, Bahaaldine!
Thanks 4 ur cool works, and I'm enjoying it.
I'm just meeting an issue of uploading CSV via mobile(iPad), i.e. uploaded data breaks down.
However it's okay when CSV is uploaded via PC.
I'm working with ionic v1 project and this issue slightly bothers me.
Any great tips or solutions?
Best wishes.
Rob

I am having issue when csv line having double quote. see below-
Id,User,Lead,Assigned to,Reports to,First name,Last name,Access,Title,Department,Source,Email,Alt email,Phone,Mobile,Fax,Blog,Linkedin,Facebook,Twitter,Born on,Do not call,Deleted at,Created at,Updated at,Background info,Skype,Subscribed users,Cf geschlecht,Cf akademischer grad,Cf kontext,Cf unternehmensbereich,Tags;

“3,8,78,,,AMit v,Public,HR-Staff Development,"""",other,[email protected],"""",3232323,"""","""",www.kkk.com,"""","""","""",,false,,2011-04-12 12:55:30 +0200,2013-12-03 16:37:02 +0100,,"""",#Set:3232323,female,"""",,HR,""""";

Any help will be appreciated much.

You forgot to add "separatorVisible" to ng-show="separator && separatorVisible"

Could you make this change?

Hello! I like the module. However, for some reason csv.result is always null, even though csv.content contains the contents of my CSV.

In my controller:

    $scope.csv = {
      content: null,
      header: true,
      headerVisible: true,
      separator: ',',
      separatorVisible: true,
      result: null,
      encoding: 'ISO-8859-1', //also tried utf8
      encodingVisible: true,
    };

    // this is trigged by a button press.
    // I wait a few seconds to make sure the file has had time to load
    $scope.showFile = function () {
      console.log($scope.csv.result); //null
    };

Does this mean there is something wrong with my CSV file?

Hi,

Getting below error when running with angular 1.5.8.

Error: scope.callback is not a function
.link/</reader.onload/</<@http://192.168.56.101:9000/bower_components/angular-csv-import/dist/angular-csv-import.js:68:8
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://192.168.56.101:9000/bower_components/angular/angular.js:16789:13
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://192.168.56.101:9000/bower_components/angular/angular.js:17003:13
.link/</reader.onload@http://192.168.56.101:9000/bower_components/angular-csv-import/dist/angular-csv-import.js:58:6

http://192.168.56.101:9000/bower_components/angular/angular.js
Line 13294

I'm using webpack, es6 import doesn't recognized bower_components, please, can you do that?

progress-callback does not work

File: angular-csv-import.js
Line: 38

replace

'<div ng-show="encoding"><div class="label">Encoding</div><span>{{encoding}}</span></div>'+

to

'<div ng-show="encodingVisible"><div class="label">Encoding</div><span>{{encoding}}</span></div>'+

regards

First, would love to have basic data validation. Since it only supports CSV, we should be able to do this:

<input type="file" accept=".csv" />

So that at the HTML level there is only CSV types allowed. Right now the app just crashes if you try to upload, say, a .Numbers file.

Second, and more importantly, we really really need a callback function somehow that gets fired when the user selects the file. Otherwise we don't really have a way to handle file saving once it's been uploaded. I feel like this is so basic that I must be missing something here??

bower.json has a typo due to which grunt wiredep task doesn't add dependency in project html file (index.html).

Hi,

I have a CSV with 14 columns and over 900 rows.
When I try to upload it, I can see that the plugin reads only 494 row and ignore the rest.
Can you please confirm if tehre is a limit on the data that can be read and uploaded in one go.?

regards,
Deepak

The directory in the path as listed in README:

<script src="bower_components/angular-csv-import/dist/angular-csv-import.js"></script>

What I actually needed to use for this to work in bower is:

<script src="bower_components/angular-csv-import-tmp/dist/angular-csv-import.js"></script>

so instead of angular-csv-import the directory is created as angular-csv-import-tmp

Hi,

I've seen that you've fix the library in a way that header and separator can't disapear... but still when I install your awersome plugin bower still give me the ancient version without the fix.

I use : bower install angualr-csv-import --save as command.

Thanks for your help

For CSV files that take anywhere from 5 to 60 seconds to parse, I want to show a progress bar. For that I need a way to hook into this module and receive data like xxx out of xxx done etc.

How can that hook/callback be accomplished? Will that be an enhancement?

[...] do not prefix your own directives with ng or they might conflict with directives included in a future version of Angular.

https://docs.angularjs.org/guide/directive

the option to add "mdButtonTitle" is missing from the documentation page.

I tried to chose a csv file and then made changes in my local and again choose the same csv. The second time the csv didn't get open.

Hi,

i have this html document,

    <div id="span" ng-controller="testFonctionnelController" ng-if="mid>0">
<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <!-- Second inpuuuut -->
            <div class="file-input file-input-new">
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput">
                        <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span>
                    </div>
                    <span class="input-group-addon btn btn-primary btn-file" style="background-color: #3A5894; color: white"> <span
                        class="fileinput-new "><i class="glyphicon glyphicon-folder-open"></i>&nbsp; Browse </span> <input type="file" id="fileUpl"
                        name="files" placeholder="test file chooser" class="btn btn-primary btn-file" data-filename-placement="inside"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">

        <ng-csv-import content="csv.content"
                       header="true" 
                       separator=";"
                       result="csv.result">
        </ng-csv-import>

    </div>
 </div>
     </div>
    <script src="'js/angular-csv-import.js"></script>
    <script src="js/testfonctionnel2.js"></script>

it have just an input type file and ng-csv-tag tag, when i remove the ng-csv-import from html doc, input file is on screen, but when i add them file input desapears,

my js script is like :

    app.controller("testFonctionnelController",["$scope","$parse",function($scope,$parse){
$scope.csv={
        content:null,
        header:!0,
        separator:";",
        result:null
       };

    var _lastGoodResult = '';

     $scope.toPrettyJSON = function (objStr, tabWidth) {

    var obj = null;
    try {
        obj = $parse(objStr)({});
    } catch(e){
        // eat $parse error
        return _lastGoodResult;
    }

    var result = JSON.stringify(obj, null, Number(tabWidth));
    _lastGoodResult = result;

    return result;
    };
    }]);

any one can help me

When I load this file in the browser in my webpacked bundle, it fails due to an illegal character. See ISSUE_HERE below. When I manually delete this character everything works fine.

Please update the module and post new version to NPM. Thanks.

for (var i=start; i<lines.length; i++) {
	var obj = {};
	var currentline=lines[i].split(new RegExp(content.separator+'(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)'));
	if ( currentline.length === columnCount ) {
		if (content.header) { //ISSUE_HERE (as copied out of Chome debugger)
			for (var j=0; j<headers.length; j++) {
				obj[headers[j]] = currentline[j];
			}
		} else {
			for (var k=0; k<currentline.length; k++) {
				obj[k] = currentline[k];
			}
		}
		result.push(obj);
}

I'm not seeing the option accept on the current version of bower package, but I see it on the README on this repo.

Don't work in IE browser

IE version：11.0.9600.18792

Thanks for the work in this directive!

I have the text of the button in the css like this

div.import>div>input[type="file"]::before {
  content: 'Select your csv file';
 (...)
}

is there a way to move this to the controller so I can change dynamically?

Best regards
H.

The directive works really well and have it in 2 of my projects. Interesting thing I noticed today was that although transclude: true is set, it isn't used in the template at all. If I can find time I'll submit a PR.

I consistently get the following error when I set the separator property to "," as is is in the readme file.

Error: [$parse:syntax] Syntax Error: Token ',' not a primary expression at column 1 of the expression

This is the code sample I am using:

<ng-csv-import content="csv.content"
    header="true" 
    separator=","
    result="csv.result"></ng-csv-import>

The plugin does seem to work besides that when the separator property is not set since csv.content and csv.result are being loaded into $scope

hello.
ex)
ng-csv-import.import(
content='vm.csv.content'
header='true'
separator='vm.csv.separator'
result='vm.csv.result'
upload-button-label='vm.csv.uploadButtonLabel'
)
this condition is not working..
This condition must be added( header-visible='true' added ).
but, visibled header
Perhaps this is a problem.
angular-csv-import.js
template: function(element, attrs) { ....

Hi

How can I remove the custom template or modify it? I would like to have just the input. I mean I don't want that my users personalize things like header, encoding, separator, among others.

I was using the lib and forgot to pass the separator parameter to the directive.
When no value is passed the line:

var currentline=lines[i].split(new RegExp(content.separator+'(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)'));

Will use as regex the value 'undefined(?![^"]"(?:(?:[^"]"){2})[^"]$)' and the csv will not be correclty parsed.

I think we should raise and error or use comma as default value.

Let me know you desicion and I will be happy to open a pull request.

When ever you change CSV file, the Library actually changes the users Header configuration.
The $scope.$watch in the following code should really NEVER trigger, as this is a user configuration, and this configuration should be considered as a non-mutable ruleset, but every time you change file.

    var csvShouldUseHeader = false;
    $scope.csv = {
        separator: ",",
        header: csvShouldUseHeader,
        accept: '.csv'
    };


    $scope.$watch("csv.header", function(newValue){
        if(newValue !== csvShouldUseHeader){
            //This log shows that some bad behaviour is happening from with the library.
            console.log("We are trying to change the header property to something we didn't specify", newValue);
            //The following line corrects the header property back to what we have specified. A user fix to the library that really shouldnt be needed.
            $scope.csv.header = csvShouldUseHeader;
        }
    });

i get a Error: [$parse:syntax] when i load the page....the file is being called and im adding it to my app.

is there anything other than just plain angular i need to include for this to work??

Added your module via bower.
included the .js as you stated.

As of today angular-csv-import.js creates:
SyntaxError: Unexpected token {
in app.js

angular-csv-import.js.min.js works.

:-)

I was getting this error -
https://docs.angularjs.org/error/$compile/nonassign?p0=undefined&p1=ngCsvImport

I resolved it by putting "=?" instead of just "=" in the isolate scope for headerVisible and separatorVisible since they are optional attributes. [Line 15 and 17 in angular-csv-import.js]