CODEWITHSUNDEEP
javascriptajaxhtmlpost
Nauman Zafar
Nauman Zafar

Reputation: 1103

Post request missing boundary header

I am trying to send a csv file to the server. I am using FileReaderAPI to load the file and then send it over via ajax. But I am receiving the following error.

For request 'POST /api/upload' [Missing boundary header]

JS

$('#upload-file-btn').on('click', function(e){
      e.preventDefault();

      var file = document.getElementById('input_file').files[0];
      console.log(file);
      reader = new FileReader();
      reader.onload = function () {
          var source = reader.result;
          var payload = {source: source};
          console.log(source);
          $.ajax({
           url:"http://localhost:9000/api/upload",
           type:"POST",
           data: JSON.stringify(payload),
           success: function(data){
              console.log(data);
           }
         });

      }
      reader.readAsText(file);
});

Some solutions suggest including "Content-Type" : "multipart/form-data" header manually causes the problem. Which I am not using but still get the above issue.

Upvotes: 0

Views: 3122

Answers (1)

Musa
Musa

Reputation: 97672

If you need to send data as a file, you have to use a FormData object to send the multipart/form-data data via ajax.

     var fd = new FormData();
     fd.append('source', $('#input_file')[0].files[0]);
     $.ajax({
       url:"http://localhost:9000/api/upload",
       type:"POST",
       data: fd,
       contentType: false,
       processData: false,
       success: function(data){
          console.log(data);
       }
     });

Upvotes: 2

Related Questions