В чем проблема загрузчика файлов?

Question

[GreenMan1899]

код
Не могу решить 2 проблемы:
1) Если загрузить много файлов (больше 20) и начать удалять их, то в какой-то момент результирующий массив перестанет уменьшаться.
2) Если через drag n drop можно закидывать по несколько раз файлы, то через клик input file работает только один раз.

$(function() {

  $('.fileuploader').each(function(){
    var fileuploader = $(this),

        inputDOM = fileuploader.find('.fileuploader__input'),
        fieldDOM = fileuploader.find('.fileuploader__field'),
        listDOM = fileuploader.find('.fileuploader__list'),

        maxFileSize = 2000000;

    var filesListObj, filesListArray = [], totalSize, htmlListItemsDOM, htmlListItemsArray = [];

    // поддерживает ли браузер Drag and Drop
    if (typeof(window.FileReader) == 'undefined') {
      fieldDOM.addClass('fileuploader__field--error');
      fieldDOM.text('Не поддерживается браузером!');
    }

    fileuploader[0].ondragover = function() {

      fieldDOM.addClass('fileuploader__field--hover');
      return false;
    };
        
    fileuploader[0].ondragleave = function() {
      fieldDOM.removeClass('fileuploader__field--hover');
      return false;
    };

    fileuploader[0].ondrop = function(event) {
      event.preventDefault();

      for (var i = 0; i < event.dataTransfer.files.length; i++) {
        filesListArray.push(event.dataTransfer.files[i])
      }

      getTotalSize(filesListArray);
      checkSize();
      setList();   
      setTargetFiles();   
      resetFileuploader();
    };

    inputDOM.change(function(event) {

      for (var i = 0; i < inputDOM[0].files.length; i++) {
        filesListArray.push(inputDOM[0].files[i])
      }

      getTotalSize(filesListArray);
      checkSize();
      setList();
      setTargetFiles();
      resetFileuploader();

    });


    function resetFileuploader() {
      fieldDOM.removeClass('fileuploader__field--error fileuploader__field--hover fileuploader__field--droped');
      fieldDOM.text('Перетащите файл или кликните на поле для загрузки с компьютера');
    };

    function getTotalSize(filesListArray) {
      totalSize = filesListArray.reduce(function(sum, current) {
        return sum + current.size;
      }, 0);
    };

    function checkSize() {
      if (totalSize > maxFileSize) {
        fieldDOM.addClass('fileuploader__field--error');
        fieldDOM.text('Файл слишком большой!');
        return false;
      }
    };

    function setList() {
      htmlListItemsArray = [];
      listDOM.find('.fileuploader__item').remove();

      filesListArray.forEach(function(file) {
        listDOM.append('<li class="fileuploader__item">' + file.name + '<svg class="fileuploader__remove xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24"><path fill="#a1a1a1" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" /></svg></li>');
      });

      htmlListItemsDOM = listDOM.find('.fileuploader__item');

      for (var i = 0; i < htmlListItemsDOM['length']; i++) {
        htmlListItemsArray.push(htmlListItemsDOM[i]);
      }

      handleRemoveBtn();
    };

    function handleRemoveBtn() {

      htmlListItemsArray.forEach(function(item, index) {
        var item = $(item),
            btn = item.find('.fileuploader__remove');


        btn.click(function(){
          filesListArray.splice(index - 1, 1);
          htmlListItemsArray.splice(index - 1, 1);
          console.log('Текущий', filesListArray, htmlListItemsArray);

          item.remove();        
          setTargetFiles();
        });
      });
    };

    // Конечный результат
    function setTargetFiles() {
      console.log('Результат', filesListArray);
      fileuploader.data('files', filesListArray);
    };
  });

});

Comments

[Дмитрий]

Изображение удалите, а код вставьте как положено.

Answer 1

[Владимир Обабков]

Во первых не понимаю почему Вы пишете splice(index-1, 1)- Так вы удаляете элемент, предшествующий тому на котором был клик.
А если кликать по нулевому то удалится элемент с конца (Первый аргумент splice).
Во вторых дело в том - что Вы жёстко закрепляете индекс у элементов. Т.е:
Есть 10 элементов с индексами 0,1,2,3,4,5,6,7,8,9
Вы удаляете 0 элемент и теперь массив у Вас на 9(Индексы с 0 по 8) элементов
Теперь мы пробуем удалить элемент с индексом 9 и понимаем что нету у нас в массиве такого. Он стал 8ым
Конечно такой splice не сработает и элементов в массиве меньше не станет.
Более того после первого удаления, когда массив сдвинется Вы уже не сможете понять что именно удалилось.