Как дождаться полной загрузки файла перед загрузкой следующего?

Question

[fisherspoons]

Есть компонент для загрузки файлов, в котором есть область для загрузки. При отправке запроса для каждого файла нужно прокидывать в запросе позицию(filePosition) каждого файла, которую я хочу добавлять на основании длинны массива в который добавляются все объекты файлов после их загрузки. Проблема в том что при вызове fetch для каждого файла нужно чтобы сначала заходило в then где пушатся объекты в массив, соответсвенно меняя длину массива, но сначала происходит вызов всех fetch а только потом then. Я так понимаю что нужно как-то переписать с async await, но придумать как не получается, прошу не хейтить

child component method

attachThumbnail: async function (e, curObj){
        e.target.closest('.area-upload').classList.remove('drag-file');
        e.target.closest('.area-upload').style.display = 'flex';

        let files = e.target.files || e.dataTransfer.files;
        let allowFiles = this.validateFiles(e, files, curObj);

        Array.from(allowFiles).forEach((file, index) => {
          this.$emit('attachThumbnail', curObj, file)
        });
      },

parent component

formData: {
        materialFiles: [
          {
            lang: 'uk',
            files: {
              profile: {
                name: '',
                id: ''
              },
              preview: {
                name: '',
                id: '',
                link: ''
              },
              restFiles: []
            }
          },
        ],
      },



 attachThumbnail(curObj, file){
      let index = this.formData.materialFiles.findIndex(item => item.lang === curObj.lang);
      let filePosition = this.formData.materialFiles[index].files.restFiles.length

      console.log('Array length ' + filePosition)

      this.uploadFile(curObj, file,'rest', filePosition)
          .then(response => response.json())
          .then(data => {
            console.log('append file')
            this.formData.materialFiles[index].files.restFiles.push({
              name: data.fileName,
              id: data.id
            })
          })
          .catch(error => {
            console.log(error)
          })
    },

uploadFile(curObj, file, type, position) {
      this.addPreloader = true
      let formData = new FormData(),
          data ={
            document: file,
            type: type,
            lang: curObj.lang,
            isPreview: type === 'preview',
            position: type === 'rest' ? position : 0
          }

      for (let key in data) {
        formData.append(key, data[key]);
      }
      return fetch('/api/material_media', {
        method: 'POST',
        body: formData,
      })
    },

<b>dev tools</b>
2 Array length 0
2 append file