input type file multiple usuwanie pliku z input

Question

Hej. Mam input do dodawania wielu plików z działającym podglądem. Jak mogę za pomocą js/jQuery usuwać pojedyncze pliku z input? Chodzi o to aby plik był usunięty przed wysłaniem na serwer. Teraz mam taki kod:

let storedFiles = [];
        $('#images').on('change', function (e) {
            if (this.files) {
                let filesList = this.files;
                let filesAmount = this.files.length;
                for (let i = 0; i < filesAmount; i++) {
                    let file = this.files[i];
                    storedFiles.push(file);
                    let reader = new FileReader();
                    reader.onload = function (event) {
                        let html = '<div class="single-image-preview" style="margin-bottom: 5px; position: relative!important;"> <button type="button" data-name="'+i+'" class="remove-img button-remove-image">x</button><img src="' + event.target.result + '" style="width: 100%"></div>';
                        $(html).insertAfter('#imagesPreview');
                        $(".remove-img").click(function(e){
                            e.preventDefault();
                            $(this).parent().remove('');
                            let clickName = $(this).data('name');
                            let arrayList = Array.from(document.getElementById('images').files);
                            arrayList.splice(clickName, 1);
                            console.log(document.getElementById('images').files);
                        });

                    }
                    reader.readAsDataURL(this.files[i]);
                }
            }
        })

pliki są usuwane z podglądu jednak kiedy wysyłam formularz na serwer trafiają wszystkie

Comments

https://stackoverflow.com/questions/1703228/how-can-i-clear-an-html-file-input-with-javascript/16222877

może pomoże

---

średnio. U mnie to trochę inaczej wygląda i potrzeba czego innego niż całkowite wyczyszczenie input

---

Możesz najpierw wsadzić zawartość inputa do zmiennej usunąć z tej zmiennej to co ciebie interesuje i nadpisać inputa tą zmienną

---

jakaś podpowiedź jak to zrobić na przykładzie mojego kodu?

---

jak byś dał jeszcze html to by było super?

---

<div class="form-group">
                        <div id="imagesPreview" class="images-preview">

                        </div>
                        <label for="images" class="w-100 text-center custom-s-label cursor">
                            <img src="https://img.icons8.com/ios/50/000000/plus--v1.png"/> <br/>
                            <div class="txt">Zdjęcia</div>
                        
                        </label>
                        <input style="display: none" id="images" type="file" name="images[]" accept="image/*"
                             multiple>
                    </div>

 

---

Ok dzięki tylko że albo ja jestem ślepy albo nie ma w kodzie funkcji która by wysyłała dane na serwer. Jak byś mógł to daj jeszcze kod który wysyła dane na serwer. No chyba ze takowa funkcja jest w kodzie to podaj nr linijki.

---

znaczy ja to przesyłam jako formularz. Mam <form></form> w tym button submit do tego jeszcze jakiś inne dane. Po stronie serwera laravel

---

@Marak123 masz na to jakiś pomysł?

---

Chwile bo myślę

Answer 1

Ogólnie to znalazłem rozwiązanie co prawda trzeba je jeszcze dopracować.

Trik polega na tym aby wyciągną tablicę z inputa usunąć wybrany element i wpisać tą tablice od nowa do inputa.

A pomoże przy wpisywaniu tobie coś takiego:

var tst = new DataTransfer();
for(let elm of arrayList){
    tst.items.add(elm);
}
document.getElementById('images').files = tst.files;

Musisz sobie to dostosować do własnych potrzeb.

A to jest kod js który może nakreślić jakoś ci to jak to ma wyglądać mniej wiecej.

var storedFiles = [];
$('#images').on('change', function (e) {
    if (this.files) {

        let filesList = this.files;
        let filesAmount = this.files.length;

        for (let i = 0; i < filesAmount; i++) {
            let file = this.files[i];
            storedFiles.push(file);

            let reader = new FileReader();

            reader.onload = function (event) {
                let html = '<div class="single-image-preview" style="margin-bottom: 5px; position: relative!important;"> <button type="button" data-name="' + i + '" class="remove-img button-remove-image">x</button><img src="' + event.target.result + '" style="width: 100%"></div>';
                $(html).insertAfter('#imagesPreview');
            }
            reader.readAsDataURL(this.files[i]);

        }

        $(".form-group").delegate('.remove-img', 'click' ,function (e) {
            e.preventDefault();
            $(this).parent().remove('');

            let clickName = $(this).data('name');
            let arrayList = Array.from(document.getElementById('images').files);
            arrayList.splice(clickName, 1)

            var tst = new DataTransfer();
            for(let elm of arrayList){
                tst.items.add(elm);
            }
            document.getElementById('images').files = tst.files;
            console.log(document.getElementById('images').files);
        });
        console.log(this.files)
    }
})

Dałem tam delegate w chyba 25 linijce bo funkcja z jquery delegate może wykonywać zdarzenia np. click na elementach dynamicznych(dodawanych przez js w przyszłości jak się tu dzieję), musiałem tak zrobić ponieważ pętla w której działa funkcja reader.onload usuwała każdy element z tablicy a ten kod w jakimś tak stopniu działa jest chyba jeszcze parę błędów ale mam nadzieje ze dojdziesz do tego jak to naprawić, najlepiej to używać console.log do debugowania kodu by zobaczyć co gdzie i kiedy się wykonuje a co się nie wykonuje lub jak się to wykonuje.

https://stackoverflow.com/questions/61071761/can-i-insert-or-edit-a-file-input-with-val

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

Answer 2

input.files jest listą, którą można manipulować za pomocą obiektu DataTransfer

 

przykład

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
    <input type="file" id="image_uploads" name="image_uploads[]" accept=".jpg, .jpeg, .png" multiple>
  </div>
  <div class="preview"></div>
  <div>
    <button>Submit</button>
  </div>
</form>

label, input, button {
  display: block;
  margin: 1em;
}
.preview span {
  position: relative;
  width: 100px;
  height: 150px;
  margin: 1em;
}
.preview span img {
  width: 100px;
  height: 150px;
}

const form = document.querySelector('form'),
      input = form.querySelector('input'),
      preview = document.querySelector('.preview');
const files_buffer = new DataTransfer();

form.addEventListener('submit', submit);
input.addEventListener('change', showPreview);
preview.addEventListener('click', removePicture);

function submit(e) {
  /* 
    zatrzymanie submit-a dla prezentacji 
    w wresji roboczej usuń ten kod
  */
  e.preventDefault();
  console.clear();
  for (let i=0; i<input.files.length; i++)
    console.log(i, input.files[i].name, input.files[i].type, input.files[i].size); 
}

function showPreview() {
  preview.innerHTML = '';
  files_buffer.items.clear();
  
  for (let i=0; i<input.files.length; i++) {
    const file = input.files[i];
    files_buffer.items.add(file);
    if (['image/jpeg', 'image/png'].includes(file.type)) {
      const span =  document.createElement('SPAN');
      const img = document.createElement('IMG');      
      img.src = URL.createObjectURL(file);
      img.id = i;
      span.appendChild(img);
      span.innerHTML += img.id; // dodane dla demonstracji ideksu
      preview.appendChild(span);      
    }
  }  
}

function removePicture(e) {
  if (e.target.nodeName == 'IMG') {
    files_buffer.items.remove(e.target.id);
    input.files = files_buffer.files;
    files_buffer.items.clear();
    preview.removeChild(e.target.closest('span'));
    showPreview();
  }  
}

P.S. 
- Remove a FileList item from a multiple "input:file"
- Using files from web applications