let avatar = document.getElementById('avatar');
            let inputPhoto = document.getElementById('inputPhoto');
            let image = document.getElementById('cropperImg');
            let $crop = $('#cropper');
            let cropper;

            inputPhoto.addEventListener('change', function(upload) {
                console.log('change');
                var files = upload.target.files;
                var fileName = files.item(0).name;
                var fileSize = files.item(0).size;
                if(fileSize <= 1048576){
                    if(fileName.includes('.jpg') || fileName.includes('.jpeg') || fileName.includes('.png')) {
                        clearErrorMessages();
                        var done = function (url) {
                            console.log(files.item(0).name);
                            image.src = url;
                            showCropper();
                        };
                        var reader;
                        var file;
                        var url;

                        if(files && files.length > 0) {
                            file = files[0];
                            if(URL) {
                                done(URL.createObjectURL(file));
                            } else if (FileReader) {
                                reader = new FileReader();
                                reader.onload = function (e) {
                                    done(reader.result);
                                };
                                reader.readAsDataURL(file);
                            }
                        }
                    } else {
                        closeUploadDialog();
                        showFileTypeError();
                        inputPhoto.value = '';
                    }
                } else {
                    closeUploadDialog();
                    showSizeError();
                    inputPhoto.value = '';
                }
            });