Блог

Информация: Я хочу загрузить несколько файлов с помощью Dropzone js в проекте Django. У меня есть две модели. Один для Поста, а другой-для Файла. Моя модель файлов будет иметь внешний ключ к модели Post. О моем Views.py когда пользователь заполняет сообщение формы, он также должен заполнить форму файлов для этого сообщения.

Отлично: Когда я отправляю Ajax_file_uploads форму вместо использования Dropzone.js несколько выбранных файлов прикрепляются одним экземпляром Post.

Проблема: Если я попытаюсь загрузить несколько файлов с помощью Dropzone.js При отправке формы создается несколько статей и несколько файлов.

Любая помощь будет очень признательна!

models.py

 class Post(models.Model):
    title = models.CharField(max_length=100, blank=True)
    content = models.TextField(blank=True)

class FileAttach(models.Model):
    file = models.FileField(upload_to='uploads/')
    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='file_attach', null=True)
 

views.py

 def Ajax_file_uploads(request):
    if request.method == "POST":
        p_form = PostForm(request.POST or None)
        form = AttachForm(request.POST or None, request.FILES)

        if p_form.is_valid():
            art = p_form.save(commit=False)
            art.user = request.user
            art.save()
            files = request.FILES.getlist('file')
            if form.is_valid():
                for f in files:
                    file_instance = FileAttach(file=f, post=art)
                    file_instance.save()

            return JsonResponse({"error": False, "message": "Uploaded Successfully"})
        else:
            return JsonResponse({"error": True, "errors": p_form.errors})
    else:
        p_form = PostForm()
        form = AttachForm()
        return render(request, "upload/api.html", {"p_form": p_form, "form": form})
 

create.html

 <script>
    Dropzone.autoDiscover = false;
    // Dropzone.options.myDropzone = false;

    // set the dropzone container id
    var id = "#kt_dropzonejs_example_2";
    // set the preview element template
    var previewNode = $(id   " .dropzone-item");
    previewNode.id = "";
    var previewTemplate = previewNode.parent(".dropzone-items").html();
    previewNode.remove();

    var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
        // url: "/uploader/files/", // Set the url for your upload script location
        url: '/uploader/multi/',
        headers: { 'X-CSRFToken': '{{ csrf_token }}' },
        timeout: 2000000,
        parallelUploads: 100,
        previewTemplate: previewTemplate,
        // uploadMultiple: true,
        maxFilesize: 200, // Max filesize in MB
        maxFiles: 5, // Max filesize in MB
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: id   " .dropzone-items", // Define the container to display the previews
        clickable: id   " .dropzone-select", // Define the element that should be used as click trigger to select files.
        uploadprogress: function (file, progress, bytesSent) {
            if (file.previewElement) {
                var progressElement = file.previewElement.querySelector("[data-dz-uploadprogress]");
                progressElement.style.width = progress   "%";
                progressElement.querySelector(".dropzone-progress-total").textContent = progress.toFixed(0)   "%";
            }
        },
        sending: function (file, xhr, formData) {
            // Show the total progress bar when upload starts
            $(id   " .progress-bar").css("opacity", "1");
            // Add other form data
            var data = $('#form-data').serializeArray();
            $.each(data, function (key, el) {
                formData.append(el.name, el.value);
            });
        },
        // success: function (file) {
        //     file.previewElement.remove()
        // }
        init: function () {
            $("#form-data").validate({
                submitHandler: function (form) {
                    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
                }
            });
        },
    });

    myDropzone.on("addedfile", function (file) {
        // Hookup the start button
        $(document).find(id   " .dropzone-item").css("display", "");
        $(id   " .dropzone-remove-all").css("display", "inline-block");
    });

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("complete", function (progress) {
        var thisProgressBar = id   " .dz-complete";
        setTimeout(function () {
            $(thisProgressBar   " .progress-bar, "   thisProgressBar   " .progress").css("opacity", "0");
        }, 300)
    });

    // Setup the button for remove all files
    document.querySelector(id   " .dropzone-remove-all").onclick = function () {
        $(id   " .dropzone-remove-all").css("display", "none");
        myDropzone.removeAllFiles(true);
    };

    // On all files removed
    myDropzone.on("removedfile", function (file) {
        if (myDropzone.files.length < 1) {
            $(id   " .dropzone-remove-all").css("display", "none");
        }
    });
</script>