I'm trying to upload a file using node and ajax but the ajax call isn't working?

Question

I'm facing error on Upload xml and upload csv am a rookie so please can you provide me a elaborate answer I've tried debugging the code on clicking upload button till upload function is working fine on jumping to uploadxml() function the data is not sent. My HTML code

<div class="file-upload">
                    <form id="file-upload-form">
                        <div class="upload">
                            <div class="col-lg-6">
                                <div class="input-group" id="one">

                                    <input type="text" class="form-control" id="t1" placeholder="Select an xml file.." >
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" id="xmlbtn">Browse</button>
                                    </span>

                                </div>
                                <input type="file" accept=".xml" class="hidden" id="xmlPicker" name="xmlFile"/>
                            </div>
                            <div class="col-lg-6">
                                <div class="input-group" id="two">

                                    <input type="text" class="form-control" id="t2" placeholder="Select an csv file.." >
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" id="csvbtn">Browse</button>
                                    </span>

                                </div>
                                <input type="file" class="hidden" accept=".csv" id="csvPicker" name="csvFile"/>
                            </div>
                        </div>
                        <div class="uploadfooter">
                            <button class="btn btn-default center" type="button" id="upload">Upload</button>
                        </div>
                    </form>
                </div>

My Js

$(document).ready(function () {

    $(".ts-sidebar-menu li a").each(function () {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })
    var menux = $('.ts-sidebar-menu li a.parent');
    $('<div class="more"><i class="fa fa-angle-down"></i></div>').insertBefore(menux);
    $('.more').click(function () {
        $(this).parent('li').toggleClass('open');
    });
    $('.parent').click(function (e) {
        e.preventDefault();
        $(this).parent('li').toggleClass('open');
    });
    $('.menu-btn').click(function () {
        $('nav.ts-sidebar').toggleClass('menu-open');
    });


     $('#zctb').DataTable();


     $("#input-43").fileinput({
        showPreview: false,
        allowedFileExtensions: ["zip", "rar", "gz", "tgz"],
        elErrorContainer: "#errorBlock43"
            // you can configure `msgErrorClass` and `msgInvalidFileExtension` as well
    });


     $("#xmlbtn").bind("click", function(){

         $("#xmlPicker").trigger("click");

     });


     $("#xmlPicker").bind("change", function(e){

         $("#t1").val($("#xmlPicker")[0].files[0].name);

     })


     $("#csvbtn").bind("click", function () {
         $("#csvPicker").trigger("click");
     });

     $("#csvPicker").bind("change", function (e) {
         $("#t2").val($("#csvPicker")[0].files[0].name)
     })





     $("#upload").on("click",function () {

         var firstfile = $("#t1").val();
         var secondfile = $("#t2").val();

         if(!firstfile || firstfile != null){
             updateXml();
         }

         if(!secondfile || secondfile != null){
             updatecsv();
         }

     })

     function updateXml(){

         var form = $("#file-upload-form").val()
         var data = new FormData(form);

         $.ajax({
             url: "/update",
             data: data,
             type: "put",
             contentType: false,
             processData: false,
             cache: false,
             success: function (response) {
                 console.log(response);

             }
         })
     }



     function updatecsv(){
         var form = $("#file-upload-form").val()
         var data = new FormData(form);
         $.ajax({
             url: "/update",
             data: data,
             type: "put",
             contentType: false,
             processData: false,
             cache: false,
             success: function (response) {
                 console.log(response);
             }
         })
     }

 });

Answer 1

This line here:

var form = $("#file-upload-form").val()

A form does not have a value, its inputs have one. FormData expects a form, so you need to give it a reference to it.

var form = $("#file-upload-form");
var data = new FormData(form[0]);  //expects a DOM form