title: uploading a file in chunks using html5
body: <p>I am trying to upload  a file in chunks using html5's File API and then reassembling it on the server side in php. I am uploading a video but when i merge the files in server side the size has increased and it is becoming a invalid file . Please note the below html5 code only works in browser chrome . Tested in Chrome 9 as this uses file API's slice function . 
  Can some one guide me on this ?
  Thanks </p>
  
  <h1>PHP source</h1>
  
  <pre><code>&lt;?php
  
  $target_path = "uploads/";
  $tmp_name = $_FILES['fileToUpload']['tmp_name'];
  $size = $_FILES['fileToUpload']['size'];
  $name = $_FILES['fileToUpload']['name'];
  
  
  $target_file = $target_path . basename($name);
  
  
  $complete = "complete.mov";
  $com = fopen("uploads/".$complete, "ab");
  error_log($target_path);
  
  // Open temp file
  $out = fopen($target_file, "wb");
  
  if ( $out ) {
      // Read binary input stream and append it to temp file
      $in = fopen($tmp_name, "rb");
      if ( $in ) {
          while ( $buff = fread( $in, 1048576 ) ) {
              fwrite($out, $buff);
              fwrite($com, $buff);
          }   
      }
      fclose($in);
      fclose($out);
  }
  fclose($com);
  
  ?&gt;
  </code></pre>
  
  <h1>HTML Source</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Upload Files using XMLHttpRequest&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
  
              window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
  
              function sendRequest() {
                  var blob = document.getElementById('fileToUpload').files[0];
                  const BYTES_PER_CHUNK = 1048576; // 1MB chunk sizes.
                  const SIZE = blob.size;
                  var start = 0;
                  var end = BYTES_PER_CHUNK;
                  while( start &lt; SIZE ) {
                      var chunk = blob.slice(start, end);
                      uploadFile(chunk);
                      start = end;
                      end = start + BYTES_PER_CHUNK;
                  }
              }
  
              function fileSelected() {
                  var file = document.getElementById('fileToUpload').files[0];
                  if (file) {
                      var fileSize = 0;
                      if (file.size &gt; 1024 * 1024)
                          fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                      else
                          fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
  
                      document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                      document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                      document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
                  }
              }
  
              function uploadFile(blobFile) {
                  //var file = document.getElementById('fileToUpload').files[0];  
                  var fd = new FormData();
                  fd.append("fileToUpload", blobFile);
  
                  var xhr = new XMLHttpRequest();
                  xhr.upload.addEventListener("progress", uploadProgress, false);
                  xhr.addEventListener("load", uploadComplete, false);
                  xhr.addEventListener("error", uploadFailed, false);
                  xhr.addEventListener("abort", uploadCanceled, false);
                  xhr.open("POST", "upload.php");
                  xhr.onload = function(e) {
                    alert("loaded!");
                    };
  
                  xhr.send(fd);
                  //alert("oen over");
              }
  
              function uploadProgress(evt) {
                  if (evt.lengthComputable) {
                      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
                  }
                  else {
                      document.getElementById('progressNumber').innerHTML = 'unable to compute';
                  }
              }
  
              function uploadComplete(evt) {
                  /* This event is raised when the server send back a response */
                  alert(evt.target.responseText);
              }
  
              function uploadFailed(evt) {
                  alert("There was an error attempting to upload the file.");
              }
  
              function uploadCanceled(evt) {
                  xhr.abort();
                  xhr = null;
                  //alert("The upload has been canceled by the user or the browser dropped the connection.");
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="form1" enctype="multipart/form-data" method="post" action="upload.php"&gt;
              &lt;div class="row"&gt;
                  &lt;label for="fileToUpload"&gt;Select a File to Upload&lt;/label&gt;&lt;br /&gt;
                  &lt;input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/&gt;
                  &lt;input type="button" value="cancel"  onClick="uploadCanceled();"/&gt;
              &lt;/div&gt;
              &lt;div id="fileName"&gt;&lt;/div&gt;
              &lt;div id="fileSize"&gt;&lt;/div&gt;
              &lt;div id="fileType"&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;input type="button" onclick="sendRequest();" value="Upload" /&gt;
              &lt;/div&gt;
              &lt;div id="progressNumber"&gt;&lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>