Dropzone inside a Django form
Hi,
I'm trying to make a django form in which I want to upload a photo (Dropzone) and enter its title.
I can't send the title field and the photo to my view at the same time.
Could you please help me ?
add.js
// DropzoneJs
let myDropzone = new Dropzone("#kt_dropzonejs_example_1", {
url: "add", // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the file
autoProcessQueue: false,
maxFiles: 1,
maxFilesize: 1000, // MB
acceptedFiles: "image/*",
addRemoveLinks: true,
init: function () {
this.on("success", function (file, response) {
console.log(response);
});
},
headers: {
"X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value
}
});the "url" parameter seems obligatory and gives me problems
add.html
<form class="form" novalidate="novalidate" id="kt_add_video_form" data-kt-redirect-url="/" action="#" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<!--begin::titre photo group-->
<div class="row mb-6">
<!--begin::Label-->
<label class="col-lg-3 col-form-label required fw-semibold fs-6" for="{{ form.caption.id_for_label }}">Titre de la photo</label>
<!--end::Label-->
<!--begin::input-->
<div class="col-lg-9 fv-row">
{% render_field form.caption class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Titre"%}
</div>
<!--end::input-->
</div>
<!--end::titre photo group-->
<!--begin::Dropzone-->
<div class="dropzone" id="kt_dropzonejs_example_1">
<!--begin::Message-->
<div class="dz-message needsclick">
<i class="ki-duotone ki-file-up fs-3x"><span class="path1"></span><span class="path2"></span></i>
<!--begin::Info-->
<div class="ms-4">
<h5 class="fs-6 fw-bold text-gray-500 mb-1">Faites glisser votre photo ici ou cliquer pour les charger.</h5>
<span class="fs-7 fw-semibold text-gray-500">Jusqu"a 1 Go</span>
</div>
<!--end::Info-->
</div>
</div>
<!--end::Dropzone-->
<button type="submit" id="kt_add_video_submit"class="btn btn-primary" data-kt-videos-modal-action="submit">views.py
def post(self, request, **kwargs):
context = super().get_context_data(**kwargs)
form = forms.PhotoForm(user_flotte, request.POST)
if form.is_valid():
obj = form.save(commit=False)
file = request.FILES["file"]this code returns me "MultiValueDictKeyError at /photos/ajout 'file'
request.FILES seems empty.
Thanks
Replies (2)
Your article content as well as your website are extremely easy to understand and helpful to me, hope that more informative articles like this can be updated more often. uno online
Hi
If you're not able to access request.FILES["file"] , it might be because Dropzone is not correctly sending the file. Double-check the Dropzone configuration and make sure the paramName matches the key you're using to access the file in request.FILES.
Additionally, if you're also trying to access the title field in your form, you should make sure that your form is correctly configured to include the title field. You can access the title field in the view using the caption field from the form:
title = form.cleaned_data["caption"]Make sure that the name attribute of the input field in your form matches the field name in your form class (caption in this case). If the name attribute is not set correctly, the form data will not be submitted correctly.
