Sending a CSV file from browser to nodejs server

Question

I am trying to send a csv file which is uploaded by the user, from browser to nodejs server for processing (file is over 50 mb, so the page becomes unresponsive). I\'m using

Answer 1

So, after looking around, I found that the problem was not my XMLHttpRequest. The request was received by the server just fine, but the body-parser could not parse the text/csv and multipart/form-data content-type. Here is the step by step answer to this problem.

1. In the client/browser-end whenever you are sending a large file to the server, convert it into multipart/form-data . It is the correct way of sending a text/csv/anyfile to the server.

   var csv=document.getElementById('inputFile').files[0];
   var formData=new FormData();
   formData.append("uploadCsv",csv);
   var request = new XMLHttpRequest();
   
    //here you can set the request header to set the content type, this can be avoided.
    //The browser sets the setRequestHeader and other headers by default based on the formData that is being passed in the request.
    request.setRequestHeader("Content-type", "multipart/form-data"); //----(*)
    request.open("POST","/handleFile", true);
   request.onreadystatechange = function (){
       if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
       console.log("yey");
       }
   }
   
   request.send(formData);
   

So, this is how you'll send your http request to the nodejs server.

2. On Node js server: Normally for application/json or any other request type the body-parser would have worked fine. But for large data and files i.e. multipart/form-data body-parser cannot parse the req.body. Thus it will give req.body as {} (empty object). Read about body-parser here.

So for these content-type you can use other middleware for handleling the request. Some are multer,multiparty,busboy etc. I used multer. Here is the code snipet.

    //EXPRESS
    var express = require('express')
    var app = express()

    var config=require('./config.js');
    //multer
    var multer  = require('multer');
    var upload = multer();
    app.post('/handleFile',upload.single('uploadCsv'), function(req, res, next) {
          // req.file is the `uploadCsv` file 
          // req.body will hold the text fields, if there were any 
          console.log(req.file);
          // the buffer here containes your file data in a byte array 
          var csv=req.file.buffer.toString('utf8');
     });

NOTE: This will still give you an error in nodejs server. hint: It has something to do with the line (*). Try removing it and see what happens. Google the rest ;)