Save generated PDF file on the server with jsPDF and PHP

Question

I'm trying to save the generated PDF file with JSPDF plugin into the server instead of being saved on the client side, the javascript part that handles the JsPDF is this:

<script type="text/javascript">

(function(){
 var 
form = $('.form'),
cache_width = form.width(),
//cache_height = form.height(),
a4  =[ 595.28,  841.89];  // for a4 size paper width and height

$('#create_pdf').on('click',function(){
$('body').scrollTop(0);
createPDF();
 });
//create pdf
function createPDF(){
getCanvas().then(function(canvas){
    var 
    img = canvas.toDataURL("image/png"),

    doc = new jsPDF({
      unit:'px', 
      format:'a4'
    });     

 var imgWidth = 220;
 var pageHeight = 295;  
 var imgHeight = canvas.height * imgWidth / canvas.width;
 var heightLeft = imgHeight;

 var doc = new jsPDF('p', 'mm');
 var position = 0;

 doc.addImage(img, 'PNG', 0, position, imgWidth, imgHeight);
 heightLeft -= pageHeight;

 while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(img, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
   }

 var blob = doc.output('blob');
 var formData = new FormData();
 formData.append('pdf', blob);
  $.ajax({
url: 'upload.php', 
type: 'POST',
data: formData,
dataType: 'text',
cache: false,
processData: false,
contentType: false,
success: function(response){
alert(response); 
console.log(response)
 },
   error: function(err){
         alert(err);
        console.log(err)
  }
 });

});
  }

// create canvas object
    function getCanvas(){
      form.width((a4[0]*1.33333) -80).css('max-width','none');
      return html2canvas(form,{
       imageTimeout:2000,
       removeContainer:true
       });  
     }

  }());

 </script>

the upload.php file should move the generated pdf file or its content to the Uploads folder but it seems that the $_FILES['data'] is empty

   <?php
    if(!empty($_FILES['data'])) {
// PDF is located at $_FILES['data']['tmp_name']

$content = file_get_contents($_FILES['data']['tmp_name']);
//echo $content;
$location = "uploads/";
move_uploaded_file($_FILES['data']['tmp_name'], $location.'random-name.pdf');

  } else {
throw new Exception("no data");
  }

the response I get back from Ajax is "Notice: Undefined index: data ". Thanks in advance for any help.

Answer 1

I finally got it to work using this code:

var pdf = btoa(doc.output()); 

    var file_name = $('#id').val();
    //var file_name = 'hello world';
        $.ajax({
          method: "POST",
          url: "upload.php",
          data: {data: pdf, filename: file_name},
        }).done(function(data){
        //   alert(data);
           console.log(data);
        }); 

and on the server side upload.php like this:

if(!empty($_POST['data'])){
 $data = base64_decode($_POST['data']);

 $fileName = $_POST['filename'];

 file_put_contents( "uploads/".$fileName.".pdf", $data );
 } else {
 echo "No Data Sent";
 }
 exit();