Upload image

HTML

<input type="file" class="hidden" name="img" id="profile-image" accept="image/*" />
<div class="crop-wrapper">
    <img class="image" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" id="profile" />
</div>
<button class="crop-btn" id="upload-btn">Upload <span id="image-name">image</span></button>
<button class="crop-btn hidden" id="change-btn">Change image</button>
<button class="crop-btn hidden" id="change-btn">ok</button>

CSS

.crop-wrapper {

    width: 300px;

    height: 300px;

    border: 1px solid #e8e8e8;

    text-align: center;

}

.image {

    width: 150px;

    height: 150px;

    margin-bottom: 20px;

    opacity: 0.8;

    transition: opacity 0.4s ease;

}

.image:hover {

    cursor: pointer;

    opacity: 1;

}

.crop-btn {

    display: block;

    border: 2px solid grey;

    color: white;

    background-color: #000;

    min-width: 100px;

    height: 40px;

    text-align: center;

    transition: all 0.4s ease;

}

.upload-btn:hover {

    cursor: pointer;

    background-color: #e8e8e8;

    color: #000;

}

.hidden {

    display: none;

}

#image-name {

    display: inline-block;

}

JavaScript

$(document).ready(function () {
    addCropperScripts();
    
    var access_token = null,
        baseUrl = 'https://awesome-proxy-dev.azurewebsites.net',
        imageInput = $('#profile-image'),
        file = null;

    $('#profile, #change-btn').click(function () {
        imageInput.click();
    });

    imageInput.on('change', function (e) {
        file = imageInput[0].files[0];
        $('#image-name').text(file.name);
        setPreview(!$('#change-btn').hasClass('hidden'));
        $('#change-btn').removeClass('hidden');
    });

    function setPreview(replace) {
        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = function (readerEvt) {
            var binaryString = readerEvt.target.result;
            $('#profile').attr('src', binaryString);

            if (replace) {
                $('.image').cropper('replace', binaryString);
                return;
            }
            
            // Activate cropper plugin
            $('.image').cropper({
                aspectRatio: 1 / 1,
                autoCropArea: 0.65,
                strict: false,
                guides: false,
                highlight: false,
                dragCrop: false,
                moveable: false,
                modal: true,
                cropBoxMovable: true,
                cropBoxResizable: true,
                checkImageOrigin: true
            });
        };
    }
    
    // Clicking the upload button
    $('#upload-btn').click(function (e) {
        if (!file) {
            alert('Du måste välja en bild först');
            return;
        }

        if (access_token) {
            uploadImage();
            return;
        }

        // Signing in
        $.ajax({
            type: 'POST',
            url: baseUrl + '/token',
            data: {
                grant_type: 'password',
                username: 'aup',
                password: 'test123'
            },
            success: uploadImage,
      ...