CODEWITHSUNDEEP
phpangularionic-framework
c-mac
c-mac

Reputation: 83

Upload file to server ionic and php

I have code that sends an image to my server and everything works fine. However i am now truing to send a file to my server using an input tag in ionic However i cant seem to get it working.

I get an error from the php file saying undefined index 'file' Error message Response HTML

<ion-col>
    <ion-label>Add a File</ion-label>
    <ion-input type='file' [(ngModel)]="fileName"></ion-input>
</ion-col>

TS file

addFile() {
    this.addService.addFile(this.fileName).subscribe(res => {
        console.log(res);
    });
}

service

addFile(file) {
    let headers = new HttpHeaders();
    // headers = headers.set('Content-Type', 'application/json');
    headers = headers.set('Authorization', '' + this.token);
    const formData = new FormData();
    formData.append('file', file);
    return this.http.post<any>('http://domain.fileUpload.php', formData, {headers});
}

PHP API

$target_path = "files/";
$target_path = $target_path . basename( $_FILES['file']['name']);
$findDate = date("Y-m-d");

if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {             
    header('Content-type: application/json');
    $data = ['success' => true, 'message' => 'Upload and move success'];

    echo json_encode( $data );

} else {
    header('Content-type: application/json');
    $data = ['success' => false, 'message' => 'There was an error uploading the file (folder), please try again!'];
    echo json_encode( $data );
}

uploadMethod

uploadFile: ''; // from ngModel
fileUpload(path) {
    const fileTransfer: FileTransferObject = this.transfer.create();
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: '.png',
      chunkedMode: false,
    };

    console.log(this.uploadFile);

    fileTransfer
      .upload(this.uploadFile, 'http://domain/fileUpload.php',
        options
      )
      .then(
        data => {
          console.log(data + 'Uploaded Successfully');
          // console.log(JSON.parse(data.));
          // let res = JSON.parse(data);
          let res = data;
          if (res['success']) {
            console.log('True');
          }
        },
        err => {
          console.log(err);
        }
      );
  }

Upvotes: 1

Views: 3021

Answers (3)

Najam Us Saqib
Najam Us Saqib

Reputation: 3402

Blow is the Example Code:

import { Platform } from 'ionic-angular';

checkPlatform: boolean = fasle;

constructor(public plt: Platform) {
    if (this.plt.is('ios')) {
      this.checkPlatform == true; // if platform ios this will be true
    }
    if (this.plt.is('android')) {
      this.checkPlatform == true; // if platform androidthis will be true
    }

  }

imageUpload(path) {
  const fileTransfer: FileTransferObject = this.transfer.create();
  let options: FileUploadOptions = {
      fileKey: 'image',
      fileName: '.png',
      chunkedMode: false,
      //mimeType: "image/jpeg",
    }


    fileTransfer.upload(path, 'https://yourDomain.com/api/imageUpload', options)
      .then((data) => {
      console.log(data+" Uploaded Successfully");
      console.log(JSON.parse(data.response));
      let res = JSON.parse(data.response);
      if (res.success == true) {
          // do whats ever you want to do
      }


    }, (err) => {
      console.log(err);

    });
}

Pass the cordova file path as parameter in this function.

inside you HTML template show buttons or input type like this: 

<input type="file" *ngIf="checkPlatform == true">

Upvotes: 1

Lam Nguyen
Lam Nguyen

Reputation: 196

I check your code and as i see file added to FormData is filename with string Type, not File or Blob Data Type. So in this case it will not send file into $_FILES, it actually send its value to $_POST in your PHP Server. In summary, File and Blob Type will be sent to $_FILES, other data types will be sent to the appropriate global variables.

There is also a good example on how to validate your file in PHP Server: https://www.php.net/manual/en/features.file-upload.php

Upvotes: 0

Ali Mhanna
Ali Mhanna

Reputation: 407

if you see this you can notice allowed types are :

export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time'; if you want to upload files follow this link i think you will find the answer

Upvotes: 0

Related Questions