Roufid

Angular compress image before upload

Angular

In the previous tutorial, we discussed the file upload from a Angular Client to a Spring Boot back-end server. Most uploaded files on web are images. It’s always wise to compress and minify before sending them to the server. In this tutorial we will see how to Angular compress image before upload to Spring Boot back-end.

Install NPM libraries

ng2-file-select

As for the previous tutorial, we will use the same ng2-file-upload for file uploading. So install it :

image-compressor.js

For image compression, we will use image-compressor.js. Install it using npm :

Once the library is installed, you need to add script in your application. If you are using Angular-CLI (which I highly recommend), add the script relative path to your angular.json like below :

Libraries are now installed, let’s now see the Angular part.

Angular

ImgCompressor directive

To compress the image, we will extend the ng2-file-upload directive and add our compression there. Below the implementation :

Don’t forget to add the directive in the declarations of your @NgModule.

Component template

The template is a basic input using the  appImgCompressor directive and an uploader.

Component

That’s it. Your images will now be reduced by 50%.


The tutorial source code is available on Github. Download the source

References