Javascript - загрузка нескольких файлов в виде массива не работает

Question

У меня есть простая функция, где я зацикливаюсь на загруженных файлах из поля ввода, проверяю, какие из них проходят проверку на валидность, а затем предварительно просматриваю их и отправляю для загрузки на сервер:

onAddMediaFile(event) {
    const validFiles = [];
    const errorMessages = [];

    const files = Array.from(event.target.files).filter(file => {
      const fileIsImage = file.type.includes('image');
      const fileIsVideo = file.type.includes('video');
      const fileToBig = !validFileSize(file.size);
      const fileTypeValid = fileIsImage || fileIsVideo;
      const validationFail = fileToBig || !fileTypeValid;
      if (validationFail) {
        let message = '';
        if (fileToBig) {
          message = `${file.name} is too big. Max size 50MB`;
        }
        if (!fileTypeValid) {
          message = `${file.name} can only be image or video`;
        }
        errorMessages.push(message);

        return false;
      }

      validFiles.push({
        url: URL.createObjectURL(file),
        filtype: file.type,
      });

      return true;
    });

    this.setState((prevState) => {
      let validationFails = prevState.error && prevState.error.validationFails;
      if (errorMessages.length) {
        validationFails = validationFails ? {...prevState.error.validationFails, media: errorMessages} : {media: errorMessages};
      }

      const newTask = {
        ...prevState.task,
        media: prevState.task.media.concat(validFiles)
      };
      return {
        task: newTask,
        error: {
          validationFails,
        },
      };
    });

    this.gateway.uploadMedia(this.state.task.id, files)
      .then(task => {
        this.setState(prevState => ({
          task,
          error: {
            validationFails: prevState.error && prevState.error.validationFails
              ? {...prevState.error.validationFails, media: null} : null,
          },
        }));
      })
      .catch(httpOrSystemError => {
        if (!this.mounted) {
          return;
        }
        this.handleError(httpOrSystemError);
        this.setState((prevState) => {
          const newTask = {
            ...prevState.task,
            media: prevState.task.media.filter(media => !validFiles.some(file => file.url === media.url))
          };
          return {task: newTask};
        });
      })
  }

И эта функциявыполняет POST-запрос к серверу с массивом файлов:

uploadMedia(taskId, files) {
    const formData = new FormData();
    formData.append('mediafiler', files);
    const headers = {
      ...configureDefaultOptions(Gateway.token).headers,
    };
    delete headers['Content-Type'];
    return fetch(
      this.mediaUrl(taskId),
      {
        ...configureDefaultOptions(Gateway.token),
        headers: headers,
        method: 'POST',
        body: formData
      })
      .then(res => {
        if (res.ok) {
          return res.json();
        }
        throw res;
      }
      );
  }

При проверке консоли я вижу, что файлы загружаются следующим образом:

Но я ничего не получаю от бэкэнда. Похоже, что сервер не получил файлы вообще. И если я отправляю файлы с помощью Postman, используя form-data и ключевой медиафайл, он работает просто отлично. Что я здесь не так делаю?