Отправить текстовое поле в шаблоне Django с помощью кнопки js-upload-photos - PullRequest
Новая
       38

Отправить текстовое поле в шаблоне Django с помощью кнопки js-upload-photos

1 голос
/ 26 сентября 2019

У меня есть приложение Django для загрузки фотографий, следуя великолепному примеру на Простое лучше, чем сложное .Эта часть отлично работает.Я хотел бы добавить функцию, которая позволяет пользователю вводить текст, который будет применяться ко всем загружаемым фотографиям (это поле в модели).

Я попытался просто добавить {{ form.as_p }} в шаблоне формы, но это только создало отдельную форму с отдельной кнопкой.

Затем я добавил текстовое поле ввода в шаблон, но, похоже, с этим ничего не происходит, поскольку кнопка type=button, а не submit.Затем я попытался добавить несколько jquery / javascript для отправки этого текстового поля, но это вернуло ошибку Forbidden (CSRF token missing or incorrect.).

Может кто-нибудь сказать мне, как эффективно и правильно отправить текстовое поле в представление Django с этим типомкнопка?Или есть хорошее решение для ошибки токена CSRF?Соответствующие фрагменты кода ниже.

<!-- images_upload.html -->
{% extends "base_generic.html" %}

{% load staticfiles %}

{% block content %}

  {% block javascript %}

    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

    <script src="{% static 'js/jquery-file-upload/vendor/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'js/jquery-file-upload/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'js/jquery-file-upload/jquery.fileupload.js' %}"></script>

    <script src="{% static 'photos/js/images-upload.js' %}"></script>
  {% endblock %}

  {% block image_content %}
  <script>
    var URL = '{% url 'ExifReader:image_upload' %}';
  </script>

  <div style="margin-bottom: 20px;">
    <br>
    <p>This tool uploads photos, reads their Exif metadata, and commits them metadata to the database.
    <br>Click the "Upload photos" button to start.</p>

    <br>

    <form id="FANform" method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      <!-- {{ formI.as_p }}  THIS JUST ADDED A SEPARATE FIELD/BUTTON; NOT WHAT I NEED -->
      FAN: <input type="text" name="FANfield" id="FANfield"><br><br>
      <button type="button" class="btn btn-primary js-upload-photos">
        <span class="glyphicon glyphicon-cloud-upload"></span>
        Upload photos
      </button>

      <input id="fileupload" type="file" name="image" multiple
             style="display: none;"
             data-url="{% url 'ExifReader:image_upload' %}"
             data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
     </form>
  </div>

  <div class="modal" id="modal-progress" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 id="modal-title" class="modal-title">Uploading...</h4>
        </div>
        <div class="modal-body">
          <div class="progress" style="height: 42px;">
            <div class="progress-bar" role="progressbar" style="height: 42px; width: 0%;">0%</div>
          </div>
          <br>
          <button id="done-button" type="button" class="btn btn-primary" style="display: block; margin: 0 auto;">
            <span class="glyphicon glyphicon-cloud-upload"></span>
            Done. View uploaded images.
          </button>
        </div>
      </div>
    </div>
  </div>

  {% endblock %}

{% endblock %}

// images-upload.js
$(function () {
  $(".js-upload-photos").click(function () {
    $("#fileupload").click();
  });
  $("#fileupload").fileupload({
    dataType: 'json',
    sequentialUploads: false,  /* 1. SEND THE FILES ONE BY ONE */
    start: function (e) {  /* 2. WHEN THE UPLOADING PROCESS STARTS, SHOW THE MODAL */
      var FANfield = $('#FANfield').val();
      console.log(FANfield);
      var data = {'FAN':FANfield}
      $.post(URL, data, function(response){
        if (response === 'success'){
          console.log('success')
        }else{
          console.log('failure')
        }
      });
      $("#modal-progress").modal("show");
      $("#done-button").css("visibility","hidden");
    },
    stop: function (e) {  /* 3. WHEN THE UPLOADING PROCESS FINALIZE, HIDE THE MODAL */
      $("#modal-progress").modal("show");
      $("#modal-title").text("Done uploading");
      $("#done-button").css("visibility","visible");
      $("#done-button").click(function() {
        window.location = '/image_display'
      });
    },
    progressall: function (e, data) {  /* 4. UPDATE THE PROGRESS BAR */
      var progress = parseInt(data.loaded / data.total * 100, 10);
      var strProgress = progress + "%";
      $(".progress-bar").css({"width": strProgress});
      $(".progress-bar").text(strProgress);
    },

  });

});

# views.py
class image_upload(LoginRequiredMixin, View):
    def get(self, request):
        formI = ImageForm(self.request.POST, self.request.FILES)
        return render(self.request, 'ExifReader/images_upload.html', {'formI': formI})

    def post(self, request):
        formI = ImageForm(self.request.POST, self.request.FILES)
        formSave = formI.save(commit=False)
        formE = ExifForm(self.request.POST, instance=exif())
        if formI.is_valid() and formE.is_valid():
            photo = formI.save(commit=False)
            FANinput = self.request.POST.get('FAN') # Is this how I should get the js var?
            photo.FAN = FANinput
            photo.user = request.user
            photo.save()
...