Загрузка подписи с Django

Question

Я пытаюсь создать поле подписи, которое будет связано с моделью в django. Я искал везде и, наконец, смог получить холст с подписью jquery в своем проекте. Но из-за того, что я очень мало знаю о jquery, я не уверен, как передать созданный экземпляр подписи в t ie для модели и загрузить непосредственно на носитель cdn.

Сейчас я могу загрузить файл и сохранить подпись на своем локальном компьютере. Но я не могу сделать их вместе. Ток html Выход GUI с формой и подписью

class SigninForm(forms.ModelForm):
        class Meta:
            model = Attendance
            fields = ('schedule', 'time_punch', 'signature', )

// using <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script> 
var clockinSignature = "{{ schedule.date|date:"ydm"}}{{ schedule.kid.account }}{{ schedule.kid|cut:" " }}-in.jpg"
var clockoutSignature = "{{ schedule.date|date:"ydm"}}{{ schedule.kid.account }}{{ schedule.kid|cut:" " }}-out.jpg"
var wrapper = document.getElementById("signature-pad");
var clearButton = wrapper.querySelector("[data-action=clear]");
var saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'rgb(255, 255, 255)'
    });

function resizeCanvas() {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
     signaturePad.clear();
}

window.onresize = resizeCanvas;
resizeCanvas();

function download(dataURL, filename) {
  if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
    window.open(dataURL);
  } else {
    var blob = dataURLToBlob(dataURL);
    var url = window.URL.createObjectURL(blob);

    var a = document.createElement("a");
    a.style = "display: none";
    a.href = url;
    a.download = filename;

    document.body.appendChild(a);
    a.click();

    window.URL.revokeObjectURL(url);
  }
}

function dataURLToBlob(dataURL) {
  var parts = dataURL.split(';base64,');
  var contentType = parts[0].split(":")[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], { type: contentType });
}

clearButton.addEventListener("click", function (event) {
  signaturePad.clear();
});

saveJPGButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL("image/jpeg");
    download(dataURL, clockinSignature);
  }

});

{% extends '_base.html' %}
{% block content %}
{% load crispy_forms_tags %} 
Signin

<div class="mb-4">
    <div class="col-12 mx-auto my-2">
        <form method='POST' action="">{% csrf_token %}
            {{ form|crispy }}
            <div id="signature-pad" class="signature-pad mt-3">
                <div class="signature-pad--body">
                <canvas></canvas>
                </div>
                <div class="signature-pad--footer">
                <div class="description">sign above</div>

                <div class="signature-pad--actions">
                    <div>
                    <button type="button" class="button clear btn btn-secondary" data-action="clear">Clear</button>

                    </div>
                    <div>
                    <input type="submit" class="button save btn btn-primary" data-action="save-jpg" value="Signin" />
                    </div>
                </div>
                </div>
            </div>
            <a href="{% url "calendar:schedule" %}" class="btn btn-block btn-secondary">Back</a>
        </form>
    </div>
</div>

{% endblock content %}