title: android phonegap camera and image uploading
body: <p>I have been trying to make this work, searched google and here since Friday.
  My ultimate goal is to be able take multiple pictures with a title and description for each and upload them to a server, then display on a web page.</p>
  
  <p>What I have so far is: the ability to give one image a title and description, browse the gallery, find an image and select it. BUT when I do the image is uploaded along with the form, immediately. I would like to be able to do this using a submit button.</p>
  
  <p>I also have a button to take an image instead, and a preview of the image on the page appears. BUT when I do take an image with the camera I do not know how to upload my form. I was able to print to the screen the image data using a div and innerHTML call... but honestly i'm so lost and do not even know where to start posting specific snippets of code. I will post the entire page as it currently exists right now....</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;File Transfer Example&lt;/title&gt;
  
      &lt;script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
  
          var pictureSource;   // picture source
          var destinationType; // sets the format of returned value
  
          // Wait for Cordova to load
          //
          document.addEventListener("deviceready", onDeviceReady, false);
  
          // Cordova is ready
          //
  function onDeviceReady() {
      pictureSource=navigator.camera.PictureSourceType;
      destinationType=navigator.camera.DestinationType;
  }
  
  
          function browse(){
              navigator.camera.getPicture(uploadPhoto,
                                          function(message) { alert('get picture failed'); },
                                          { quality: 50,
                                          destinationType: navigator.camera.DestinationType.FILE_URI,
                                          sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }
                                          );
          }
  
          function uploadPhoto(imageURI) {
              var options = new FileUploadOptions();
              options.fileKey="file";
              options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
              options.mimeType="image/jpeg";
  
              var params = {};
              params.value1 = "test";
              params.value2 = document.getElementById('file_name').value + "";
              params.value3 = document.getElementById('file_description').value + "";
              options.params = params;
  
              var ft = new FileTransfer();
              ft.upload(imageURI, encodeURI("http://site.com/pages/upload.php"), win, fail, options);
          }
  
          function win(r) {
              console.log("Code = " + r.responseCode);
              console.log("Response = " + r.response);
              console.log("Sent = " + r.bytesSent);
          }
  
          function onFileSystemSuccess(fileSystem) {
              console.log(fileSystem.name);
          }
  
          function onResolveSuccess(fileEntry) {
              console.log(fileEntry.name);
          }
  
          function fail(evt) {
              console.log(evt.target.error.code);
          }
  
  
          function fail(error) {
              alert("An error has occurred: Code = " + error.code);
              console.log("upload error source " + error.source);
              console.log("upload error target " + error.target);
          }
  
  
  
  
  
  
  function capturePhoto() {
    // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
      destinationType: destinationType.DATA_URL });
  }
  
  function onPhotoDataSuccess(imageData) {
    // console.log(imageData);
  
    var smallImage = document.getElementById('smallImage');
    smallImage.style.display = 'block';
    smallImage.src = "data:image/jpeg;base64," + imageData;
  
    var smallTEXT = document.getElementById('smallTEXT');
    smallTEXT.style.display = 'block';
    smallTEXT.innerHTML = "data:image/jpeg;base64," + imageData;
  }
  
  function onPhotoURISuccess(imageURI) {
    // Uncomment to view the image file URI 
    // console.log(imageURI);
  
    // Get image handle
    //
    var largeImage = document.getElementById('largeImage');
  
    // Unhide image elements
    //
    largeImage.style.display = 'block';
  
    largeImage.src = imageURI;
  }
  function capturePhoto() {
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
      destinationType: destinationType.DATA_URL });
  }
  
  
  
  // Called if something bad happens.
  // 
  function onFail(message) {
    alert('Failed because: ' + message);
  }
  
  
  
  
  
  
  
          &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  </code></pre>
  
  <p><br></p>
  
  <pre><code>    &lt;h1&gt;Example&lt;/h1&gt;
      &lt;p&gt;Upload File&lt;/p&gt;
  
      &lt;form name ="filename" id="file_name_form" action="#"&gt;
      Title &lt;br&gt;&lt;input type="text" name="name" id="file_name" /&gt;&lt;br&gt;
      Description &lt;br&gt;&lt;textarea type="text" name="description" id="file_description" /&gt;&lt;/textarea&gt;
      &lt;/form&gt;
      &lt;button onclick="capturePhoto();"&gt;Use Camera&lt;/button&gt; &lt;br&gt;
      &lt;button onclick="browse();"&gt;browse gallery&lt;/button&gt;&lt;br&gt;
      &lt;img style="display:none;width:160px;" id="smallImage" src="" /&gt;
      &lt;hr&gt;
      &lt;div id="smallTEXT"&gt;ggg&lt;/div&gt;
      &lt;button onclick"uploadPhoto();"&gt;submit&lt;/button&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>