0

I want to upload a pdf from jspdf to my server. I use Ajax for it.

I open the Javascript by a function in my form.

onsubmit="pdferzeugen();"

above the ajax code i create the pdf by "jspdf" and save it to a datauri (base64).

Javascript:

var datauri = pdf.output('datauri');
var data = new FormData();
data.append("pdf_data", datauri);
    
$.ajax({
    url: "./uploads/upload.php",
    type: "POST",
    processData: false,
    contentType: false,
    data: data,
});

upload.php:

if(!empty($_POST['pdf_data'])){
    $data = $_POST['pdf_data'];
    $fname = "test.pdf"; // name the file
    $file = fopen("./uploads/" .$fname, 'w'); // open the file path
    fwrite($file, $data); //save data
    fclose($file);
}

But this isnt working for me. Chrome always say:

jquery.min.js:9600 XHR failed loading: POST "http://app-her-visitor/begehung/uploads/upload.php".

I searched whole google for this error, but no success. I hope you can help me :-)

Thanks for help

Greetings

doodz
  • 1
  • 1
  • Did you try it on another browser – RiggsFolly Jan 26 '21 at 10:31
  • yes same reaction, it wont upload the File – doodz Jan 26 '21 at 10:38
  • I think 9600 is probably a line number. Simplest way to find out whats wrong might be to use the not minified library then you will be able to see line whatever and its code – RiggsFolly Jan 26 '21 at 10:41
  • But first I would be tempted to get rid of `processData: false, contentType: false,` and see what happens – RiggsFolly Jan 26 '21 at 10:43
  • I got rid of `processData: false, contentType: false,` and now chrome says `Uncaught TypeError: Illegal invocatio`, i already changed the Type from base64 to FormData, i thought i can send it like that? – doodz Jan 26 '21 at 10:48

2 Answers2

0

The issue is between the data you are sending. Verify your data before sending it through ajax because the data type should be:

  1. PlainObject or String or Array & success method must have at least one argument
  2. Type: Function( Anything data, String textStatus, jqXHR jqXHR )

Good Luck.

John Doe
  • 1,401
  • 1
  • 3
  • 14
  • I dont know how to send my pdf with PlainObject, String or Array. The Thread i looked at says its working like that but it didnt [link]https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php. I need to convert my blob data to FormData und send it then, thats what i did. When i convert my FormData with `btoa` it works but there is no pdf data in my php script... – doodz Jan 26 '21 at 15:31
0

The answer was i refreshed the page after submitting the form and send the base64 Data to my server.

I need to prevent it from refreshing page so it will successfully send the data.

HTML

onsubmit="pdferzeugen();return false"

Javascript

var datauri = pdf.output('dataurl');

$.ajax({
    url: "./uploads/upload.php",
    type: "POST",
    data: { pdf: datauri },
    success: function(data) {},
});

PHP

$pdf = str_replace('data:application/pdf;base64,', '', $_POST['pdf']);
$pdf_decoded = base64_decode ($pdf);
$pdf = fopen ('Begehungsprotokoll.pdf','w');
fwrite ($pdf,$pdf_decoded);
fclose ($pdf);

The return false in the onsubmit will prevent it from reload the page and now the pdf upload to my server.

doodz
  • 1
  • 1