How to show multiple attachments in JavaScript

Question

I'm completly new in JavaScript and HTML, and i want to attach some files in my site. The problem is that: when i want to attach some files, from the view, i selected them but in the view appear only one file instead of the list of file that i selected.

For example, if I attach file1, file2 and file3, it shows me only file1, like that:

So I want to obtain this situation:

Here is the code:

JS wrote by me to fix the problem, but it shows me the same result (only one file appears):

const fileinput = require("./button");
const updateList = () => {
  var arrayFiles = document.getElementById("input_issue").files;
  for (i = 0; i < arrayFiles.length; i++) {
    fileinput.append('<i class="text">arrayFiles[i].name</i>')
  }
}

<form id="issueModalFormAttachment" method="POST">
  <table>
    <tr class="form-group">
      <td class="label">{% translate 'Attachments' %}</td>
      <td class="field">
        <input id="input_issue" name="input_issue[]" type="file" class="file" multiple data-show-upload="true" data-show-caption="true">
      </td>
    </tr>
  </table>
</form>

I don't know if it is useful because i know nothing about html and js and someone else wrote the entire HTML and JS code... but my tutor gave me the issue to fix this problem

ArrayFiles should be the array of files that i want to upload. I thought that with a for loop i could scan the array and append the files in the button.

Can someone help me? Sorry again for the ignorance

Edit: I solved in this way

const setupInput = () => {
     $('#input_issue').change( () => {

        let arrayFiles = document.getElementById("input_issue").files;
        for(i=1;i<arrayFiles.length;i++){
            let t = $('#button_file_upload_issue i.text').text();
            $('#button_file_upload_issue i.text').text(t + ', '+ arrayFiles[i].name);
        }

    })
}

Add more details as to what you have tried, what error did you face etc., — Nisanth Reddy, May 11 '21 at 13:43
I think this will help: https://stackoverflow.com/questions/18451856/how-can-i-let-a-user-download-multiple-files-when-a-button-is-clicked — ergoProxy, May 11 '21 at 13:49
the updateList called in a file that handle the entire behavior of the form view (title, description, some buttons...). I think it was a good idea to call updateList() inside that file. It's hard to explain, i know that i miss a lot of things and details, but I've never see js and html... — ElMaestroDeToMare, May 11 '21 at 13:50

score 2 · Accepted Answer · answered May 11 '21 at 15:58

2

try something like this:

fileinput.innerHTML += '<i class="text">arrayFiles[i].name</i>';

answered May 11 '21 at 15:58

Mohammad Mohammadi

305
4
11

How to show multiple attachments in JavaScript

1 Answers1