文件上传适用于 Postman 但不适用于从浏览器运行的 Javascript

Question

I am working on file upload via AJAX,Javscript and Spring MVC Controller and in this Process Controller is able to read the file which is passed from Postman but not from Javascript and AJAX running in the browser.

Postman details are in the below screenshot.

Controller Log for Postman Request is as mentioned below.

2020-07-30 10:24:01,670 [http-nio-8080-exec-541] DEBUG o.s.web.servlet.DispatcherServlet - DispatcherServlet with name 'Search' processing POST request for [/bulkuploadreportstg]
2020-07-30 10:24:01,695 [http-nio-8080-exec-541] DEBUG o.s.w.m.c.CommonsMultipartResolver - Found multipart file [blreportexcel] of size 11856 bytes with original filename [BerichtInfo_Datei_Export_201973112055.xlsx], stored at [D:\DTS\Apache_8.5.43\work\Catalina\localhost\upload_113af7dc_1739a8f843a__7fe8_00000001.tmp]
2020-07-30 10:24:01,695 [http-nio-8080-exec-541] DEBUG o.s.w.s.m.m.a.RequestMappingHandlerMapping - Looking up handler method for path /bulkuploadreportstg
2020-07-30 10:24:01,695 [http-nio-8080-exec-541] DEBUG o.s.b.f.s.DefaultListableBeanFactory - Returning cached instance of singleton bean 'BulkUploadController'
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] INFO   Received file to upload the data into staging table is:org.springframework.web.multipart.commons.CommonsMultipartFile@b67a7f0
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] INFO   I am inside bulk upload stage controller
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] DEBUG o.s.web.servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'Search': assuming HandlerAdapter completed request handling
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] DEBUG o.s.w.m.c.CommonsMultipartResolver - Cleaning up multipart file [blreportexcel] with original filename [BerichtInfo_Datei_Export_201973112055.xlsx], stored at [D:\DTS\Apache_8.5.43\work\Catalina\localhost\upload_113af7dc_1739a8f843a__7fe8_00000001.tmp]
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] DEBUG o.s.web.servlet.DispatcherServlet - Successfully completed request

Below is the HTML component and respective JQUERY and AJAX.

<div class="container-fluid">
    <div class="card">
                    <div class="card-header bg-info">
                        BERICHT DATEI IMPORTIEREN
                    </div>
                    <div class="card-body">
                            <form id="blkuploadform2" enctype="multipart/form-data">
                                <div class="form-group">
                                            <h6>Datei Importieren Method :</h6>
                                            <p>Diese Seite wird verwendet, um die Datei mit 1 oder mehr als 1 Berichtsdatensätzen gleichzeitig in die Datenbank hochzuladen.</p>
                                            <br>
                                            <input type="file" id="blkUploadReport2" name="blkUploadReport2">  <span class="fas fa-asterisk"></span>
                                </div>
                            </form>
                            <div class="col-sm-offset-2 col-sm-6">
                                    <button class="btn btn-success btn-raised btn-sm" id="saveEdit2" onClick="bulkupdValidator2()">
                                        IMPORTIEREN <span class="fas fa-save"></span> 
                                    </button>                   
                            </div>
                    </div>
        </div>
</div>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">            
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel1">Bestätigung</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>            
                <div class="modal-body">
                   <p>Sie sind im Begriff Berichtsdaten zu speichern. Möchten Sie fortfahren?</p>                    
                </div>                
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">NEIN</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" onClick="blksavedata('report')">JA</button>
                </div>
            </div>
        </div>
</div>
<div class="modal fade" id="error-message" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">            
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel2">Fehler</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>            
                <div class="modal-body">
                   <p id="error"></p>                    
                </div>                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
                </div>
            </div>
        </div>
</div>
<div class="modal fade" id="success-message" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">            
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel3">Erfolg</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>            
                <div class="modal-body">
                   <p id="success"></p>                   
                </div>                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
                </div>
            </div>
        </div>
</div>

