jQuery zdjęcia z podglądem + usuwanie

Hej. Chcę zrobić podgląd i usuwanie zdjęć dodanych/wybranych przez input.
Mam taki kod

$('#images').on('change', function (e) {
            if (this.files) {
                let filesAmount = this.files.length;
                for (i = 0; i < filesAmount; i++) {
                    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" class="remove-img button-remove-image">x</div><img src="' + event.target.result + '" style="width: 100%"></div>';
                        $(html).insertAfter('#imagesPreview');
                        const self = this;
                        $(".remove-img").click(function(){
                            $(this).parent(".single-image-preview").remove();
                        });
                    }
                    reader.readAsDataURL(this.files[i]);
                }
            }
        })

po wybraniu działa podgląd jednak po kliknięciu usuwania usuwa się przycisk a nie zdjęcie. Zdjęcie też musi się usunąć z input tak, aby nie zostało wysłane na serwer jeśli zostało usunięte

Przecież div zamykasz przed image source. Ten kawałek kodu więc zostanie.

Powiesz jak to powinno wyglądać?

Ok. Nie wiem jak masz zbudowaną stronę ale może wystarczy zamknąć diva za img source

let html = '<div class="single-image-preview" style="margin-bottom: 5px; position: relative!important;">
<button type="button" class="remove-img button-remove-image">x<img src="' + event.target.result + '" style="width: 100%"></div>';

Zobacz czy zadziała i w inspekcji w przeglądarce sprawdź czy wyrenderownay HTML nie ma błędów.
A i usuwaj poprzez kasę diva a nie przycisku.

Ogólnie fajnie, trzeba tylko dodać zamknięcie button przez img jednak jeśli np wybiorę 4 zdjęcia, usunę 2 i wyślę dane na serwer i tak są przekazywane 4. Jak usuwać plik również z input przed przesłaniem?

Pokaż kod dodający plik.

W sensie kod na serwer? Korzystam z lara. A w HTML input type file multiple images[] i formularz standardowy.
Sorry że tak na szybko, nie ma mnie przy kompie

Masz jakiś forumarz od strony frontu. W tym formularzu masz jakieś inputy i jego zawartość przesyłasz na serwer. Trzeba sprawdzić jak działa ten formularz. Czy jakieś inputy też generujesz dynamicznie itd.

Formularz w skrócie

<form method="post" action="{{ route('front.objects.create') }}" enctype="multipart/form-data">
    @csrf
    <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">{{ __('object.additional_images') }}</div>
            <small style="font-size: 12px; margin-top: 15px" id="gallery-info"
                   class="form-text text-muted">{{ __('object.additional_images_desc') }}</small>
        </label>
        <input style="display: none" id="images" type="file" name="images[]" accept="image/*"
               placeholder="{{ __('object.select_images') }}" multiple>
    </div>
    <div class="form-group">
        <button class="btn btn-outline-primary btn-sm">{{ __('object.send') }}</button>
    </div>
</form>

<script>
$('#images').on('change', function (e) {
            if (this.files) {
                let filesAmount = this.files.length;
                for (i = 0; i < filesAmount; i++) {
                    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" class="remove-img button-remove-image">x</button><img src="' + event.target.result + '" style="width: 100%"></div>';
                        $(html).insertAfter('#imagesPreview');
                        const self = this;
                        $(".remove-img").click(function(){
                            $(this).parent(".single-image-preview").remove();
                        });
                    }
                    reader.readAsDataURL(this.files[i]);
                }
            }
        })
</script>

Da się to jakoś ogarnąć?

Da się to jakoś ogarnąć?

Zrób console.log(this) i zobacz po czym iterujesz.

jak zrobię console.log tutaj

$('#images').on('change', function (e) {
            if (this.files) {
                console.log(this)

zwraca

<input id="images" type="file" name="images[]" accept="image/*" placeholder="Kliknij lub przeciągnij zdjęcia" multiple="multiple" style="display: none;">

Po czym iterujesz czyli co masz w pętli for jako this.

nie wiem czy dobrze rozumiem. Mam zrobić console.log w pętli for czyli tutaj?

$('#images').on('change', function (e) {
            if (this.files) {
                let filesAmount = this.files.length;
                for (let i = 0; i < filesAmount; i++) {
                    console.log(this)
                    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" class="remove-img button-remove-image">x</button><img src="' + event.target.result + '" style="width: 100%"></div>';
                        $(html).insertAfter('#imagesPreview');
                        const self = this;
                        $(".remove-img").click(function(e){
                            e.preventDefault();
                            $(this).parent().remove('');
                        });
                    }
                    reader.readAsDataURL(this.files[i]);
                }
            }
        })

Tobra to może inaczej.

let file = this.files[i];
Console.log(file);

zwraca

<input id="images" type="file" name="images[]" accept="image/*" placeholder="Kliknij lub przeciągnij zdjęcia" multiple="multiple" style="display: none;">

o to chodziło?