XMLHttpRequest sending .PDF to PHP and saving on server, results in some data corruption

Question

I have a pdf file in the form of a blob, that I'm trying to send to php to have it saved locally to my webserver. Currently, if I use saveAs() to save the pdf locally, the pdf is readable and uncorrupted. However, once the data is sent as formdata through to my php script, it saves in a larger filesize which has data loss, and ends up not being able to be opened in adobe reader.

I've diffed the two pdfs next to eachother, and you can see that certian characters are just not getting copied over.

Diffed PDFs, Left is working PDF, right is corrupted

I'm reading the blob with FileReader, and appending the formdata with the result. Then I use XMLHttpRequest to send the data to my pdf, where it fwrites the file.

I'm ASSUMING this is an encoding error, but I just don't know enough about how files are encoded to do my own educated investigating.

 function transferData(){              
            var data = new FormData();
            var reader = new FileReader();
            reader.readAsBinaryString(blobHolder);
            reader.addEventListener('loadend',
                    function(){
                    data.append("data" , reader.result);
                    var xhr2 = new XMLHttpRequest();
                    xhr2.open( 'post', 'php/savefile.php', true );
                    xhr2.send(data);
            });
      }

<?php

if(!empty($_POST['data'])){
$data = $_POST['data'];
$fname = "serverGeneratedPDF.pdf";

$file = fopen("../upload/" .$fname, 'w+');
fwrite($file, $data);
fclose($file);
}

?>

Answer 1

Wanted to update this issue with how I got it to work.

I ended up sending the entire blob object over as formData, and not using FileReader. In my PHP file I then used the file_get_contents() function which finally saved the day. It was able to pull the hard "data" out of the blob that was sent over!!!

Updated Code:

JS:

 function transferData(){              
                    var data = new FormData();
                    data.append('sentBlob', blobHolder);
                    var xhr2 = new XMLHttpRequest();
                    xhr2.open( 'post', 'php/savefile.php', true );
                    xhr2.send(data);
              }

PHP:

<?php

$data = file_get_contents($_FILES['sentBlob']['tmp_name']);
$fname = "serverGeneratedPDF.pdf";

$file = fopen("../upload/" .$fname, 'wb');//creates new file
fwrite($file, $data);
fclose($file);

?>

My "ah-ha" moment was figuring out two things:

1. My blob was sending to the $_FILES var instead of $_POST
2. Once the php handled the blob, using the '$_FILES[]['tmp_name']' was finally the way to get the raw binary data out of the blob (took me days to get to this point)

Hope this helps someone!