Как отменить загрузку файла с помощью JavaScript, но человек может отправить остальные поля формы в запросе Ajax

Я хочу отправить форму с некоторым полем, таким как имя, фамилия, сообщение, электронная почта и вложение файла с помощью Ajax.

В форме есть кнопка «Отмена», которая отменяет загрузку файла, но просто отменяет загрузку! Другими словами, если пользователь нажмет кнопку отправки после отмены, форма должна быть отправлена, но без вложенного файла. Или пользователь может выбрать другой файл, а затем отправить.

В моем коде есть две проблемы:

1. после нажатия на кнопку отмены, если я нажму второй раз, процесс загрузки начнется снова!
2. Кнопка отправить не работает!

Как мне решить эти проблемы (желательно без использования JQuery)?

Помогите мне, пожалуйста.

Код JavaScript:

var ContactForm = {
    xhr: new XMLHttpRequest(),
    aborted: false,
    form: document.querySelector("#contact-form"),
    attachment: document.querySelector("#Attachment"),
    progressArea: document.querySelector("#progress-area")

};

var myContactForm = ContactForm;

$(document).ready(function () {
    if (myContactForm.attachment) {

        myContactForm.form.addEventListener("submit",
            function (submitEvent) {
                submitEvent.preventDefault();
                //myContactForm = Object.create(ContactForm);
                const files = myContactForm.attachment.files;
                //const xhr = new XMLHttpRequest();
                myContactForm.xhr.open("POST", "/ContactUs/ContactUsForm/");
                const formData = new FormData(myContactForm.form);

                myContactForm.xhr.addEventListener("load",
                    function () {
                        console.log(myContactForm.xhr.responseText);
                    });


                const block = addProgressBlock(files[0]);

                myContactForm.xhr.upload.addEventListener("progress",
                    function (event) {
                        const progressDiv = block.querySelector(".progress-bar div");
                        const progressSpan = block.querySelector("span");
                        //progress.innerHTML = "progress" + event.loaded + " bytes sent.<br />";
                        if (event.lengthComputable) {
                            const percent = ((event.loaded / event.total) * 100).toFixed(1);
                            progressSpan.innerHTML = percent + "%";
                            progressDiv.style.width = percent + "%";

                            //let percent = parseInt((event.loaded / event.total) * 100);
                            //progress.innerHTML += "progress: " + percent + "% sent.";
                        }
                    });

                myContactForm.xhr.addEventListener("abort", function () {
                    myContactForm.xhr.onreadystatechange = null;
                    myContactForm.aborted = true;
                    myContactForm.attachment.files = null;
                    myContactForm.progressArea.innerHTML = null;
                });
                if (myContactForm.aborted) {

                    myContactForm.xhr = null;
                    myContactForm = null;
                    myContactForm = Object.create(ContactForm);
                    return false;
                }
                myContactForm.xhr.send(formData);


            });
    }


    var cancelUpload = document.querySelector("#cancelUpload");
    cancelUpload.addEventListener("click", function () {
        myContactForm.xhr.abort();
    });

});



function addProgressBlock(file) {

    const html = `<label>file: ${file.name}</label>
                    <div class="progress-bar">
                         <div class="progress-bar progress-bar-striped active" style="width: 0%;"></div>
                         <span>0%</span>
                    </div>`;
    const block = document.createElement("div");
    block.setAttribute("class", "progress-block");
    block.innerHTML = html;
    myContactForm.progressArea.appendChild(block);
    return block;
}

HTML-файл:

<form id="contact-form" asp-controller="ContactUs" asp-action="ContactUsForm" enctype="multipart/form-data" method="post">

   <div class="row">
      <div class="col-md-6">
       <div class="form-group">
         <label for="form_name">Firstname *</label>
             <input asp-for="@Model.FirstName" type="text" name="FirstName" maxlength="25" required class="form-control" placeholder="Please enter your firstname">
             <div class="help-block with-errors"></div>
        </div>
      </div>
   </div>

   <div class="col-md-12">
      <div class="form-group">
         <div id="upload-area">
            <label id="btnUploadAttachment" asp-for="@Model.Attachment" class="custom-file-upload">
               <i class="fa fa-cloud-upload"></i>Upload file
            </label>
            <input asp-for="@Model.Attachment" name="Attachment"
                                   type="file"
                                   class="form-control" />
            <button id="cancelUpload">cancel</button>
         </div>
         <div id="progress-area">
         </div>
      </div>
   </div>

   <div class="col-md-12">
      <input id="submitContactForm" type="submit" class="btn btn-success btn-send" value="Sendmessage">
   </div>

</form>