Home Ionic Ionic 4 Ionic 4 Native Camera with Image Upload.

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';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule
],
providers: [
StatusBar,
SplashScreen,
File,
Camera,
{
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';

@Injectable({
providedIn: 'root'
})
export class UploadService {

constructor(private http: HttpClient) { }

uploadFile(formData) {
return this.http.post('https://example.com/upload.php', 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';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, AfterViewInit {
options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
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, file.name);
this.uploadService.uploadFile(formData).subscribe(dataRes => {
console.log(dataRes);
});
};
reader.readAsArrayBuffer(file);
}


takePicture() {
this.camera.getPicture(this.options).then((imageData) => {
this.file.resolveLocalFilesystemUrl(imageData).then((entry: FileEntry) => {
entry.file(file => {
console.log(file);
this.readFile(file);
});
});
}, (err) => {
// Handle error
});
}

}

Your home component template file like the folloing

<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>

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

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

<?php
$name = $_POST['name'];
if($_FILES['file']){
$path = 'uploads/';
if (!file_exists($path)) {
mkdir($path, 0777, true);
}
$originalName = $_FILES['file']['name'];
$ext = '.'.pathinfo($originalName, PATHINFO_EXTENSION);
$t=time();
$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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Auto Detect Responsive Screen Sizes in Angular

Most of the time, we use CSS media queries to handle responsive, screen size changes to layout our content differently. However, there...

Angular 9 CRUD | Part 8 |Delete an Existing Product

In this article, I am going to show you how to delete a product. Create a method...

Angular 9 CRUD | Part 7 | Update an Existing Product

In this article, we will update the existing product details. Here we are using reactive forms and HttpClient for updating the...

Angular 9 CRUD | Part 6 | Create New Product

In this article, we will create a new product. Here we are using reactive forms for creating a new product. first...

Recent Comments

Sathish Kumar Ramalingam on Angular 2 Admin LTE Theme Integration