perling/public/assets/js/backend/news/script_upload.js

// =============================== Upload Single Image js start here ================================================
const fileInput = document.getElementById("upload-file");
const imagePreview = document.getElementById("uploaded-img__preview");
const uploadedImgContainer = document.querySelector(".uploaded-img");
const removeButton = document.querySelector(".uploaded-img__remove");

fileInput.addEventListener("change", (e) => {
    if (e.target.files.length) {
        const src = URL.createObjectURL(e.target.files[0]);
        imagePreview.src = src;
        uploadedImgContainer.classList.remove("d-none");
    }
});
removeButton.addEventListener("click", () => {
    imagePreview.src = "";
    uploadedImgContainer.classList.add("d-none");
    fileInput.value = "";
});
// =============================== Upload Single Image js End here ================================================

// ================================================ Upload Multiple image js Start here ================================================
const fileInputMultiple = document.getElementById("upload-file-multiple");
const uploadedImgsContainer = document.querySelector(
    ".uploaded-imgs-container"
);

fileInputMultiple.addEventListener("change", (e) => {
    const files = e.target.files;

    Array.from(files).forEach((file) => {
        const src = URL.createObjectURL(file);

        const imgContainer = document.createElement("div");
        imgContainer.classList.add(
            "position-relative",
            "h-120-px",
            "w-120-px",
            "border",
            "input-form-light",
            "radius-8",
            "overflow-hidden",
            "border-dashed",
            "bg-neutral-50"
        );

        const removeButton = document.createElement("button");
        removeButton.type = "button";
        removeButton.classList.add(
            "uploaded-img__remove",
            "position-absolute",
            "top-0",
            "end-0",
            "z-1",
            "text-2xxl",
            "line-height-1",
            "me-8",
            "mt-8",
            "d-flex"
        );
        removeButton.innerHTML =
            "<iconify-icon icon='radix-icons:cross-2' class='text-xl text-danger-600'></iconify-icon>";

        const imagePreview = document.createElement("img");
        imagePreview.classList.add("w-100", "h-100", "object-fit-cover");
        imagePreview.src = src;

        imgContainer.appendChild(removeButton);
        imgContainer.appendChild(imagePreview);
        uploadedImgsContainer.appendChild(imgContainer);

        removeButton.addEventListener("click", () => {
            URL.revokeObjectURL(src);
            imgContainer.remove();
        });
    });

    // Clear the file input so the same file(s) can be uploaded again if needed
    fileInputMultiple.value = "";
});
// ================================================ Upload Multiple image js End here  ================================================

// ================================================ Upload image & show it\'s name js start  ================================================
document
    .getElementById("file-upload-name")
    .addEventListener("change", function (event) {
        var fileInput = event.target;
        var fileList = fileInput.files;
        var ul = document.getElementById("uploaded-img-names");

        // Add show-uploaded-img-name class to the ul element if not already added
        ul.classList.add("show-uploaded-img-name");

        // Append each uploaded file name as a list item with Font Awesome and Iconify icons
        for (var i = 0; i < fileList.length; i++) {
            var li = document.createElement("li");
            li.classList.add(
                "uploaded-image-name-list",
                "text-primary-600",
                "fw-semibold",
                "d-flex",
                "align-items-center",
                "gap-2"
            );

            // Create the Link Iconify icon element
            var iconifyIcon = document.createElement("iconify-icon");
            iconifyIcon.setAttribute("icon", "ph:link-break-light");
            iconifyIcon.classList.add("text-xl", "text-secondary-light");

            // Create the Cross Iconify icon element
            var crossIconifyIcon = document.createElement("iconify-icon");
            crossIconifyIcon.setAttribute("icon", "radix-icons:cross-2");
            crossIconifyIcon.classList.add(
                "remove-image",
                "text-xl",
                "text-secondary-light",
                "text-hover-danger-600"
            );

            // Add event listener to remove the image on click
            crossIconifyIcon.addEventListener(
                "click",
                (function (liToRemove) {
                    return function () {
                        ul.removeChild(liToRemove); // Remove the corresponding list item
                    };
                })(li)
            ); // Pass the current list item as a parameter to the closure

            // Append both icons to the list item
            li.appendChild(iconifyIcon);

            // Append the file name text to the list item
            li.appendChild(document.createTextNode(" " + fileList[i].name));

            li.appendChild(crossIconifyIcon);

            // Append the list item to the unordered list
            ul.appendChild(li);
        }
    });
// ================================================ Upload image & show it\'s name js end ================================================