Флажок ввода формы и тип файла не работают

let blogs = []

function addBlog(event) {
    event.preventDefault()

    let inputName = document.getElementById("inputProjectName").value
    let inputContent = document.getElementById("inputDescription").value
    let inputImage = document.getElementById("inputImage")

    const projectDate = {

        startDate: document.getElementById("inputStartDate").value,
        endDate: document.getElementById("inputEndDate").value
    }

    image = URL.createObjectURL(image.files[0])

    let cardIcons = {
        html: document.querySelector('input[name = "checkHtml"]').checked,
        css: document.querySelector('input[name = "checkCss"]').checked,
        nodeJs: document.querySelector('input[name = "checkNode"]').checked,
        reactJs: document.querySelector('input[name = "checkReact"]').checked
    }

    let blog = {
        title: inputName,
        date: projectDate,
        content: inputContent,
        icons: cardIcons,
        image: inputImage
    }

    blogs.push(blog)

    console.table(blogs)
}

/* FORM */

.mpi-title {
    width: 100%;
    margin: 50px 0px;
    font-size: 30px;
    text-align: center;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
}

.mpi-form-container {
    display: flex;
    justify-content: center;
}

.mpi-form {
    width: 540px;
    display: flex;
    justify-content: center;
}

.mpi-form label {
    font-size: 25px;
    font-weight: bold;
}

.mpi-form .mpi-name input,
.mpi-date input {
    width: 100%;
    height: 50px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.mpi-date {
    flex-grow: 1;
    display: flex;
    gap: 10px;
}

.mpi-date .date-start {
    flex: 50%;
}

.mpi-date .date-end {
    flex: 50%;
}

[type = "date"]::-webkit-datetime-edit {
    opacity: 0;
}

[type = "date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
}

.mpi-desc textarea {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    border-radius: 8px;
    height: 200px;
}

.mpi-check {
    display: flex;
    gap: 120px;
    margin: 20px 0px;
}

.mpi-check label {
    font-size: 20px;
}

.check-left {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-right {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-label {
    display: block;
    position: relative;
    padding-left: 35px;
    color: #514a4a;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.check-label:hover input~.checkmark {
    background-color: #ccc;
}

.check-label input:checked~.checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-label input:checked~.checkmark:after {
    display: block;
}

.check-label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mpi-image {
    overflow: hidden;
    height: 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 20px;
    background: #f4f3f3;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    cursor: pointer;
    padding-right: 8px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}

.mpi-image label {
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mpi-choose {
    margin-top: -2px;
    border-radius: 8px;
    align-items: center;
    padding: 13px 10px 13px 10px;
    background-color: #e4e4e4;
    color: #b2abab;
}

.mpi-attach {
    padding-right: 10px;
}

.mpi-submit button {
    margin-top: 30px;
    float: right;
    padding: 10px 30px;
    border: none;
    border-radius: 25px;
    background-color: var(--btn);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 110px;
}

.mpi-submit button:hover {
    background-color: var(--btn-hover)
}


/* x FORM */

        <div class = "mpi-form">
            <!--MP = My Project Input-->
            <form onsubmit = "addBlog(event)">
                <div class = "mpi-name">
                    <label for = "inputProjectName">Project Name</label>
                    <input type = "text" id = "inputProjectName">
                </div>
                <div class = "mpi-date">
                    <div class = "date-start">
                        <label for = "inputStartDate">Start Date</label>
                        <input type = "date" id = "inputStartDate">
                    </div>
                    <div class = "date-end">
                        <label for = "inputEndDate">End Date</label>
                        <input type = "date" id = "inputEndDate">
                    </div>
                </div>
                <div class = "mpi-desc">
                    <label for = "inputDescription">Description</label>
                    <textarea name = "inputDescription" id = "inputDescription"></textarea>
                </div>
                <div class = "mpi-check-cont">
                    <label for = "checkTitle">Technologies</label>
                    <div class = "mpi-check">
                        <div class = "check-left">
                            <div>
                                <label for = "checkHtml" class = "check-label">HTML
                                    <input type = "checkbox" id = "checkHtml" name = "checkHtml"check>
                                    <span class = "checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label for = "checkNode" class = "check-label">Node Js
                                    <input type = "checkbox" id = "checkNode" name = "checkNode">
                                    <span class = "checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class = "check-right">
                            <div>
                                <label for = "checkCss" class = "check-label">CSS
                                    <input type = "checkbox" id = "checkCss" name = "checkCss">
                                    <span class = "checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label for = "reactJs" class = "check-label">React Js
                                    <input type = "checkbox" id = "checkReact" name = "checkReact">
                                    <span class = "checkmark"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <label>Upload Image</label>
                    <div class = "mpi-image">
                        <label for = "input-blog-image">
                    <div class = "mpi-choose">Choose</div>
                    <div class = "mpi-attach"><i class = "fa-solid fa-paperclip"></i></div>
                    </label>
                        <input type = "file" id = "inputImage" hidden />
                    </div>
                </div>
                <div class = "mpi-submit">
                    <button type = "submit">Submit</button>
                </div>
            </form>