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