Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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

{% csrf_token %}
{% render_field form.caption class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Titre"%}
Faites glisser votre photo ici ou cliquer pour les charger.
Jusqu'a 1 Go

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

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

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.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(