Upload image to server using Ionic 5

I’ve been trying to upload a image to the server using Ionic 5 without any luck.
After taking a image with the camera or selecting a image from the galery, and try to upload it, it returns empty (No image selected.)

Ionic code :

  createFileName() {
    const d = new Date(),
      n = d.getTime(),
      newFileName = n + '.jpg';
    return newFileName;
  }

  pathForImage(img: string) {
    if (img === null) {
      return '';
    } else {
      return this.file.dataDirectory + img;
    }
  }


  async selectImage() {

    let buttonLabels = ['Select from galery', 'Use camera'];

    const options: ActionSheetOptions = {
      title: 'Make a choice',
      buttonLabels: buttonLabels,
      addCancelButtonWithLabel: 'Cancel',
      androidTheme: 4
    }

    this.actionSheet.show(options).then((buttonIndex: number) => {
      if (buttonIndex == 1) {
        this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
      } else if (buttonIndex == 2) {
        this.takePicture(this.camera.PictureSourceType.CAMERA);
      }
    });

  }


  copyFileToLocalDir(namePath: string, currentName: string, newFileName: string) {

    this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {
      this.lastImage = newFileName;
    }, error => {
      console.log(error);
    });

  }


  takePicture(sourceType: any) {

    const options: CameraOptions = {
      quality: 100,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true,
      cameraDirection: 1,
      allowEdit: true,
      targetHeight: 300,
      targetWidth: 300
    };

    this.camera.getPicture(options).then(imageData => {

      this.clickedImage = (<any>window).Ionic.WebView.convertFileSrc(imageData);


      if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {

        this.filePath.resolveNativePath(imageData).then(filePath => {
          const correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
          const currentName = imageData.substring(imageData.lastIndexOf('/') + 1, imageData.lastIndexOf('?'));
          this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
        });

      } else {

        const currentName = imageData.substr(imageData.lastIndexOf('/') + 1);
        const correctPath = imageData.substr(0, imageData.lastIndexOf('/') + 1);
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());

      }

      this.uploadImageData();

    });

  }


  uploadImageData() {

    var targetPath = this.pathForImage(this.lastImage);
    var filename = this.lastImage;


    const fileTransfer: FileTransferObject = this.transfer.create();

    let options: FileUploadOptions = {
      fileKey: "file",
      fileName: filename,
      chunkedMode: false,
      mimeType: "multipart/form-data",
      params : {'fileName': filename}
    }


    fileTransfer.upload(targetPath, upload_url, options)
      .then((data) => {

        this.newdata = JSON.parse(data.response);
        if (this.newdata.success) {
          this.global.presentAlert("Success", this.newdata.message);
        } else {
          this.global.presentAlert("Error", this.newdata.message);
        }

      }, (err) => {
        this.global.presentAlert("Error", JSON.stringify(err));
      })

  }

php code:

<?php

$xresponse = 0;
$xmessage = "";

$emparray = array();

if ( !empty( $_FILES ) ) 
{

    $target_path = urldecode($_FILES["file"]["name"]);
    $filename = stripslashes($target_path);
    $image_name = time() . "_" . $filename;

    if ( move_uploaded_file( $_FILES['file']['tmp_name'], "/uploads/profile/" . $image_name ) ) {

        $success = true;
        $message = "Upload success";

    } else {

        $success = false;
        $message = $image_name;

    }

} else {

    $success = false;
    $message = "No image selected.";

}


echo json_encode( 
    $emparray = array(
        'success' => $success,
        'message'=> $message
    )
);

html code:

<ion-header class="pages">
  <ion-toolbar class="bg-grad-lightblue">
    <ion-title>
      <span>My profile</span>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="bg-lightblue">

  <section class="app-container">
    <ion-grid class="ptop">
      <ion-row>
        <ion-col size="12">
          <ion-avatar class="avatar_circle">
            <img src="{{this.img}}" alt="" [hidden]="clickedImage">
            <img [src]="clickedImage" [hidden]="!clickedImage" />
          </ion-avatar>

          <ion-card>
            <ion-card-content>
              <ion-button color="grad-btn-small bg-grad-gray" expand="block" (click)="selectImage()">
                <span class="ion-text-left">Upload image</span></ion-button>
            </ion-card-content>
          </ion-card>

        </ion-col>
      </ion-row>
    </ion-grid>
  </section>

</ion-content>

ionic info:

Ionic:

   Ionic CLI                     : 6.12.0 (C:\Users\User\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : 6.0.0, android 9.0.0, browser
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 18 other plugins)

Utility:

   cordova-res : 0.14.0
   native-run  : 1.2.2

System:

   NodeJS : v14.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.5
   OS     : Windows 10

Can someone help me with this or point me in the right direction.

Thank you

1 post - 1 participant

Read full topic