CODEWITHSUNDEEP
cordova
Blynn
Blynn

Reputation: 1421

ios Cordova 1.7.0 Capture and upload a photo example

I'm trying to connect the photo to upload on to the server.. There isn't a cordova 1.7.0 example of this.. Just trying this out but it doesn't work. My error is.. wait_fences: failed to receive reply: 10004003.

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 });
}


// A button will call this function
//
function getPhoto(source) {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: destinationType.FILE_URI,
    sourceType: source });
}


 function onSuccess(imageData) { 
 var image = document.getElementById('myImage');
 image.src = "data:image/jpeg;base64," + imageData;
 $.post('http://site.com/api/upload.php', {data:imageData});
 }

<?php 

if ($_REQUEST['image']) {

// convert the image data from base64
$imgData = base64_decode($_REQUEST['image']);

// set the image paths
$file = '/api/' . md5(date('Ymdgisu')) . '.jpg';
$url = 'http://www.site.com' . $file; 

// delete the image if it already exists
if (file_exists($file)) { unlink($file); }

// write the imgData to the file
$fp = fopen($file, 'w');
fwrite($fp, $imgData);
fclose($fp);
}

?>

Upvotes: 1

Views: 2786

Answers (3)

tim-montague
tim-montague

Reputation: 17442

Wrote the following code to upload photos with Cordova's Camera and File Transfer plugin. Runs on iOS, and assume it runs on all mobile browsers supported by PhoneGap / Cordova.

Cordova Photo Upload example:
cordova file transfer plugin not working in ios simulator

Cordova's File Transfer plugin (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/index.html) supports uploads in binary (FILE_URI) or base64 (DATA_URI).

Traditionally, a file (like a photo) is saved to disk as binary, and then uploaded to the server with a mime type of multipart/form-data or application/octet-stream.

In base64, your high-resolution photo is saved to browser cache, and that can result in memory overflow because browsers were designed to link to high-resolution images and not cache them. Furthermore, base64 files are about 37% larger than binary files, so that doesn't help the situation either.

TL;DR;

  1. Install Cordova Camera Plugin, and Cordova File Transfer Plugin
    > cordova plugin add cordova-plugin-camera --save;
    > cordova plugin add cordova-plugin-file-transfer --save;

  2. Set the camera option as FILE_URI 

    navigator.camera.getPicture(success, error, {
  destinationType: destinationType.FILE_URI
});

  3. Upload the photo with Cordova's Transfer File plugin

    var request = new FileTransfer();
var options = new FileTransferOptions();
request.upload(fileUri, success, error, options);

Upvotes: 0

Sunil Dodiya
Sunil Dodiya

Reputation: 2615

try this one if its helpful to you.

$image = $_REQUEST['image'];
$name = date('Ymdgisu') . '.jpg';
base64_decode_image($image, $name);

function base64_decode_image($image, $name){
    if ($image){
        $new_file = fopen("/api/" . $name, "x");
        fwrite($new_file, base64_decode($image));
        fclose($new_file);
        //echo base64_decode($image);
    }
}

Upvotes: 1

Sunil Dodiya
Sunil Dodiya

Reputation: 2615

i think you can use like this.

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL });

function onSuccess(imageData) {
//var image = document.getElementById('myImage');
//image.src = "data:image/jpeg;base64," + imageData;
$.post('http://www.site.com/api/upload.php', {data:imageData});
}

function onFail(message) {
alert('Failed because: ' + message);
}

here onSuccess function returns base64 encode image string that you can pass to upload.php file

Upvotes: 0

Related Questions