Wsrtjtyk

Due to various issues with security of file manipulation, I am forced to submit the request via Ajax post method call. The server side URL receives this and gives out a pdf file as response. Server side code in java servlet is as below.

            ServletOutputStream out = response.getOutputStream();

        response.setContentType("application/pdf");

        response.setHeader("Content-Disposition", "attachment;filename=" + outFile);

        //create the pdf file

        response.flushBuffer();

On the client side, the javascript code is sending call to a POST which calls the above code via doPost. When the form is submitted through form.submit(), the file gets downloaded nicely as pdf file. When trying through Ajax call, it is giving me undefined response under error section. Client side code as below.

    var formData = new FormData();

//Fill formData with fields and files

    console.log('Posting form from ajax');

    $.ajax({

        url: "/createPdf",

        type: "POST",

        data: formData,

        contentType: false,

        processData: false,

        xhrFields: {

            responseType: 'blob'

        },

        success: function (response, status, xhr) {

            console.log('Processing response');

            download(response, "merged.pdf", "application/pdf" );



        },

        error: function (xhr, status, error) 

        { 

            var err = xhr.responseText; 

            alert(err); 

        }

In the above, it is not going under success response. It is going under error and alerting as undefined. What am I doing wrong here. My jquery version is 1.8.0.min.js if that matters. download function refers to http://danml.com/download.html but I have tried the other snippets too but it doesn't even come to success.

Under Inspection tools, I see success request and blob data in response, but it takes about 10-15 seconds for the blob data to show under Network in browser

Please help. I have been at it all evening and can't seem to figure out undefined response.

For ajax download you should dynamic add link, trigger click and then delete.

var formData = new FormData();

//Fill formData with fields and files

    console.log('Posting form from ajax');

    $.ajax({

        url: "/createPdf",

        type: "POST",

        data: formData,

        contentType: false,

        processData: false,

        xhrFields: {

            responseType: 'blob'

        },

        success: function (response, status, xhr) {

             var a = document.createElement('a');

            var url = window.URL.createObjectURL(response);

            a.href = url;

            a.download = 'myfile.pdf';

            a.click();

            window.URL.revokeObjectURL(url);

        },

        error: function (xhr, status, error) 

        { 

            var err = xhr.responseText; 

            alert(err); 

        }

You mentioned in your form.submit () it works without any issue. What type are you using, POST or GET? I World try to change it in your ajax request. I'm no java pro but maybe your Servlet only reacts to GET requests. When I worked with Ajax and Servlets I used http Servlet where I overwrote the doGet method.