{% extends "member/profile_detail.html" %} {% load i18n static pretty_money django_tables2 crispy_forms_tags %} {% block profile_content %} <div class="text-center"> <form method="post" enctype="multipart/form-data" id="formUpload"> {% csrf_token %} {{ form |crispy }} </form> </div> <!-- MODAL TO CROP THE IMAGE --> <div class="modal fade" id="modalCrop"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <img src="" id="modal-image" style="max-width: 100%;"> </div> <div class="modal-footer"> <div class="btn-group pull-left" role="group"> <button type="button" class="btn btn-default" id="js-zoom-in"> <span class="glyphicon glyphicon-zoom-in"></span> </button> <button type="button" class="btn btn-default js-zoom-out"> <span class="glyphicon glyphicon-zoom-out"></span> </button> </div> <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button> <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button> </div> </div> </div> </div> {% endblock %} {% block extracss %} <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.css" rel="stylesheet"> {% endblock %} {% block extrajavascript%} <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-cropper@1.0.1/dist/jquery-cropper.min.js"></script> <script> $(function () { /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */ $("#id_image").change(function (e) { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $("#modal-image").attr("src", e.target.result); $("#modalCrop").modal("show"); } reader.readAsDataURL(this.files[0]); } }); /* SCRIPTS TO HANDLE THE CROPPER BOX */ var $image = $("#modal-image"); var cropBoxData; var canvasData; $("#modalCrop").on("shown.bs.modal", function () { $image.cropper({ viewMode: 1, aspectRatio: 1/1, minCropBoxWidth: 200, minCropBoxHeight: 200, ready: function () { $image.cropper("setCanvasData", canvasData); $image.cropper("setCropBoxData", cropBoxData); } }); }).on("hidden.bs.modal", function () { cropBoxData = $image.cropper("getCropBoxData"); canvasData = $image.cropper("getCanvasData"); $image.cropper("destroy"); }); $(".js-zoom-in").click(function () { $image.cropper("zoom", 0.1); }); $(".js-zoom-out").click(function () { $image.cropper("zoom", -0.1); }); /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */ $(".js-crop-and-upload").click(function () { var cropData = $image.cropper("getData"); $("#id_x").val(cropData["x"]); $("#id_y").val(cropData["y"]); $("#id_height").val(cropData["height"]); $("#id_width").val(cropData["width"]); $("#formUpload").submit(); }); }); </script> {% endblock %}