Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I have angularjs application where user should be able to import data from text files. Before upload, I would like to read several lines from file on a client side to do some validations. I am using https://github.com/nervgh/angular-file-upload to upload file. I can upload file and do validation on a server side but files can be few megabytes big and I do not want to create unnecessary traffic if data are invalid.

Inside my controller I have following code:

$scope.validateFile = function(file){

  console.log(file.name);
  console.log(file.size);      
  var reader = new FileReader();

  reader.onloadend = function(evt){      
    console.log(evt.target.result);
    //do something with file content here 
  };

  //var blob = file.slice(0, file.size - 1);
  reader.readAsText(file);

};

When executed, console outputs file name and size. After that I got follwoing error:

TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

When I remove comment from the following line...

var blob = file.slice(0, file.size - 1);

and change the last line to be:

reader.readAsText(blob);

this is the error from console

TypeError: undefined is not a function

It looks like that slice function is not working. Why slice() doesn't work? Is it possible to do it like this?

UPDATE:

Based on DTing's comment I found an error

My original html was

<input type="file" nv-file-select="" uploader="uploader" multiple  /><br/>
...   
<tr ng-repeat="item in uploader.queue">
...   
ng-click="validateFile(item.file)"

I have changed last line to

ng-click="validateFile(item._file)"

Now it works.

share|improve this question
    
Your code should work, so you probably aren't passing in a file to the function. What does console.log(file) give you? – DTing Apr 3 at 9:17
    
Thank you for your answer. This is the first part of output: FileLikeObject {lastModifiedDate: Fri Apr 03 2015 11:21:48 GMT+0200 (Central European Summer Time), size: 47, type: "text/plain", name: "test.txt", _createFromFakePath: function…} – A.Z. Apr 3 at 9:24
    
Ya you aren't passing in the Files you are passing in a construct that angular file upload uses to represent the files that copies the name and size. Can't really help with this question unless you put more code and we see what and where you are calling this function with. – DTing Apr 3 at 9:33
    
Actually you were very helpful. As I said I am using github.com/nervgh/angular-file-upload to upload files. I have been passing wrong value from the beggining. “File” property of “uploader” is a FileLikeObject, but uploader._file is actually a file. I made a big mistake by not outputting to console “uploader.file” as you suggested. I assumed that if I have size and name that I have file object which was wrong from the begging. Thank you very much you did a great job. – A.Z. Apr 3 at 10:21
    
You should mark this question as answered. – Jürgen 'Kashban' Wahlmann Apr 17 at 9:04

1 Answer 1

up vote 0 down vote accepted

Have a look at the File API spec, the FileReader section: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

It has a number of .readAsXXX methods, these should allow you to inspect the contents of the file before uploading it to the server.

share|improve this answer
    
Thanks btk, This is not what I was looking for, but it is a good extension to original question. I am aware of FIle API, my problem was that I was working with a wrong object. Thanks to DTing I have solved my problem. I am accepting this answer to close this thread because I cannot accept DTing's comment. – A.Z. Apr 30 at 9:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.