title: phonegap filetransfer to upload picture to server
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; HellowWorld PhoneGap App &lt;/title&gt;
  &lt;script type="text/javascript" charset="utf-8" src="cordova.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
  alert("Ready ");
  }
  
  function capture(){
      navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
          destinationType: Camera.DestinationType.FILE_URI,
          sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
      }); 
  }
  
  var image = document.getElementById('myImage');
      image.src = imageData;
      var blob = image[0].getAsFile();
      window.URL = window.URL || window.webkitURL;
      var blobUrl = window.URL.createObjectURL(blob);
  
      var file = blob;
      upload(file);
  
  
  function uploadImage(file){
  
      
  
          var fd = new FormData();
          fd.append("file", file);
          var xhr = new XMLHttpRequest();
  
          xhr.open('POST', 'uploads/upload.php', true);
          xhr.send(fd);
  
      }
  
  function onUploadSuccess(){
      alert('Photo Uploaded Successfully');
  }
  
  function onUploadError(){
      alert('Error uploading photo');
  }
  
  function onSuccess(imageData) {
      var image = document.getElementById('myImage');
      image.src = imageData;
      uploadImage(imageData);
  }
  
  function onFail(message) {
      alert('Failed because: ' + message);
  }
    
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Upload images to remote server&lt;/h1&gt;
  
  &lt;div class="app"&gt;
  &lt;h4&gt;&lt;a href="#" onclick="capture();"&gt;Select an Image&lt;/a&gt;&lt;/h4&gt;
  &lt;img id="myImage" src="" width="50%"&gt;
  &lt;/div&gt;
      
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  $destination = 'uploads/';
  
  if (isset($_FILES["file"]["name"])) {
  
      $name = $_FILES["file"]["name"];
      $tmp_name = $_FILES['file']['tmp_name'];
      $error = $_FILES['file']['error'];
  
      //echo $name;
      //echo $tmp_name;
      //echo $error;
  
      move_uploaded_file($_FILES['file']['tmp_name'], $destination.$name);
  
  }
  
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>so i tried creating a phonegap app to upload pictures to the server. i first created a upload folder and pasted the upload.php there. the javascript and html is index.html. i tried running, it allows me to take and view the picture but there is an error in uploading the picture. how come? what have i wrote wrong?</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  print_r($_FILES);
  move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/". $_FILES["file"]["name"]); 
  ?&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("deviceready", onDeviceReady, false);
  
  function onDeviceReady() {
    alert("Ready ");
  }
  
  function capture() {
    navigator.camera.getPicture(onSuccess, onFail, {
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
    });
  }
  
  
  function uploadImage(imageData) {
    var serverURL = "localhost:3000/uploads/upload.php";
    var options = new FileUploadOptions();
    options.fileKey = 'file';
    options.fileName = imageData.substr(imageData.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
  
    var ft = new FileTransfer();
    ft.upload(imageData, serverURL, onUploadSuccess, onUploadError, options);
  }
  
  function onUploadSuccess() {
    alert('Photo Uploaded Successfully');
  }
  
  function onUploadError() {
    alert('Error uploading photo');
  }
  
  function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = imageData;
    uploadImage(imageData);
  }
  
  function onFail(message) {
    alert('Failed because: ' + message);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt; HellowWorld PhoneGap App &lt;/title&gt;
    &lt;script type="text/javascript" charset="utf-8" src="cordova.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt;Upload images to remote server&lt;/h1&gt;
  
    &lt;div class="app"&gt;
      &lt;h4&gt;&lt;a href="#" onclick="capture();"&gt;Select an Image&lt;/a&gt;&lt;/h4&gt;
      &lt;img id="myImage" src="" width="50%"&gt;
  
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>