phpmyadmin Question posted in
The official documentation can be found here.

Cordova: upload image and location to a database, and load the nearest images – Phpmyadmin

I’m Trying to build an app with Cordova. With the app you should take pictures, these pictures needs to be uploaded to a database together with the location where the picture is taken.
The app on default shows a x number of the most nearest taken pictures to your live location.
Beneath here i post the javascript code i have right now, most of the code is from Cordova self. Is it better to modify this code or start over?

I can now access the camera and take a picture, but how do i upload this picture together with the location to a database?

And how can load the nearest pictures from the database?

var Latitude = undefined;
var Longitude = undefined;

window.onload = function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady(){
    navigator.notification.alert("ready");
    document.getElementById("camera").addEventListener 
        ("click", cameraTakePicture); 
}

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

  function onSuccess(imageData, imageURI) { 
     var image = document.getElementById('myImage'); 
     image.src = "data:image/jpeg;base64," + imageData;
     getLocation();
     navigator.notification.alert(image.src);
  }  

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

 function getLocation() {
    navigator.notification.alert("start locatie");
    navigator.geolocation.getCurrentPosition(onPicturesSuccess, onPicturesError, { enableHighAccuracy: true });
 }

var onPicturesSuccess = function (position) {

  Latitude = position.coords.latitude;
  Longitude = position.coords.longitude;

  getPictures(Latitude, Longitude);
}

function getPictures(latitude, longitude) {
  //Load pictures which are the nearest
}

var onPicturesWatchSuccess = function (position) {

   var updatedLatitude = position.coords.latitude;
   var updatedLongitude = position.coords.longitude;

   if (updatedLatitude != Latitude && updatedLongitude != Longitude) {

     Latitude = updatedLatitude;
     Longitude = updatedLongitude;

     getPictures(updatedLatitude, updatedLongitude);
   }
}

// Error callback

function onPicturesError(error) {

   console.log('code: ' + error.code + 'n' +
       'message: ' + error.message + 'n');
}

// Watch your changing position

function watchPicturePosition() {

   return navigator.geolocation.watchPosition
   (onPicturesWatchSuccess, onPicturesError, { enableHighAccuracy: true });
}
Tags:

2

Answers


  1. 0

    You can use Cordova File Transfer Plugin to upload your photos to your backend service (DB). In FT Plugin you can add some additional headers, or properties e.g. LAT and LON properties.

    Login or Signup to reply.
  2. 0

    Since you didn’t specifically mention it, I’m going to assume you have access to jQuery inside your Cordova app.

    Inside your onSuccess you have to make an AJAX call that submits the image and location to your PHP server. Below is an example:

    var request = {
  'url': 'path/to/your/php/script.php',
  'method': 'POST',
  'data': {
    'image': image.src,
    'location': getLocation()
  }
}
$.ajax(request).done(function(response) {
  // request is done
});

    Your PHP server script will have to take the incoming data and save it to your database.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search