How to import excel file using HTML Input file and read the file contents in Node.js (How to send the fullpath to Node.js)

Question

I have bit of confusion regarding the reading of file using HTML, AngularJS and Node.js. Since I am bit confused I am hoping someone can guide me with this.

I am trying to import a file using HTML and Angularjs and it is working fine. I am able to import a file but I am not sure how can I send the whole file to Node.js. Due to Browser restrictions, I am unable to get the full path of the file so I am just wondering if I can not send the full path then how can I access the data of the Excel file in Node.js.

Here is the code that I am working on:

<div class="custom-file">
    <input type="file" fileUploader="uploadFile" class="custom-file-input"></input>
    <label class="custom-file-label" for="inputGroupFile01">{{ FileName }}</label>
</div>

My angularjs function that should obtain the FILEPATH and sent it to the corresponding NODE.JS:

app.directive('fileUploader', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.fileUploader);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

app.controller('TemplatesController',function($scope){
        
    $scope.FileName     =   "Choose a Excel File";
    
    //Import an Excel File from the Local System
    $scope.uploadFile = function(event){
        var files = event.target.files;
        $scope.FileName = files[0].name;
        console.log($scope.FileName)
        $http({
            url     : "/UploadFIle",
            method  : "post",
            file    : files[0] //PATH OF THE FILE WHICH I AM UNABLE TO GET
        }).success(function(response) {
            console.log(response);
        });


    };
});

My index.js which will route to respective Node Control file:

//Read the Excel File Data
app.post('/UploadFIle',function(req,res){
    console.log(req.body);
    ReadExcelFile.ReadExcelFileContent(req.body,function(data){
        console.log("INDEX JS");
        console.log(data);
    });
});

My Node.js function that will read the data from obtained file:

//ReadExcelFile.js

const xlsxFile      =   require('read-excel-file/node');

exports.ReadExcelFileContent    =   function(req,callback){
    
    var fileLocation    =   req.path; //NOT SURE HOW TO ACCESS THE FILEPATH HERE BECAUSE I WANT TO READ THE DATA HERE
    console.log(fileLocation);
}

Also, after the file upload I am trying to change the name of FileName but seems like two way data binding is not working due to which in the HTML page it does not display the FileName that I just uploaded.

Hello again, I tried many things to send the path of the read file to Node.js but none of them are working. How can I resolve this?

Answer 1

As you mentioned in the question, You cannot access your OS' file system because JavaScript in browser has no access to the File System.

I have found this article which explains how to handle file upload both on the backend (NodeJS/ExpressJS) and the frontend (AngularJS).

The frontend example uses ng-file-upload module.

Now you can choose a file from your disk, upload it and send it to your NodeJS server and access the file data after your multer middleware runs (explained in the article). Hope it helps:).

Answer 2

why are you send your file path? after you add a file to input tag in UI, it have your file. then you want to send that file to node.js

app.controller('TemplatesController',function($scope){
        
    $scope.FileName     =   "Choose a Excel File";
    
    //Import an Excel File from the Local System
    $scope.uploadFile = function(event){
        var files = event.target.files;
        $scope.FileName = files[0].name;
        console.log($scope.FileName)
        $http({
            url     : "/UploadFIle",
            method  : "post",
            file    : files[0] // send your file
        }).success(function(response) {
            console.log(response);
        });


    };
});

also you can change your file name like that

app.controller('TemplatesController',function($scope){
        
    $scope.FileName     =   "Choose a Excel File";
    
    //Import an Excel File from the Local System
    $scope.uploadFile = function(event){
        var files = event.target.files;
        files[0].name = 'xxxxx'  // change file name 
        $scope.FileName = files[0].name;
        console.log($scope.FileName)
        $http({
            url     : "/UploadFIle",
            method  : "post",
            file    : files[0] // send your file
        }).success(function(response) {
            console.log(response);
        });


    };
});

after you can save that file in any place using nodejs

Answer 3

Because angular is just JS code that run on the browser so it can't access file system. What you have to do is upload the file to your back-end server, then the server parse the excel file with a library like SheetJS and return the file content as JSON back to the client