[FIXED] How to auto-compress Images while uploading image in angularjs

Issue

Here is my HTML form:

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

I want to upload an image. Here if the file size is big(like 3 or 4 MB), I want to compress image automatically to 1MB or less than that. Any options are there to autocompress images in angularjs or javascript.

Solution

This Angular directive compresses jpeg or png files using angularjs on client side. Read more about it here

This module depends on angularjs, so make sure you've added angularjs dependency and then angular-image-compress.js. Something like

angular.module('myApp', ['ngImageCompress']);

This is how you can achieve what you want.

 <input id="inputImage" type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.7" resize-type="image/jpg" ng-image-compress />

Directives used in above input tag are self explanatory

Answered By - Muhammad Usman

Answer Checked By - Katrina (PHPFixing Volunteer)