'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: Frontend Bug

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