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.

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. ūüď≤ 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.

If you see this question, just type¬† “N” (No) because you will add installing /attaching Cordova later.

Then go to the newly created app folder.

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

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.

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

Add that import to (@NgModule) Providers.

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

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

Inject those imports to the constructor.

Add the variables for hold image URL and response data.

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

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 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.

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

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

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

Ionic 4, Angular 7 and Cordova Crop and Upload Image - Before Crop UploadIonic 4, Angular 7 and Cordova Crop and Upload Image - Crop Image
Ionic 4, Angular 7 and Cordova Crop and Upload Image - Cropped and Uploaded Image

Done the Ionic 4 + Angular 7 + Cordova.¬† have fun coding…


Leave a Reply

Your email address will not be published. Required fields are marked *