Замена существующего файла в очереди перед загрузкой

Question

Я использовал приведенный пример здесь для загрузки файлов на мой веб-сервер.Я сделал несколько дополнительных настроек для загрузки файлов, поскольку мне пришлось загружать 3 изображения с одной страницы (верхний и нижний колонтитулы).Все работает нормально.Единственная проблема, с которой я сталкиваюсь, это то, что если я повторно выберу изображение (скажем, заголовок), оно не заменит уже выбранное изображение.Вместо этого он добавляет изображение в очередь.Мое требование не разрешать пользователю более 3-х изображений.Если он выбирает изображение (заголовок, фон или нижний колонтитул), оно должно заменить изображение в очереди (если оно существует в очереди).Я пробовал функцию «removeFromQueue ()», приведенную в примере ссылки на загрузку, но она не работает.

Единственная измененная часть кода - добавление еще 2 элементов управления загрузкой файлов:

<div class="col-md-3">
    <div class="mt-20 row">    
      <input type="file" #fileInput (change)="addToQueue()" id="file-1" class="inputfile inputfile-1" />
      <label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
          <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
          /></svg> <span>Header Image&hellip;</span></label>
    </div>
    <div class="mt-20 row">     
      <input type="file" #fileInput (change)="addToQueue()" id="file-2" class="inputfile inputfile-1" />
      <label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
          <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
          /></svg> <span>Background Image&hellip;</span></label>
    </div>
    <div class="mt-20 row">     
      <input type="file" #fileInput (change)="addToQueue()" id="file-3" class="inputfile inputfile-1" />
      <label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
          <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
          /></svg> <span>Footer Image&hellip;</span></label>
    </div>
  </div>