HTML5 slice, the result file is corrupted
I have a file upload function and using the slice api from html5, I slice each file into 1MB chunk, but the final result cause the file to be corrupted. sometimes, the end result smaller than the original file, and sometimes even though it's the correct size, I still can't open it. anyone have any idea? or solution?
This is the part for slicing

            function sendRequest() {           
                var blob = document.getElementById('fileToUpload').files[0];
                var originalFileName = blob.name;
                const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
                const SIZE = blob.size;
                
                var start = 0;
                var end = BYTES_PER_CHUNK;
                
                while( start < SIZE ) {                    
                    if (blob.webkitSlice) {
                      var chunk = blob.webkitSlice(start, end);
                    } else if (blob.mozSlice) {
                      var chunk = blob.mozSlice(start, end);
                    }       
                                 
                    uploadFile(chunk, originalFileName);
                    start = end;
                    end = start + BYTES_PER_CHUNK;
                }
            }

           
            function uploadFile(blobFile, fileName) {
                var progress = document.createElement('progress');
                progress.min = 0;
                progress.max = 100;
                progress.value = 0;
                bars.appendChild(progress);   
                             
                var fd = new FormData();
                fd.append("fileToUpload", blobFile);

                var xhr = new XMLHttpRequest();                
                xhr.open("POST", "upload.php"+"?"+"file1="+fileName, true);
                
                xhr.onload = function(e) {
                  //make sure if finish progress bar at 100%
                  progress.value = 100;
                  
                  //counter if everything is done using stack
                  uploaders.pop();
                  
                  if (!uploaders.length) {
                      bars.appendChild(document.createElement('br'));
                      //bars.appendChild(document.createTextNode('DONE :)'));
                      //bars.appendChild(alert("It's Done"));
                      
                      // Reset from previous runs. still does not work if there is alert
                      //bars.innerHTML = '';
                    }                  
                  };
                  
                xhr.upload.onprogress = uploadProgress(event);
                //xhr.upload.addEventListener("progress", uploadProgress, false);  
                uploaders.push(xhr);
                xhr.send(fd);
            }       

and this is the php file for accepting the binary chunk

    <?php
    
    $target_path = "uploads/";
    $tmp_name = $_FILES['fileToUpload']['tmp_name'];
    $size = $_FILES['fileToUpload']['size'];
    $name = $_FILES['fileToUpload']['name'];
    
    $originalName = $_GET['file1'];
    
    print_r("*******************************************\n");
    
    print_r($originalName);
    print_r("\n");
    
    print_r($_FILES);
    print_r("\n");
    
    print_r("*******************************************\n");
    $target_file = $target_path . basename($name);
    
    //Result File
    $complete = $originalName;
    $com = fopen("uploads/".$complete, "ab");
    error_log($target_path);
    
    if ( $com ) {
        // Read binary input stream and append it to temp file
        $in = fopen($tmp_name, "rb");
        if ( $in ) {
            while ( $buff = fread( $in, 1048576 ) ) {
                fwrite($com, $buff);
            }   
        }
        fclose($in);
        fclose($com);
    }
    
    
    ?>
HTML5 slice, the result file is corrupted
===

I have a file upload function and using the slice api from html5, I slice each file into 1MB chunk, but the final result cause the file to be corrupted. sometimes, the end result smaller than the original file, and sometimes even though it's the correct size, I still can't open it. anyone have any idea? or solution?
This is the part for slicing

            function sendRequest() {           
                var blob = document.getElementById('fileToUpload').files[0];
                var originalFileName = blob.name;
                const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
                const SIZE = blob.size;
                
                var start = 0;
                var end = BYTES_PER_CHUNK;
                
                while( start < SIZE ) {                    
                    if (blob.webkitSlice) {
                      var chunk = blob.webkitSlice(start, end);
                    } else if (blob.mozSlice) {
                      var chunk = blob.mozSlice(start, end);
                    }       
                                 
                    uploadFile(chunk, originalFileName);
                    start = end;
                    end = start + BYTES_PER_CHUNK;
                }
            }

           
            function uploadFile(blobFile, fileName) {
                var progress = document.createElement('progress');
                progress.min = 0;
                progress.max = 100;
                progress.value = 0;
                bars.appendChild(progress);   
                             
                var fd = new FormData();
                fd.append("fileToUpload", blobFile);

                var xhr = new XMLHttpRequest();                
                xhr.open("POST", "upload.php"+"?"+"file1="+fileName, true);
                
                xhr.onload = function(e) {
                  //make sure if finish progress bar at 100%
                  progress.value = 100;
                  
                  //counter if everything is done using stack
                  uploaders.pop();
                  
                  if (!uploaders.length) {
                      bars.appendChild(document.createElement('br'));
                      //bars.appendChild(document.createTextNode('DONE :)'));
                      //bars.appendChild(alert("It's Done"));
                      
                      // Reset from previous runs. still does not work if there is alert
                      //bars.innerHTML = '';
                    }                  
                  };
                  
                xhr.upload.onprogress = uploadProgress(event);
                //xhr.upload.addEventListener("progress", uploadProgress, false);  
                uploaders.push(xhr);
                xhr.send(fd);
            }       

and this is the php file for accepting the binary chunk

    <?php
    
    $target_path = "uploads/";
    $tmp_name = $_FILES['fileToUpload']['tmp_name'];
    $size = $_FILES['fileToUpload']['size'];
    $name = $_FILES['fileToUpload']['name'];
    
    $originalName = $_GET['file1'];
    
    print_r("*******************************************\n");
    
    print_r($originalName);
    print_r("\n");
    
    print_r($_FILES);
    print_r("\n");
    
    print_r("*******************************************\n");
    $target_file = $target_path . basename($name);
    
    //Result File
    $complete = $originalName;
    $com = fopen("uploads/".$complete, "ab");
    error_log($target_path);
    
    if ( $com ) {
        // Read binary input stream and append it to temp file
        $in = fopen($tmp_name, "rb");
        if ( $in ) {
            while ( $buff = fread( $in, 1048576 ) ) {
                fwrite($com, $buff);
            }   
        }
        fclose($in);
        fclose($com);
    }
    
    
    ?>