Передача строк Base64 с использованием обратных вызовов в цикле for

Question

Итак, я пытаюсь передать строки Base64 через обратные вызовы.Вот мой код

Функция чтения файлов

getBase64 = (callback) => {
  const filesSelected = this.props.imageFiles;
  let test = '';
  let imageObject = {};
  const imageBase64 = [];
  for(let i = 0; i < filesSelected.length; i++) {
    const fileToLoad = filesSelected[i];
    const fileReader = new FileReader();
    fileReader.readAsDataURL(fileToLoad);
    fileReader.onload = () => {
      test = fileReader.result.split(',');
      imageObject = test;
      imageBase64.push(imageObject);
      callback(imageBase64);
    };
    fileReader.onerror = (error) => {
      console.log('Error :', error);
    };
  }
}

Функция обратного вызова

getSubmitCreateListing = (e) => {
  e.preventDefault();

  this.getBase64( (imageBase64) => {
    console.log(imageBase64);
    this.props.cacheCreateListing({ imageBase64 }); 

    this.props.onSubmitCreateListing(); // onSubmit function, API request to the server
  })
}

Итак, как вы можете предсказать, *Цикл 1013 * будет повторять обратный вызов несколько раз на основе length из filesSelected.На функции getSubmitCreateListing отправляю вызов API на сервер.По мере итерации будет создаваться несколько дублирующих списков, что явно неверно.

Как мне решить эту проблему?Я хочу отправить только один обратный вызов, как только fileReader завершит свою работу.Я не могу переместить обратный вызов за пределы цикла for, поскольку он асинхронный.Я использую Promises вместо этого?Если да, можете ли вы показать мне, как это сделать?Пожалуйста помоги.Спасибо.