Я пытаюсь добавить изображения в сообщение блога, используя Dropzone и Ajax, и мне не удается успешно загрузить файлы, и мой объект записи создается без изображений. Я не вижу никаких ошибок в консоли, но изображения не добавляются.
форма моего изображения:
class ImageForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(ImageForm, self).__init__(*args, **kwargs)
self.fields['file'].required = False
file = forms.FileField(
widget=forms.ClearableFileInput(
attrs={
'multiple': True,
'class':'image_upload_form'
}))
class Meta:
model = Images
fields = ('file',)
my post_create. html:
{% load crispy_forms_tags %}
{% load static %}
<body>
<form id="postCreate" method="POST" data-url="{% url 'home:post-create' %}" class="post-create-form dropzone" enctype="multipart/form-data">
{% 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">×</span>
</button>
</div>
<div class="modal-body" style="overflow-y: auto; margin:0;">
<div id="loadingDiv">
<div class="d-flex justify-content-center mb-1">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
{{ form|crispy }}
<div class="d-flex justify-content-left">
<div>
<button type="button" id="upload-image" class="btn btn-sm mr-auto btn-primary pb-1 fileinput-button">
<span><i class="fas fa-image"></i></span>
</button>
</div>
<div>
<p class="pt-1 mx-2 text-muted small">Add up to four images to your post</p>
</div>
</div>
<div id="previews" class="dropzone-previews"></div>
<div class="fallback">
{{ image_form }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="submit-all" class="btn btn-primary">Post</button>
</div>
</form>
<script src="{% static 'dropzone/dropzone.js' %}"></script>
<link rel="stylesheet" href="{% static 'dropzone/dropzone.css' %}">
<style>
.modal-body {
overflow-y: auto;
}
#divLoading {
margin: 0px;
display: none;
padding: 0px;
position: absolute;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(255, 255, 255);
z-index: 30001;
opacity: 0.8;
}
.spinner-border {
position: absolute;
left: 45%;
top: 50%;
}
</style>
<script>
var acceptedFileTypes = "image/*";
$('.dz-progress').hide();
Dropzone.options.myDropzone = {
paramName: "file",
url: "{% url 'home:post-create' %}",
acceptedFiles: acceptedFileTypes,
autoProcessQueue : false,
addRemoveLinks: true,
parallelUploads: 5,
maxFiles: 4,
uploadMultiple: true,
previewsContainer: "#previews",
clickable: ".fileinput-button",
init: function () {
var submitButton = document.querySelector("#submit-all")
submitButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
myDropzone.processQueue();
});
}
}
</script>
</body>
my post. js для обработки Ajax вызовов и создания сообщения object:
$(document).ready(function(){
$('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$('#loadingDiv').show();
})
.ajaxStop(function () {
$('#loadingDiv').hide();
})
.ajaxSend(function (event, jqxhr, settings) {
jqxhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
});
var ShowForm = function(e){
e.stopImmediatePropagation();
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType:'json',
beforeSend: function(){
$('#modal-post').modal('show');
},
success: function(data){
$('#modal-post .modal-content').html(data.html_form);
}
});
return false;
};
var SaveForm = function(e){
var form = new FormData(this);
e.stopImmediatePropagation();
$.ajax({
url: $(this).attr('data-url'),
type: $(this).attr('method'),
data: form,
cache: false,
processData: false,
contentType: false,
dataType: 'json',
success: function(data){
if(data.form_is_valid){
$('#post-list div').html(data.posts);
$('#modal-post').modal('hide');
} else {
$('#modal-post .modal-content').html(data.html_form)
}
}
})
return false;
}
//create
$('.create-post-btn').click(ShowForm);
$('#modal-post').on("submit",".post-create-form",SaveForm)
//update
$('#post-list').on("click",".show-form-update",ShowForm);
$('#modal-post').on("submit",".update-form",SaveForm)
//delete
$('#post-list').on("click",".show-form-delete",ShowForm);
$('#modal-post').on("submit",".delete-form",SaveForm)
});
И моя функция post_create в views.py:
@login_required
def post_create(request):
data = dict()
if request.method == 'POST':
print(request.FILES)
image_form = ImageForm(request.POST, request.FILES or None)
images = request.FILES.getlist('file')
form = PostForm(request.POST)
if form.is_valid():
post = form.save(False)
post.author = request.user
post.save()
for i in images:
print(i)
image_instance = Images(file=i,post=post)
image_instance.save()
data['form_is_valid'] = True
posts = Post.objects.all()
posts = Post.objects.order_by('-last_edited')
data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
else:
data['form_is_valid'] = False
else:
image_form = ImageForm
form = PostForm
context = {
'form':form,
'image_form':image_form
}
data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
return JsonResponse(data)
Я хотел бы отметить, что перед использованием Dropzone изображения были созданы успешно, но сейчас я могу см. предварительный просмотр изображений, но они не создаются после нажатия кнопки «Отправить».
Спасибо за всю помощь заранее! РЕДАКТИРОВАТЬ: Теперь моя dropzone не загружается, и мой Ajax занимает очень много времени. время для завершения я не могу решить эту проблему, пожалуйста, помогите.