//Function to validate the File input using method 2.
function bulkupdValidator2(){
    if($('#blkuploadform2').valid()){
        $('#confirm-save').modal('show');
        console.log("I am success");
    }
    else{
        document.getElementById("error").innerText="Bitte füllen Sie die erforderlichen Felder mit rotem Text aus.";
         $('#error-message').modal('show');
    }
    
}

$(document).ready(function(){
    $('#blkuploadform2').validate({
        rules:{
            blkUploadReport2:{
                required:true,
                extension:'xlsx'
            }
        },
        messages:{
            blkUploadReport2:{
                required:"Bitte laden Sie die Datei im gewünschten Format (.xlsx) hoch.",
                extension:"Bitte laden Sie die Datei im gewünschten Format (.xlsx) hoch."
            }
        }
    })
})

//Function to Validate the data from uploaded file and load them into staging tables accordingly.

function blksavedata(typeOfData){

    $('#confirm-save').modal('hide');
    var fileInput=document.getElementById("blkuploadform2");
    var form=new FormData();
    console.log(fileInput[0].files[0]);
    console.log(fileInput[0].files[0].name);
    form.append('file',fileInput[0].files[0],fileInput[0].files[0].name);
    var fileType=typeOfData;
    
    if (fileType=='report')
        {
         $.ajax({
             type:"POST",
             url:"/DTSDBL/bulkuploadreportstg",
             data:form,
             processData: false,
             contentType: false,
             success:function(data){                
                console.log("I am success returned form controller");                                                
             },
             error:function(e){
                console.log("I am error returned form controller");              
             }
            });
        
        }
     
}

Controller Log for Request from Javascript and Ajax:

2020-07-30 10:23:18,388 [http-nio-8080-exec-535] DEBUG o.s.web.servlet.DispatcherServlet - DispatcherServlet with name 'Search' processing POST request for [/bulkuploadreportstg]
2020-07-30 10:23:18,435 [http-nio-8080-exec-535] DEBUG o.s.w.m.c.CommonsMultipartResolver - Found multipart file [file] of size 11856 bytes with original filename [BerichtInfo_Datei_Export_201973112055.xlsx], stored at [D:\DTS\Apache_8.5.43\work\Catalina\localhost\\upload_113af7dc_1739a8f843a__7fe8_00000000.tmp]
2020-07-30 10:23:18,435 [http-nio-8080-exec-535] DEBUG o.s.w.s.m.m.a.RequestMappingHandlerMapping - Looking up handler method for path /bulkuploadreportstg
2020-07-30 10:23:18,435 [http-nio-8080-exec-535] DEBUG o.s.b.f.s.DefaultListableBeanFactory - Returning cached instance of singleton bean 'BulkUploadController'
2020-07-30 10:23:18,450 [http-nio-8080-exec-535] DEBUG o.s.web.cors.DefaultCorsProcessor - Skip CORS processing: request is from same origin
2020-07-30 10:23:18,450 [http-nio-8080-exec-535] INFO  DTSDB - Received file to upload the data into staging table is:null
2020-07-30 10:23:18,450 [http-nio-8080-exec-535] INFO  DTSDB - I am inside bulk upload stage controller
2020-07-30 10:23:18,481 [http-nio-8080-exec-535] DEBUG o.s.web.servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'Search': assuming HandlerAdapter completed request handling
2020-07-30 10:23:18,481 [http-nio-8080-exec-535] DEBUG o.s.w.m.c.CommonsMultipartResolver - Cleaning up multipart file [file] with original filename [BerichtInfo_Datei_Export_201973112055.xlsx], stored at [D:\DTS\Apache_8.5.43\work\Catalina\localhost\\upload_113af7dc_1739a8f843a__7fe8_00000000.tmp]
2020-07-30 10:23:18,481 [http-nio-8080-exec-535] DEBUG o.s.web.servlet.DispatcherServlet - Successfully completed request

Please help me out here what am I missing in the Javascript and Ajax request?

Answer 1

I have fixed it as I am using the wrong file name while sending it via AJAX due to which it is not matching with Multipart file name in Controller. Due to this reason, file was not identified. Now the name of the files has been changed to same as the Multipart File name in Controller Request body and it is working. Simple mistake cost 1 whole day.