'Django crispy-forms bug: Multiple Image input doesn't show different file names
I have a crispy form with an image input field that accepts multiple images:images = forms.ImageField(widget=forms.FileInput(attrs={'class': 'form-control', 'multiple': True}), required=False)
The form works perfectly fine and the images are uploaded and can be processed in the backend.
However, there is a weird frontend bug: Usually when you select multiple images for upload on a crispy image field, it shows all the file names of the selected images as a list in that widget. However, in my case it just shows the name of one of the files, multiple times (to be precise: for every file selected it shows the name of one of the files once).
For example, if I select three files with different names, one of which is called 'kangaroo.png', the widget looks like this:

Now I've pinned down the problem to this little snippet:
<div class="custom-file ">
<input type="file" name="images" class="form-control fileinput fileUpload form-control-file custom-file-input" multiple accept="image/*" id="id_images">
<label class="custom-file-label" for="id_images">Choose file</label> <script type="text/javascript" id="script-id_images">
document.getElementById("script-id_images").parentNode.querySelector('.custom-file-input').onchange = function (e){
var filenames = "";
for (let i=0;i<e.target.files.length;i++){
filenames+=(i>0?", ":"")+e.target.files[0].name;
}
e.target.parentNode.querySelector('.custom-file-label').innerHTML=filenames;
}
</script>
</div>
The problem lies in the line that reads: filenames+=(i>0?", ":"")+e.target.files[0].name;.
It should clearly be: filenames+=(i>0?", ":"")+e.target.files[i].name;.
And sure enough, when I looked into the code for crispy forms there was the correct code using i as an index instead of 0. (The path to that file is crispy_forms\templates\bootstrap4\layout\field_file.html in case you want to have a look)
So now I'm wondering, what happened? Where did the i change into a 0? Is this a bug with crispy-forms that needs reporting or could the problem lie within my project?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
