Ошибка при отправке сгенерированного изображения JavaScript на Django ModelForm - PullRequest
Новая
       6

Ошибка при отправке сгенерированного изображения JavaScript на Django ModelForm

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

Я пытаюсь использовать https://github.com/szimek/signature_pad, чтобы прикрепить подпись к форме и отправить ее на сервер. Я смог успешно загрузить изображения с помощью стандартного ImageField, а также использовал szimek / signature_pad для загрузки подписи. Но когда я пытаюсь получить подпись на сервере, я получаю «(Подпись скрытого поля) Файл не был отправлен. Проверьте тип кодировки в форме». Поэтому я думаю, что по крайней мере успешно отправляю изображение в поле, но не знаю, как его кодировать.

HTML

<form id="form" action="{% url ‘my_app:testFormPage' %}" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  {{ form.as_p }}
  <div id="signature-pad">
    <canvas></canvas><br>
  </div>
  <input type="hidden" name="signature" value=“signatureImage”>
  <button type="submit" data-action="formSig">Submit</button>
</form>

Python

# Models.py
class testModel(models.Model):
    name = models.CharField(max_length=50)
    date = models.DateTimeField(default=timezone.now)
    signature = models.ImageField (null=True, max_length=3000)

# Forms.py
class testForm(forms.ModelForm):
    class Meta:
        model = testModel
        fields = ‘__all__’
        widgets = { 'signature': forms.HiddenInput(),}

# Views.py
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()

    context = {'form': form}
    return render(request, 'client_visits/testFormPage.html', context)

Javascript
Полное приложение javascript можно найти по адресу https://github.com/szimek/signature_pad/tree/master/docs/js. Вот только что я добавил 

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

formSig.addEventListener("submit", function (event) {
        var signatureImage = signaturePad.toDataURL();
    });
...