HTML 5 File Reader reading javaScript files

Question

I'm trying to allow users to drag and drop a folder containing JavaScript files into an html5 page. This is what I currently 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]);
            }
        });
    }
};

So the dragging and dropping works, but I'm having problems reading the file content.

$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 am not getting any error messages, which makes it hard to debug. Am I doing something wrong? has anyone had any issues doing similar tasks?

user_1979406 · Answer

Below is working on mine, this is typescript

You should convert FileEntry To Standard File, before passing to FileReader.

const convertFileEntryToStandardFile = async (files: any[]) => {
    if (files) {
        let plainFiles = [];
        files.forEach(f=> {
            let plainFile = readFile(f);
            plainFiles.push(plainFile);
        });

        return  plainFiles;
    }
}

const readFile = async (fileEntry: any) => {       
      return await new Promise((resolve, reject) => fileEntry.file(resolve, reject));
  }

HTML 5 File Reader reading javaScript files

3 Answers