Ionic 4 Native Camera with Image Upload.


Hello everyone, in this article, I am going to explain how to take a picture using ionic native camera plugin and how to upload it to a server. First of all, start a new project using ionic CLI command.

ionic start camera_upload blank

Once your project successfully, then install the ionic native camera and file plugins using the following comments

ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/cameraionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file

Next, import the camera and File into your app module and inject into the provider section. Now, your app module file should like this

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { File } from '@ionic-native/file/ngx';
import {HttpClientModule} from '@angular/common/http';
import { Camera } from '@ionic-native/camera/ngx';

declarations: [AppComponent],
entryComponents: [],
imports: [
providers: [
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
bootstrap: [AppComponent]
export class AppModule {}

Next, generate a service using ionic CLI command, using the following command for creating a service.

ionic g service Upload

Import HttpClientModule into your app module and inject it into the imports section. (Please refer the above code)

Your service file source code will like the following

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

providedIn: 'root'
export class UploadService {

constructor(private http: HttpClient) { }

uploadFile(formData) {
return'', formData);

Now, Open your home component class file and write the following code.

import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import SignaturePad from 'signature_pad';
import {File, IWriteOptions, FileEntry} from '@ionic-native/file/ngx';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import {UploadService} from '../upload.service';
selector: 'app-home',
templateUrl: '',
styleUrls: [''],
export class HomePage implements OnInit, AfterViewInit {
options: CameraOptions = {
quality: 100,
constructor(private file: File, private uploadService: UploadService, private camera: Camera) {}

ngOnInit(): void {

ngAfterViewInit(): void {

readFile(file: any) {
const reader = new FileReader();
reader.onloadend = () => {
const imgBlob = new Blob([reader.result], {
type: file.type
const formData = new FormData();
formData.append('name', 'Hello');
formData.append('file', imgBlob,;
this.uploadService.uploadFile(formData).subscribe(dataRes => {

takePicture() { => {
this.file.resolveLocalFilesystemUrl(imageData).then((entry: FileEntry) => {
entry.file(file => {
}, (err) => {
// Handle error


Your home component template file like the folloing

Ionic Blank

<div class="ion-padding">
<ion-col><ion-button color="primary" (click)="takePicture()">Take Picture</ion-button></ion-col>

Once you will take a picture it will automatically uploaded into the server. now i wrote the code in this flow. if you need to change the flow as per your requirements.

the PHP server side script will like the following

$name = $_POST['name'];
$path = 'uploads/';
if (!file_exists($path)) {
mkdir($path, 0777, true);
$originalName = $_FILES['file']['name'];
$ext = '.'.pathinfo($originalName, PATHINFO_EXTENSION);
$generatedName = md5($t.$originalName).$ext;
$filePath = $path.$generatedName;
if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {
echo json_encode(array(
'result' => 'success',
'status' => true,

For more tutorials please visit y official website

If need video tutorial, please subscribe my YouTube channel