HTML 5 Reading javaScript file reading files

Question

I am trying to allow users to drag a folder containing javascript files onto the html 5 page. This is what I have:

$scope.files = []; //Establish dropzone var dropbox; dropbox = document.getElementById("fileDragAndDrop"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); //Events function dragenter(e) { e.stopPropagation(); e.preventDefault(); }; function dragover(e) { e.stopPropagation(); e.preventDefault(); }; function drop(e) { e.stopPropagation(); e.preventDefault(); var items = e.dataTransfer.items; for (var i = 0, item; item = items[i]; i ++) { var entry = item.webkitGetAsEntry(); if(entry) { traverseFileTree(entry); } } }; //resursive file walker function traverseFileTree(item) { if(item.isFile) { $scope.$apply(function () { $scope.files.push(item); }); } else if (item.isDirectory) { var dirReader = item.createReader(); dirReader.readEntries(function(entries) { for (var i = 0; i < entries.length; i++) { traverseFileTree(entries[i]); } }); } }; 

Thus, drag and drop is performed, but they are unable to read the contents of the file.

 $scope.parse = function () { for(var i = 0; i < $scope.files.length; i++) { var fileReader = new FileReader(); fileReader.onload = function (e) { console.log(fileReader.result); }; fileReader.onerror = function(err) { console.log(err); }; fileReader.readAsBinaryString($scope.files[i]); } }; 

I do not receive error messages, which makes debugging difficult. Am I doing something wrong? Does anyone have problems with similar tasks?

Answer 1

Not sure what your $scope , but gives it an edge.

As you use webkitGetAsEntry() , I assume this is for Chrome. In appearance, your code should give you an error. If it is not, there is a possibility that you have omitted. Usually you should get something like:

Uncaught TypeError: Failed to execute 'readAsBinaryString' in 'FileReader': argument is not a block.

in your $scope.parse function.

---

There are a few questions. First, you probably read the files as text , not as a binary string. Secondly, readAsBinaryString() deprecated, use readAsArrayBuffer() if you want to read binary data.

In addition, webkitGetAsEntry() returns a FileEntry , so you should get the error mentioned above. To read a file you can usually do:

 $scope.files[i].file(success_call_back, [error_call_back]); 

For instance:

 function my_parser(file) { var fileReader = new FileReader(); fileReader.onload = function (e) { console.log(fileReader.result); }; fileReader.onerror = function(err) { console.log(err); }; console.log('Read', file); // Here you could (should) switch to another read operation // such as text or binary array fileReader.readAsBinaryString(file); } $scope.files[0].file(my_parser); 

---

This will give you a File object as an argument to my_parser() . Then you can usually check .type and use the appropriate read function. (Although remember the slack in the MIME type. Like in: do not rely on it, but use it as a hint.)

 if (file.type.match(/application\/javascript|text\/.*/)) { // Use text read } else if (file.type.match(/^image\/.*/)) { // Use binary read, read as dataURL etc. } else ... 

Answer 2

 $scope.parse = function () { for(var i = 0; i < $scope.files.length; i++) { var fileReader = new FileReader(); fileReader.onload = function (e) { console.log(fileReader.result); }; fileReader.onerror = function(err) { console.log(err); }; fileReader.readAsText($scope.files[i]); } };