onImageChange($event){
        const files = $event.target.files || $event.dataTransfer.files;
        if (files[0] !== undefined) {
            // check for 5M limit
            let maxFileSize = 5242880;
            let maxImageSize = 150;
            if (files[0].size > 5242880) {
                // error
                Event.$emit('error_message', this.trans('Max size of image file is 5M') );
            } else {
                var self = this;

                this.profileImage = files[0].name;

                const fileReader = new FileReader ();
                fileReader.addEventListener('load', () => {
                    // this.profileImageUrl = fileReader.result;
                    var image = new Image();
                    image.onload = function(){
                        var canvas = document.createElement("canvas");
                        EXIF.getData(image, function() {
                                  this.orientation = this.exifdata.Orientation;
                              })
                        var ctx = canvas.getContext("2d");

                         if(image.height > maxImageSize) {
                             image.width *= maxImageSize / image.height;
                             image.height = maxImageSize;
                         }

                        if (4 < this.orientation && this.orientation < 9) {
                            canvas.width = image.height;
                            canvas.height = image.width;
                        } else {
                            canvas.width = image.width;
                            canvas.height = image.height;
                        }

                        switch (this.orientation) {
                            case 2: ctx.transform(-1, 0, 0, 1, image.width, 0); break;
                            case 3: ctx.transform(-1, 0, 0, -1, image.width, image.height); break;
                            case 4: ctx.transform(1, 0, 0, -1, 0, image.height); break;
                            case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
                            case 6: ctx.transform(0, 1, -1, 0, image.height, 0); break;
                            case 7: ctx.transform(0, -1, -1, 0, image.height, image.width); break;
                            case 8: ctx.transform(0, -1, 1, 0, 0, image.width); break;
                            default: break;
                        }

                        ctx.clearRect(0, 0, canvas.width, canvas.height);

                        // ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                        ctx.drawImage(image, 0, 0, image.width, image.height);

                        self.person.volunteer.profile_photo = canvas.toDataURL("image/png");
                    };
                    image.src = fileReader.result;
                    this.profileImageFile = files[0] // this is an image file that can be sent to server...
                });
                fileReader.readAsDataURL(files[0]);
            }
        }
    },