Preview new image dan reset image to default gagal.

Jadi gini, fungsi preview image sama reset image to default gagal ketika di halaman edit, tapi berhasil di halaman create.

Input image

<input type="hidden" class="account-file-input" name="oldImage" value="{{ $ds->image }}">
                        @if ($ds->image)
                        <img id="myImg" src="{{ url('/img/' . $ds->image) }}" class="img-preview img-fluid col-sm-7 py-4 d-block mx-auto">
                        @else
                        <img id="myImg" src="/img/default/default.jpg" class="img-preview img-fluid col-sm-7 py-4 d-block mx-auto">
                        @endif
                        <input class="form-control account-file-input @error('image') is-invalid @enderror" type="file" id="image" name="image" accept="image/*">
                        @error('image')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror

Reset buttton

<div class="d-flex justify-content-center">
                        <button type="button" class="btn btn-outline-danger account-image-reset">
                            <i class="bx bx-reset d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">Remove</span>
                        </button>
                    </div>

Script

document.addEventListener('DOMContentLoaded', function(e) {
    (function() {

        let accountUserImage = document.getElementById('myImg');
        const fileInput = document.querySelector('.account-file-input'),
            resetFileInput = document.querySelector('.account-image-reset');

        if (accountUserImage) {
            const resetImage = accountUserImage.src;
            fileInput.onchange = () => {
                if (fileInput.files[0]) {
                    accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
                }
            };
            resetFileInput.onclick = () => {
                fileInput.value = '';
                accountUserImage.src = resetImage;
            };
        }
    })();
});

javascript

@taraniskai13

16 Kontribusi 15 Poin

Diperbarui 1 tahun yang lalu

2 Jawaban:

<div>ane coba perbaiki bro:<br><br>Input image:<br><br></div><pre><input type="hidden" class="account-file-input" name="oldImage" value="{{ $ds->image }}"> @if ($ds->image) <img id="myImg" src="{{ url('/img/' . $ds->image) }}" class="img-preview img-fluid col-sm-7 py-4 d-block mx-auto"> @else <img id="myImg" src="/img/default/default.jpg" class="img-preview img-fluid col-sm-7 py-4 d-block mx-auto"> @endif <input class="form-control account-file-input @error('image') is-invalid @enderror" type="file" id="image" name="image" accept="image/*"> @error('image') <div class="invalid-feedback"> {{ $message }} </div> @enderror</pre><div><br>Reset button:<br><br></div><pre><div class="d-flex justify-content-center"> <button type="button" class="btn btn-outline-danger account-image-reset"> <i class="bx bx-reset d-block d-sm-none"></i> <span class="d-none d-sm-block">Remove</span> </button> </div></pre><div><br><br>Script:<br><br></div><pre>document.addEventListener('DOMContentLoaded', function(e) { (function() { let accountUserImage = document.getElementById('myImg'); const fileInput = document.querySelector('.account-file-input'), resetFileInput = document.querySelector('.account-image-reset');

    if (accountUserImage) {
        const resetImage = accountUserImage.src;
        fileInput.onchange = () =&amp;gt; {
            if (fileInput.files[0]) {
                accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
            }
        };
        resetFileInput.onclick = () =&amp;gt; {
            fileInput.value = &#039;&#039;;
            accountUserImage.src = resetImage;
        };
    }
})();

});</pre><div><br></div><div><br><br><br></div>

@adamajalah27

119 Kontribusi 40 Poin

Dipost 1 tahun yang lalu

Tanggapan

Btw, bedanya apa gan? Ane coba sama saja.

@taraniskai13

<div>Coba ganti <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded event</a> dengan <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event">load event</a>.</div><div>karena javascript code memerlukan image (default.jpg), sedangkan <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded event </a>di-trigger tanpa menunggu image dan stylesheet di-load.</div>

@soeleman

120 Kontribusi 147 Poin

Dipost 1 tahun yang lalu

Kelas Premium! Belajar Javascript untuk website

Preview new image dan reset image to default gagal.

Kelas Premium!
Belajar Javascript untuk website