Ajax, не добавляется в список таблиц и не скрывает индикатор выполнения - PullRequest
Новая
       6

Ajax, не добавляется в список таблиц и не скрывает индикатор выполнения

0 голосов
/ 30 марта 2020

Я пытаюсь загрузить изображения, используя запрос Ajax в Django со строкой состояния, однако после достижения 100% моя строка состояния не скрывается и изображения не добавляются в таблицу. Мне было интересно, в чем проблема в моем javascript коде.

моем js коде: 

$(document).ready(function(){

    $(".js-upload-images").click(function () {
      $("#fileupload").click();
    });

    $("#fileupload").fileupload({
      dataType: 'json',
      sequentialUploads: true,  
      start: (e)  =>  { 
        $("#container-progress").show();
      },
      stop: (e) =>  {  
        $("#container-progress").hide();
      },
      progressall: function (e, data) {  
        var progress = parseInt(data.loaded / data.total * 100, 10);
        var strProgress = progress + "%";
        $(".progress-bar").css({"width": strProgress});
        $(".progress-bar").text(strProgress);
      },
      done: function (e, data) {
        if (data.result.is_valid) {
          $("#image_list tbody").prepend(
            "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
          )
        }
      }
    });
});

моем файле post_create html: 

{% load crispy_forms_tags %}
{% load static %}
    <script src="{% static 'js/image_upload.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>

    <form method="POST" data-url="{% url 'home:post-create' %}" class="post-create-form">
        {% csrf_token %}
            <div class="modal-header">
                <h5 class="modal-title" >Create a Post</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{ form|crispy }}
            </div>

            <div class="my-3 mx-3">
                <button type="button" class="btn btn-sm mr-auto btn-primary js-upload-images">
                    <span><i class="fas fa-camera"></i></span>
                    </button>

                    <input id="fileupload" type="file" name="file" multiple
                            style="display: none;"
                            data-url="{% url 'home:post-image-upload'  %}"
                            data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>

                    <table id="image_list" class="table my-2">
                    <tbody>
                        {% for image in images %}
                        <tr>
                            <td><a href="{{ image.file.url }}">{{ photo.file.name }}</a></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    </table>

                    <div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
                        <div class="modal-dialog">
                          <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title">Uploading...</h4>
                          </div>
                          <div class="modal-body">
                            <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
                            </div>
                          </div>
                          </div>
                        </div>
                        </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Post</button>
            </div>
    </form>

Мой взгляд на добавление изображений: 

class PostImageUpload(LoginRequiredMixin, View):

    def get(self, request):
        images = Images.objects.all()
        return render(self.request, 'home/posts/post_create.html', {'images':images} ) 

    def post(self, request):
        data = dict()
        form = ImageForm(self.request.POST, self.request.FILES)
        if form.is_valid():
            image = form.save(False)
            image.post = request.post
            image.save()
            data = {'is_valid': True, 'name': image.file.name, 'url': image.file.url} 
        else:
            data['is_valid'] = False
        return JsonResponse(data)

После выбора файла строка состояния достигает 100%, блокирует модальный режим, не скрывает и ничего не добавляет в список таблиц. Я не могу видеть, где проблема. Заранее спасибо!

...