file input image preview

preview-image.js

function previewImage() {
    const dropZone = document.getElementById("drop-zone");
    const fileInput = document.getElementById("file-input");
    const img = document.getElementById("preview-image");
    let p = document.getElementById("drop-text");

    if (fileInput) {
        fileInput.addEventListener("change", function () {
            const clickFile = this.files[0];
            if (clickFile) {
                img.style = "display:block;";
                if (p) {
                    p.style = "display: none";
                }
                const reader = new FileReader();
                reader.readAsDataURL(clickFile);
                reader.onloadend = function () {
                    let src = this.result;
                    img.src = src;
                    img.alt = clickFile.name;
                };
            }
        });
    }

    if (dropZone) {
        dropZone.addEventListener("click", () => fileInput.click());
        dropZone.addEventListener("dragover", (e) => {
            e.preventDefault();
        });
        dropZone.addEventListener("drop", (e) => {
            e.preventDefault();
            img.style = "display:block;";
            let file = e.dataTransfer.files[0];

            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = function () {
                e.preventDefault();
                p.style = "display: none";
                let src = this.result;
                img.src = src;
                img.alt = file.name;
            };
        });
    }
}

window.onload = previewImage;