Форумы / National / Russian / Вывод в плагине clients сначала новых клиентов

<style media="screen">
      .image-upload > input
      {
        display: none;
      }
      .image-upload img
      {
        width: 80px;
        cursor: pointer;
      }
      </style>


<form action="{POST_FORM_ACTION}" method="post" id="addpost" enctype="multipart/form-data">
        <div class="input-group mb-3">
          <span class="input-group-text" uk-tooltip="Прикрепить файл">
            <div class="postfiles image-upload">
              <label for="file-input">
                  <i class="bi-paperclip"></i>
              </label>
              <input class="my" id="file-input" type="file" value="Выбрать" name="rpostfiles[]" onchange="GetFileSizeNameAndType()" />
              <span id="fp"></span>
              <script type="text/javascript">
              function GetFileSizeNameAndType()
                    {
                    var fi = document.getElementById('file-input'); // GET THE FILE INPUT AS VARIABLE.
                    var totalFileSize = 0;
                    // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
                    if (fi.files.length > 0)
                    {
                        // RUN A LOOP TO CHECK EACH SELECTED FILE.
                        for (var i = 0; i <= fi.files.length - 1; i++)
                        {
                            //ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE
                            var fsize = fi.files.item(i).size;
                            totalFileSize = totalFileSize + fsize;
                            document.getElementById('fp').innerHTML =
                            document.getElementById('fp').innerHTML
                            + fi.files.item(i).name
                            + '&nbsp ' + Math.round((fsize / 1024)) + 'kb';
                        }
                    }
                }
              </script>
        		</div>
          </span>
          <textarea class="uk-textarea form-control" type="text" aria-describedby="button-addon2" name="rposttext" maxlength="300" rows="1" style="overflow:hidden;" placeholder="Текст сообщения ..."></textarea>
          <button class="btn btn-outline-secondary" uk-tooltip="Отправить" name="submit" type="submit" value="{PHP.L.Submit}" id="button-addon2">
            <i class="bi-caret-right"></i>
          </button>
        </div>
        </form>


<script type="text/javascript">
        var tx = document.getElementsByTagName('textarea');//РАСТЯГИВАЕМ_textarea
        for (var i = 0; i < tx.length; i++) {
        tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
        tx[i].addEventListener("input", OnInput, false);
        }
        function OnInput() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';//////console.log(this.scrollHeight);
        }
        </script>

Есть input  который позволяет мне написать сообщение и прикрепить только  1 файл и отправить. 

И что бы было красиво я ее сделал на bootstrap  и добавил еще стилей

И получилось что то вроде окно чата как на vk 

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

То есть вижу, скрепку, имя файла, тип, вес

Все хорошо и красиво. но если вдруг я захотел изменить свое решение и вместо файла 546.png  я хочу загрузить файл users.rar , то я опять нажимаю на скрепку и и закачиваю (подготавливаю файл к отправке ) тот самый users.rar , но имя первого файла не удаляется и получается 

за вывод имя формата и веса файла отвечает  скрипт который находится внутри формы

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

<script type="text/javascript">
              function GetFileSizeNameAndType()
                    {
                    var fi = document.getElementById('file-input'); // GET THE FILE INPUT AS VARIABLE.
                    var totalFileSize = 0;
                    // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
                    if (fi.files.length > 0)
                    {
                        // RUN A LOOP TO CHECK EACH SELECTED FILE.
                        for (var i = 0; i <= fi.files.length - 1; i++)
                        {
                            //ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE
                            var fsize = fi.files.item(i).size;
                            totalFileSize = totalFileSize + fsize;
                            document.getElementById('fp').innerHTML =
                            document.getElementById('fp').innerHTML
                            + fi.files.item(i).name
                            + '&nbsp ' + Math.round((fsize / 1024)) + 'kb';
                        }
                    }
                }
              </script>

Функционал input позволяет закачать только 1 файл по факту.

Как сделать что бы в таких случаях , В случаях передумывания, имя первого файла удалялась Оставалось только имя последнего файла?