Image Upload Ionic to Remote Server Using Php

I was able to upload Image using below code, but the same code with base64 format is also working for me without even decoding the Base64 code in Php server.

I would like to understand how does the php code accept “fileTransfer.upload(imge, url, options)”. Does my php code gets the “imge” argument of fileTransfer function as Base64 data or real image directory link of android or Real Image Data?


app.component.ts

import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { HomePage } from ‘…/pages/home/home’;
@Component({
templateUrl: ‘app.html’
})
export class UploadImage {
rootPage:any = HomePage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}

app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { FileTransfer } from ‘@ionic-native/file-transfer’;

import { UploadImage } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;

@NgModule({
declarations: [
UploadImage,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(UploadImage)
],
bootstrap: [IonicApp],
entryComponents: [
UploadImage,
HomePage
],
providers: [FileTransfer,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

home.html

Ionic Blank


<button ion-button outline block (click)=“selectPicture()”>
Take picture

<button ion-button outline block (click)=“upload()”>
Uload picture

home.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Camera } from ‘ionic-native’;
import { FileTransfer, FileTransferObject } from ‘@ionic-native/file-transfer’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

currentName:any
selectedImage:any
alert:any
loader: any;

constructor(public navCtrl: NavController, private transfer:FileTransfer) {
}
selectPicture() {
let cameraOptions = {
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
destinationType: Camera.DestinationType.FILE_URI,
encodingType: Camera.EncodingType.JPEG,
correctOrientation: true
}
Camera.getPicture(cameraOptions).then(file_uri => {
this.currentName = file_uri.substring(file_uri.lastIndexOf(’/’) + 1,
file_uri.lastIndexOf(’?’));
this.selectedImage = file_uri;
},
err => {
this.selectedImage = ‘’;
alert(err)
});
}
upload(){
const fileTransfer: FileTransferObject = this.transfer.create();
var url = 'http://www.remote.in/upload/upload.php
var imge = this.selectedImage;
var options = {
fileKey: ‘file’,
fileName: this.currentName,
mimeType: “image/jpg”
};
fileTransfer.upload(imge, url, options).then((results) => {
alert(‘file uploaded successfully’);
}, error => {
alert(‘server error’);
});
(err) => {
let alert = this.alert.create({
title:‘Warning’,
subTitle: “ERROR”,
buttons: [‘OK’]
})
alert.present(); };
}
}

upload.php in remote server

<?php header('Access-Control-Allow-Origin: *'); $target_path = "./images/"; $target_path = $target_path . basename( $_FILES['file']['name']); if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) { echo "Success"; } else { echo $target_path; echo "Failed"; } ?>

In home.ts file, if I use below code to convert the image as Base64, still its uploading in server without even decoding it in php code.

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;**
    }, 

Can someone help me understand what exactly does fileTransfer sends to remote server?

1 Like

m stucked on this step too…did you get any solution??