Angular js fileupload allow only image extensions

Here is my directive for uploading image profile. It is working fine but what I wanted to know is that how can we filter on this directive to allow only particular extensions, cause I wanted to allow only images. I am using fineupload by the way. Feel free to ask about the code below the image url is e.target.result.

app.directive('uploadProfile', function () {
        return function (scope, element, attrs, $window) {
            var $uploadCrop;

            function readFile(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('.cropper').addClass('ready')
                        $window.alert("hi")
                        $uploadCrop.croppie('bind', {
                            url: e.target.result

                        }).then(function () {
                            console.log("do nothing")
                        });
                    }

                    reader.readAsDataURL(input.files[0]);
                }
                else {
                    swal("Sorry - you're browser doesn't support the FileReader API");
                }
            }


            $(element).on("change", function () {
                readFile(this)
            });

            $uploadCrop = $('.cropper').croppie({
                url: "/static/img/yahshua.jpg",
                viewport: {
                    width: 170,
                    height: 170,
                    type: 'circle',
                },
                enableExif: true,
                enableZoom: true,
                enforceBoundary: false
            });

            $(element).on('change', function () { readFile(this); });

            $('#cropImage').on('click', function (ev) {
                $uploadCrop.croppie('result', {
                    type: 'base64',
                    size: 'viewport'
                }).then(function (resp) {
                    scope.record = {}
                    scope.record.cropped = resp
                    scope.main.upload_profile(resp)
                });
            });
        };
    })

I your html input of type 'file' you can add 'accept' attribute to limit file type to images only : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/file

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">