Uploading PDF from jsPDF with AJAX using binary data

Question

I am attempting to pass a PDF I have generated on frontend javascript using jsPDF to a Spring Framework MVC backend. Below is the front end code I have written:

var filename = "thefile";
var constructURL = '/daas-rest-services/dashboard/pdfPrintUpload/' + filename;
var url = restService.getUrl(constructURL);
var fileBytes = btoa(pdf.output());
$http.post(url, fileBytes).success(function(data) {
    console.log(data);
  })
  .error(function(e, a) {
    console.log(e);
    console.log(a);

  });

The pdf variable has been generated properly and can confirm is opens correctly when calling pdf.save("filename"). Below is the Java code which has been written on the Spring MVC backend for this call:

@RequestMapping(method = RequestMethod.POST, value = "/pdfPrintUpload/{documentName}")
public @ResponseBody String postPrintDocument(@PathVariable String documentName, @RequestParam byte[] fileBytes) {
    String methodName = "postPrintDocument";
    if(logger.isLoggable(Level.FINER)){
        logger.entering(CLASS_NAME, methodName);               
    }
    String check;
    if(fileBytes != null){
        check = "not null";
    } else {
        check = "null ";
    }
    //Decoding the bytestream
    //Save to file location
    //return file location
    String returnValue = "HI " + documentName + "  " + check;
    if (logger.isLoggable(Level.FINER)) {
        logger.exiting(CLASS_NAME, methodName);
    }
    return returnValue;
}

Each time I make a request, I am getting 400 Errors telling me:

Error 400: Required byte[] parameter 'fileBytes' is not present

I can confirm in the request payload that a large amount of data is being transmitted, however the backend does not seem to want to accept the parameter.

The purpose of doing this is that I want to be able to get the data from the pdf and then decode it on the backend so I can later publish the pdf to a location on the server. Is there something I am missing in my code for these requests to keep failing, and is there an easier more efficient way to achieve this functionality?

Answer 1

The solution was changing the @RequestParam to @RequestBody. @RequestParam is a parameter which is sent in the path. @RequestParam vs @PathVariable

Answer 2

Try using ng-file-upload. The link and the examples are available on the link

ng-file-upload

for the sever side code try using this

    @RequestMapping(value = "/pdfPrintUpload")
    @ResponseBody
    public void postPrintDocument(@RequestParam("file") MultipartFile file) {

            InputStream is = file.getInputStream();
            OutputStream os = new FileOutputStream(/*path to save file*/);
            byte[] buffer = new byte[1024];
            int length;
            while ((length = is.read(buffer)) > 0)
                os.write(buffer, 0, length);
            is.close();
            os.close();

        } catch (Exception e) {
            e.printStackTrace();
        }
    }