menambahkan CSS untuk type file

 <style>

/* Bungkus input file */

.custom-file {

    position: relative;

    display: inline-block;

    width: 100%;

    max-width: 400px;

}

/* Hilangkan tampilan default */

.custom-file input[type="file"] {

    position: absolute;

    left: 0;

    top: 0;

    opacity: 0;

    width: 100%;

    height: 100%;

    cursor: pointer;

}

/* Tombol custom */

.custom-file-label {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #f8f9fa;

    border: 1px solid #ced4da;

    border-radius: 8px;

    padding: 10px 15px;

    font-size: 14px;

    color: #495057;

    cursor: pointer;

    transition: all 0.2s ease-in-out;

}

/* Hover effect */

.custom-file-label:hover {

    background: #e9ecef;

    border-color: #adb5bd;

}

/* Nama file tampil */

.file-name {

    font-style: italic;

    color: #6c757d;

    margin-left: 10px;

    flex: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

</style>

<div class="custom-file">

    <label for="uploadFile" class="custom-file-label">

        Pilih File <span class="file-name">(*Max 2 MB)</span>

    </label>

    <input type="file" id="uploadFile" name="uploadFile" multiple>

</div>

<script>

document.getElementById("uploadFile").addEventListener("change", function() {

    const files = this.files;

    const maxSize = 2 * 1024 * 1024; // 2 MB

    let fileNames = [];

    for (let i = 0; i < files.length; i++) {

        if (files[i].size > maxSize) {

            alert("File " + files[i].name + " melebihi batas 2 MB!");

            this.value = "";

            document.querySelector(".file-name").textContent = "(*Max 2 MB)";

            return;

        }

        fileNames.push(files[i].name);

    }

    // tampilkan nama file

    document.querySelector(".file-name").textContent = fileNames.join(", ");

});

</script>