Как отправить URI данных, собранных через javascript, в поле Django Model? - PullRequest
Новая
       37

Как отправить URI данных, собранных через javascript, в поле Django Model?

1 голос
/ 08 января 2020

Я хочу использовать signature_pad из https://github.com/szimek/signature_pad, чтобы прикрепить изображение к Django форме, которая будет сохранена на сервере. С помощью имеющегося кода я могу успешно загрузить изображение с панели подписи, а также загрузить изображение на сервер со ссылкой на изображение в базе данных через ImageField от Django. Однако я не могу получить изображение подписи, отправленное на сервер. Я думаю, что оставшиеся две вещи, которые мне нужно сделать, это:

  1. Отправьте изображение в форму поля signature.
  2. Кодируйте изображение, чтобы я мог сохранить его в сервер.

У меня есть пара других несущественных вопросов: сохраняются ли данные изображения в signaturePad.toDataURL до их отправки? Я не знаю достаточно, чтобы иметь предпочтение относительно того, отправляется ли изображение на сервер в виде строки URI данных или ссылки на файл .PNG. Я полагаю, что со строкой легче иметь дело в будущем, правильно?

Вот мои модели.py 

from django.db import models

class testModel(models.Model):
    name = models.CharField(max_length=50)
    image = models.ImageField(upload_to='signatures/')
    signature = models.FileField()

forms.py: 

from django import forms
from .models import testModel

class testForm(forms.ModelForm):
    class Meta:
        model = testModel
        fields = '__all__'
        widgets = {'signature': forms.HiddenInput()}

просмотров. py: 

from django.shortcuts import render
from django.urls import reverse
from django.http import HttpResponse, HttpResponseRedirect

from .Forms import testForm
from .Models import testModel

def testFormPage(request):
    if request.method == 'POST':
        form = testForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/thanks/')
    else:
        form = testForm()
    return render(request, 'testFormPage.html', {'form': form})

и форма HTML: 

<form action="{% url 'testFormPage' %}" method="post" enctype="multipart/form-data">
  <div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
      <canvas></canvas>
      <button type="button" class="button save" data-action="save-png">Save as PNG</button>
    </div>
  </div>
  <input type="hidden" name="signature" value="formSig.value" id="formSig">
  <input type="submit" value="Submit">
</form>

Вместо копирования всего приложения js (https://github.com/szimek/signature_pad/tree/master/docs/js) здесь это строки, которые я добавил. Я действительно не знаю javascript, поэтому я просто попытался Франкенштейну вместе скопировать то, что скопировал здесь и там. 

var savePNGButton = wrapper.querySelector("[data-action=save-png]");
var formSig = wrapper.querySelector("[data-action=formSig]");

// and...
savePNGButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL();
    download(dataURL, "signature.png");
  }
});
formSig.addEventListener("submit", function(event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    signature.value = signaturePad.toDataURL();
  };
...