Ionic 4, Angular 7 and Cordova Crop and Upload Image

The comprehensive step by step tutorial on crop, and upload Image using Ionic 4, Angular 7 and Cordova. We will use Native Ionic Cordova Crop, File Transfer plugins and it’s dependencies. In this tutorial, we will use our existing uploader API that you can find on our GitHub which it uses Node.js, Express.js, and Multer. Or, you can use your own backend or API that using HTML Form Encoding multipart/form-data. The scenario is in the Ionic 4 App, click the Camera button inside the preview image then it will open image picker. After image picked then it will go to cropping popup that you can crop anyway you like then upload to the API. After the successful upload, the Ionic 4 app will preview the Image by URL that saved to the API server.

Table of Contents:

• Create a New Ionic 4, Angular 7 and Cordova App
• Install and Configure Image Crop, File Transfer Plugins, and Dependencies
• Implementing Image Crop and File Upload/Transfer
• Run and Test Ionic 4, Angular 7 and Cordova App on iOS/Android Devices

The following tools, frameworks, and modules are required for this tutorial:

• Node.js
• Angular 7
• Ionic 4
• Cordova
• Native Ionic 4/Cordova Crop Plugin
• Native Ionic 4/Cordova File Transfer
• Terminal or Command Line
• IDE or Text Editor

Before going to the main steps, we assume that you have to install Node.js. Next, upgrade or install new Ionic 4 CLI by open the terminal or Node command line then type this command.

sudo npm install -g ionic

You will get the latest Ionic CLI in your terminal or command line. Check the version by type this command.

ionic --version
4.12.0

1. Create a New Ionic 4, Angular 7 and Cordova App

To create a new Ionic 4 App, type this command in your terminal.

ionic start ionic4-crop blank --type=angular

If you see this question, just type N for because we will installing or adding Cordova later.

Install the free Ionic Appflow SDK and connect your app? (Y/n) N

Next, go to the newly created app folder.

cd ./ionic4-crop

As usual, run the Ionic 4 App for the first time, but before run as lab mode, type this command to install @ionic/lab.

npm install --save-dev @ionic/lab
ionic serve -l

Now, open the browser and you will the Ionic 4 App with the iOS, Android, or Windows view. If you see a normal Ionic 4 blank application, that’s mean you ready to go to the next steps.

2. Install and Configure Image Crop, File Transfer Plugins, and Dependencies

We will install all required plugins for this tutorial. First, we have to install Native Cordova plugins and Ionic 4 Angular 7 Modules by running these commands.

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

Next, open and edit src/app/app.module.ts then add these imports.

import { ImagePicker } from '@ionic-native/image-picker/ngx';

Add that import to @NgModule Providers.

providers: [
  StatusBar,
  SplashScreen,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ImagePicker
],

3. Implementing Image Crop and File Upload/Transfer

We will be using the existing Home component or page to implementing Image Preview, Picker, Crop and Upload. For that, open and edit src/app/home/home.page.html then replace all HTML tags with these.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic 4 Crop Upload
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <img *ngIf="!fileUrl" src="assets/no-image.jpeg"/>
    <img *ngIf="fileUrl" src="{{fileUrl}}"/>
    <ion-card-content>
      <ion-button color="medium" size="large" (click)="cropUpload()">
        <ion-icon slot="icon-only" name="camera"></ion-icon>
      </ion-button>
    </ion-card-content>
  </ion-card>
</ion-content>

Next, open and edit src/app/home/home.page.ts then add these imports.

import { Crop } from '@ionic-native/crop/ngx';
import { ImagePicker } from '@ionic-native/image-picker/ngx';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';

Inject those imports to the constructor.

constructor(private imagePicker: ImagePicker,
  private crop: Crop,
  private transfer: FileTransfer) { }

Add the variables for hold image URL and response data.

fileUrl: any = null;
respData: any;

Create a function for crop and upload an image file to the API server.

cropUpload() {
  this.imagePicker.getPictures({ maximumImagesCount: 1, outputType: 0 }).then((results) => {
    for (let i = 0; i < results.length; i++) {
        console.log('Image URI: ' + results[i]);
        this.crop.crop(results[i], { quality: 100 })
          .then(
            newImage => {
              console.log('new image path is: ' + newImage);
              const fileTransfer: FileTransferObject = this.transfer.create();
              const uploadOpts: FileUploadOptions = {
                 fileKey: 'file',
                 fileName: newImage.substr(newImage.lastIndexOf('/') + 1)
              };

              fileTransfer.upload(newImage, 'http://192.168.0.7:3000/api/upload', uploadOpts)
               .then((data) => {
                 console.log(data);
                 this.respData = JSON.parse(data.response);
                 console.log(this.respData);
                 this.fileUrl = this.respData.fileUrl;
               }, (err) => {
                 console.log(err);
               });
            },
            error => console.error('Error cropping image', error)
          );
    }
  }, (err) => { console.log(err); });
}

As you can see, we use the IP address to access Express.js API from the device. The uploaded image file accessible from the device through http://192.168.0.7:3000/images/filename URL.

4. Run and Test Ionic 4, Angular 7 and Cordova App on iOS/Android Devices

We assume that you have cloned the Node.js, Express.js and Multer image uploader here https://github.com/didinj/node-express-image-uploader.git. Next, open a new Terminal or cmd-tab then go to the cloned Express image uploader.

npm install
nodemon

Next, to run on Android devices type this command while the device connected.

ionic cordova platform add android
ionic cordova run android

To run on iOS simulator or device, we have to build it first.

ionic cordova platform add ios
ionic cordova build ios

Then open and run the iOS app from the XCode. You will this view from your Android device or iOS simulator.

That it’s, the Ionic 4, Angular 7 and Cordova Crop and Upload Image tutorial. You can get the full source code from out GitHub.

Learn More

☞ Angular 7 (formerly Angular 2) - The Complete Guide
☞ Angular & NodeJS - The MEAN Stack Guide
☞ Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular
☞ Ionic 4 Crash Course with Heartstone API & Angular
☞ Ionic 4 & Angular Tutorial For Beginners - Crash Course
☞ Ionic 4 and Angular 7 Tutorial: HTTP Interceptor Example
☞ Add authentication, typing indicators and file attachments to an Ionic 4 chat app
☞ Building a mobile chat app with Nest.js and Ionic 4

Originally published by Didin J at https://www.djamware.com