How to preview a file after uploading in a contact form?

Question

css

Good afternoon. I developed a site on modx, made a contact form with file attachments via formit . Everything is working. But I can not make a preview (thumbnail) like gmail for example be displayed after attaching the file.
Please tell me how to make the output of the uploaded file
here is a screen of the
form I made the form according to the instructions as on the site - link
here is the code

<div class="contact-form-modal">
    

                            <form action="" method="post"  id="contant-home" enctype="multipart/form-data">
                  <input type="hidden" name="workemail" value="" />
                                <div>
                    <span class="error"></span>
                                    <input type="text" class="form-control "  name="name" value="" placeholder="Ваше имя" required>
                                </div>
                                <div>
                    <span class="error"></span>
                                    <input type="email" class="form-control" placeholder="Email" name="email" value="" required>
                                </div>
                                <div>
                    <span class="error"></span>
                                    <input type="tel" class="form-control" name="phone" value="" placeholder="Контактный телефон" required>
                                </div>
                                                            <div class="comment-area">
                    <span class="error"></span>
                                    <textarea  rows="10" cols="100"  class="form-control" name="message" value="" maxlength="999" style="resize:none" placeholder="Текст заявки"></textarea>
                                </div>
  <input type="hidden" name="myform1" value="1">
                           
    <div class="control-group form-group">	
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload icon-form-load"></i> Прикрепить файл
</label>
<span class="error"></span>
<input type="file" class="load-form-home"  id="file-upload" name="upload">
 </div>
<div class="submit-area btn-tab-home">
<button type="submit" class="theme-btn-s2">Отправить</button>
 </div>
       
 </form></div>

here are the styles

/* модальное окно */
.icon-form-load {
    color: #c83226;
    font-size: 22px !important;
    vertical-align: bottom;
}
input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    }
#boxes .window {
    position:absolute;
    left:0;
    top:0px;
    -top: 40px;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding: 20px;
    overflow: hidden;
    }  
#boxes #dialog {
    width:375px; 
    height:auto;
    padding:10px;
    background-color:#ffffff;
    position: fixed;
    }  
.top {
     position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 42px;
    background: #545454;
    padding: 8px 20px 6px 10px;
    }
.close {
    float:right;
    }
.text-contact-modal-form p {
    color: black;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
}    
.link.close {
    float: right;
    text-align: right;
    color: white;
    opacity: 0.4 !important;
}
.contact-form-modal {
    padding-top: 10px;
}
.contact-form-modal div {
    padding-top: 10px;
}
/*конец модального окна*/