IONIC 4 Uploading and Cropping Images and Push to API
🚀 Another step by step guide working on IONIC 4 + ANGULAR 7 + CORDOVA for cropping and uploading an image. on this guide, we will use the Native Ionic Cordova Library (Crop), (File Transfer) and its dependencies. you will use this file for this project test. or use an API that used HTML Structure (multipart/form-data). This project test behaves like you will use the camera to capture an image then open the image picker and cropping popup page will show and upload to the API. after the upload, you will preview the image by the URL that saved to the API provider. Before starting to the main steps, I assume that you have installed the node.js and Ionic 4 framework if not then just follow the steps below.
|
1 |
sudo npm install -g ionic |
You will acquire the newest Ionic CLI in your terminal or command line Interface. to check the version of the current Ionic framework you need to type inonic -v by type this command.
|
1 2 |
ionic --version 4.12.0 |
1. 📲 Build a New Ionic 4 Framework, Angular 7 & Cordova App
To generate a new Ionic 4 App, type the command listed below in your terminal.
|
1 |
ionic start ionic4-crop blank --type=angular |
If you see this question, just type “N” (No) because you will add installing /attaching Cordova later.
|
1 |
Install the free Ionic Appflow SDK and connect your app? (Y/n) N |
Then go to the newly created app folder.
|
1 |
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.
|
1 2 |
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. Installing and configure Image Cropping and File Transfer Dependencies
We will install all the required plugins for this tutorial. First, we have to install Native Cordova plugins and Ionic 4 Angular 7 Modules by running these commands.
|
1 2 3 4 5 6 7 8 |
$><code>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.
|
1 |
import ImagePicker from '@ionic-native/image-picker/ngx'; |
Add that import to (@NgModule) Providers.
|
1 2 3 4 5 6 |
providers: [ Â StatusBar, Â SplashScreen, Â provide: RouteReuseStrategy, useClass: IonicRouteStrategy , Â ImagePicker ],</code><strong>3. Implementing Image Crop and File Upload/Transfer</strong> |
We will be using the existing Home component or page to implementing Image Preview, Picker, Crop and Upload. open & edit src/app/home/home.page.html then replace all HTML tags with these.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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="https://www.14core.com/wp-content/uploads/2019/05/xl-sonar-sensor-rangine-finder-obstacle-detection-ultrasonic-14core.jpg"/>   <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.
|
1 2 3 |
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.
|
1 2 3 |
constructor(private imagePicker: ImagePicker, Â private crop: Crop, Â private transfer: FileTransfer) |
Add the variables for hold image URL and response data.
|
1 2 |
fileUrl: any = null; respData: any; |
Create a function for crop and upload an image file to the API server.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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.10: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.10:3000/images/filename URL.4.
3. Run and Test The Ionic 4, Angular 7 & Cordova App Android/iOS
We assume that you have cloned the Node.js /Express.js / Multer image uploader you can download it here open a new Terminal or cmd-tab then go to the cloned Express image uploader.
|
1 2 |
npm install nodemon |
Next, to run on Android devices type this command while the device connected.
|
1 2 |
ionic cordova platform add android ionic cordova run android |
To run on iOS simulator or device, we have to build it first.
|
1 2 |
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.
Done the Ionic 4 + Angular 7 + Cordova. have fun coding…
