IONIC 2 Image upload to PHP server

Ionic Framework ionic-v3
1

The photo and the data are not storing in the database. It just alerts “file uploaded successfully” but nothing really happen. Is the error in the php file or ionic ?

        upload(){
ImagePicker.getPictures({
   maximumImagesCount: 1,
               width: 127,
             height: 127,
             quality: 75
 }).then((results) => {
for (var i = 0; i < results.length; i++) {

     var url = "http://ifund.esy.es/register.php"
                var targetPath = results[i];
                // File name only
                var filename = targetPath.split("/").pop();
                var fileTransfer = new Transfer();
                var options = {
                    fileKey: "file",
                    fileName: filename,
                    chunkedMode: false,
                    mimeType: "image/jpg",
                    params: {'directory': 'upload', 'fileName': filename, 'username': this.username, 'password': this.password, 'first_name': this.fname, 'last_name': this.lname, 'email': this.email, 'address': this.address, 'contact': this.contact, 'bday': this.bday}
                };


        fileTransfer.upload(url, targetPath, options).then((results) => {
          alert('file uploaded successfully  ' + results);
        }, error => {
              alert('server error');
         });
        }

 }, (err) => {   
	  let alert = this.alert.create({
    	title:'Warning',
    	subTitle: "ERROR",
    	buttons: ['OK']
    	})
      alert.present(); });

}

My PHP file code

     <?php
      header("Access-Control-Allow-Origin: *");
       header("Content-Type: application/json; charset=UTF-8");


 if (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400');    // cache for 1 day
}


 if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
    header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

exit(0);
}
          $location = $_POST['directory'];
          $uploadfile = $_POST['fileName'];
          $uploadfilename = $_FILES['file']['tmp_name'];
          $username = $_POST['username'];
          $password = $_POST['password'];
         $fname = $_POST['first_name'];
         $lname = $_POST['last_name'];
         $email = $_POST['emaail'];
         $contact = $_POST['contact'];
         $address = $_POST['address'];
         $bday = $_POST['bday'];
         $type = pathinfo($uploadfile, PATHINFO_EXTENSION);
       $all_types = array('jpg', 'png', 'pcd', 'fpx', 'jpeg', 'gif', 'tif', 'tiff', 'jif', 'jifi', 'jp2', 'jpx', 'j2k', 'j2c');
     $type = strtolower($type);
     if (in_array($type, $all_types)) {
     echo 'correct type';
     if (move_uploaded_file($uploadfilename, $location . '/' . $uploadfile)) {
    $imagedata = file_get_contents($location . '/' . $uploadfile);
    $base64 = base64_encode($imagedata);
    unlink($location . '/' . $uploadfile);
    
    $image = 'data:image/' . $type . ';base64,' . $base64;

    $link = mysql_connect($config['host'], $config['username'], $config['password']);
    if (!$link) {
        die('Could not connect: ' . mysql_error());
    }
    echo 'Connected successfully';
    mysql_select_db($config['database'], $link);

    $q = "insert into register (username, password, first_name, last_name, email, contact, address, bday, permit_photo) values ('$username', '$password', '$fname', '$lname', '$email', '$contact', '$address', '$bday', '$image')";

    $result = mysql_query($q);
    echo $result;
} else {
    echo 'Upload error!' . 'location: ' . $location;
}
} else {
echo 'wrong type file';
}
?>
3

please someone help me

4

can someone help me with my problem please

5

can anyone help me with my problem?

6

You can probably do something like this:

  selectPicture() {
    let cameraOptions = {
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: Camera.DestinationType.DATA_URL,
        encodingType: Camera.EncodingType.JPEG,      
        correctOrientation: true
      }
      Camera.getPicture(cameraOptions)
        .then(file_uri => {
           this.selectedImage = "data:image/jpeg;base64," + file_uri;
        }, 
        err => {
          this.selectedImage = '';
          alert(err)
        });
  }

Once you do that, you will have the content of the image selected (base64 encoded) in “this.selectedImage” as a string.

Then you can post that as you do with any string field/value

You will need also “cordova-plugin-camera” if you don’t have it yet.

Hope this helps

3 Likes