<div id="profilePhotoDialog" style="margin: auto;" title="{!$Label.ProfilePhotoDialogTitle}">
        <apex:form id="profilePhotoForm">
            <div id="buttonsContainer" style=" margin-top: 10px; text-align: center;">
                <apex:commandButton value="{!$Label.AddButton}" id="addButton"
                                    onClick="openCropperDialog();  return false;"
                                    disabled="{!IF(ISNULL(profilePhotoId), false, true)}">
                </apex:commandButton>
                <apex:commandButton value="{!$Label.DeleteButton}"
                                    onClick="deleteAttachments(); closeProfilePhotoDialog(); return false;"
                                    disabled="{!IF(ISNULL(profilePhotoId), true, false)}"/>
                <apex:commandButton value="{!$Label.ChangeButton}"
                                    onClick="openCropperDialog(); return false;"
                                    disabled="{!IF(ISNULL(profilePhotoId), true, false)}">
                </apex:commandButton>
            </div>
            <apex:actionRegion>
                <apex:actionFunction name="deleteAttachmentsJS" action="{!deleteAllAttachments}"
                                     reRender="profilePhoto, profilePhotoForm, cropperForm"/>
                <apex:actionFunction name="updateProfilePhotoJS" action="{!updateProfilePhoto}"
                                     reRender="profilePhoto, profilePhotoForm, cropperForm">
                    <apex:param name="imageName" value="" assignTo="{!myDoc.Name}"/>
                    <apex:param name="imageBody" value="" assignTo="{!imageBody}"/>
                </apex:actionFunction>
                <apex:actionFunction name="addNewProfilePhoto" action="{!addNewImage}"
                                     reRender="profilePhoto, profilePhotoForm, cropperForm">
                    <apex:param name="imageName" value="" assignTo="{!myDoc.Name}"/>
                    <apex:param name="imageBody" value="" assignTo="{!imageBody}"/>
                </apex:actionFunction>
            </apex:actionRegion>
        </apex:form>
    </div>

    <div id="cropperDialog">
        <apex:form id="cropperForm">
            <div id="imageContainer" style="margin: auto; text-align: center;">
                <apex:image id="target"
                            url="{! IF(ISNULL(profilePhotoId), URLFOR($Resource.default_profile_photo), '/servlet/servlet.FileDownload?file=' + profilePhotoId)}"
                            style="max-height: 100%; max-width: 100%"/>
                <canvas id="preview" width="150" height="150"
                        style="border:1px solid; overflow:hidden;display:none;"></canvas>
                <br/>
            </div>
            <div style="text-align: center;">
                <input type="file" value="{!myDoc.Body}" fileName="{!myDoc.Name}" styleClass="fileType" id="imgInp"
                       accept="image/jpeg,image/pjpeg,image/jpeg,image/png"/>
            </div>
            <apex:commandButton value="{!$Label.AddButton}"
                                onClick="saveImage(); closeCropperDialog(); closeProfilePhotoDialog();  return false;" reRender="imgInp"/>
            <apex:commandButton value="{!$Label.ChangeButton}"
                                onClick="updateProfilePhoto1(); closeCropperDialog(); closeProfilePhotoDialog();  return false;" reRender="imgInp"/>
        </apex:form>

    </div>