Uploading multiple files to a server?

Question

HTML

Task: upload several files to the server (backend on Node.js)
Added a form for uploading files and a handler for it:

class InputFile extends Component {
  constructor(props) {
    super(props);
    this.state = {     
      selectedFile: null,
      // selectedFile: [],
      filesList: []     
    };
  }

  uploadChosenFile(selectedFile, fileName) {
    this.setState({
      selectedFile,
      filesList: fileName
    });
  }

  handleUploadFile(event) {
    const list = this.state.filesList;

    list.push(event.target.files[0].name);
    this.uploadChosenFile(event.target.files, list);
  }

  render() {
    return (
      <div>
        <input id='file' name='file'
          type='file' formEncType='multipart/form-data' onChange={this.handleUploadFile}
          multiple
        />
        <div>
          {this.state.filesList.map(item => {
            return (<a className='edit__form-group-link' href='#' key={'1'}>{item}</a>);
          })}
        </div>
      </div>
    );
  }
}

After clicking on the submit button, the function is called from the same component:

uploadFilesToServer(idEvent) {
    const data = new FormData();

    this.state.selectedFile.map(el => {
      data.append('file', el, el.name);
      axios.post(`${Config.baseUrl}/upload/${idEvent}`, data);
    });
  }

As a result, only the last file of all the selected ones was sent to the server.
I tried to make an array from this.state.selectedFile and transfer one file and it, but I got a 500 error in the console. Tell me, please, where is the error?

Answer 1

Here is the line
data.append('file', el, el.name);
Should be replaced with
data.append('file[]', el, el.name);