Как удалить один файл из FileList?

Question

[ekzotika]

Мне нужно удалить один файл из FileList при нажатии на соответствующую кнопку, как это можно реализовать, подскажите?

<div class="file-upload">
                            <div class="b-upload-files b-upload_multi">
                                <div class="b-upload-files__info">
                                    <div>Привязать к заказу можно до {{ request.settings.limit_upload_files_count }} файлов.</div>
                                    <div>Размер одного файла ограничен {{ request.settings.limit_upload_file_size|stringformat:'i' }} МБ.</div>
                                </div>
                                  <div class="js-files b-upload__files">
                                     <div class="js-file-tpl b-thumb" data-id="<%=uid%>" title="<%-name%>, <%-sizeText%>">
                                        <div class="b-thumb__name"><%-name%></div>
                                        <div class="b-thumb__del" onclick="remove(this)">✖</div>
                                     </div>
                                  </div>
                                    <div class="buttons">

                                        <div class="btn btn-choose btn-red js-fileapi-wrapper">
                                            <span>Выберите файл</span>
                                            <input type="file" name="filedata" class="pull-left input-upload" data-import-url="{% url 'sycatalog:order:attach' %}" data-csrf-token="{{ csrf_token }}" multiple>
                                        </div>
                                    </div>

                            </div>
                        </div>

function remove(targetFile) {
        var url = $(".input-upload").attr("data-import-url");
        debugger
          var data = new FormData();
          var isFiles = false;
          var arr = {}
          arr = $(".input-upload")[0].files;
          var ttargetFile = $(targetFile).closest('.js-file-tpl');
          $.each($(".input-upload")[0].files, function(i, file) {
            isFiles = true;
            data.append("file", file);
          });

          console.log(ttargetFile.attr('data-fileapi-id'));

          for (var i = 0; i < arr.length; ++i) {
              $.each(arr[i], function(y, file) {
                  if (y.indexOf('lastModified') >= 0) {
                      return false;
                  }
                  else {

                      if (file.indexOf($(ttargetFile).attr('data-fileapi-id')) >= 0) {
                          arr.splice(i, 1);
                          return false;
                      }
                  }

                  });

              }
    }

То, как сделано сейчас - не работает, так как пытаюсь удалить именно из FileList. Но если FileList преобразовать в массив, тогда обратно уже никак в FileList?
Что можно сделать, все варианты перебрала?

Answer 1

[zkrvndm]

Удалить файлы из существующего FileList нельзя, НО можно создать новый FileList с теми файлами, которые нужны.

Comments

[ekzotika]

Спасибо Вам огромное!

[ekzotika]

Подскажите, а как мне обновить файлы input внешне? Делаю $(".input-upload")[0].files = file_list; (file_list проверила, файлов на один меньше), но в списке файлов на странице остаётся всё как и было

[zkrvndm]

ekzotika, после вставки файлов на поле нужно вызывать событие change, чтобы обработчики на странице увидели эти файлы.

[zkrvndm]

ekzotika,

$(".input-upload")[0].files = file_list;
$(".input-upload")[0].dispatchEvent(new Event('change'));