Превью файла после загрузки в контактной форме как сделать?

Question

[AlexandraSvetik]

Добрый день. Разрабатывала сайта на modx, сделала контактную форму со вложением файлов через formit . Все работает. Но не могу сделать чтобы после прикрепления файла выводилось превью (миниатюра) как gmail к примеру.
Прошу подсказать как сделать вывод загружаемого файла
вот скрин формы
Форму делала по инструкции как на сайте - ссылка
вот код

<div class="contact-form-modal">
	  [[!FormIt?
    &hooks=`spam,email,redirect`
   &submitVar=`myform1`
   &emailTpl=`email-tpl`
   &emailTo=`почта`
   &clearFieldsOnSuccess=`1`
   &emailSubject=`Письмо с сайта [[++site_url]]`
   &validate=`workemail:blank,name:required,email:email:required,message:required:stripTags,phone:required`
   &successMessage=`<div class="text-contact-form"><p>Спасибо, Ваше обращение отправлено.</p></div>`
]]
[[!+fi.successMessage:default=``]]
                            <form action="[[~[[*id]]]]" method="post"  id="contant-home" enctype="multipart/form-data">
							    <input type="hidden" name="workemail" value="" />
                                <div>
								    <span class="error">[[!+fi.error.name]]</span>
                                    <input type="text" class="form-control "  name="name" value="[[+fi.name]]" placeholder="Ваше имя" required>
                                </div>
                                <div>
								    <span class="error">[[!+fi.error.email]]</span>
                                    <input type="email" class="form-control" placeholder="Email" name="email" value="[[+fi.email]]" required>
                                </div>
                                <div>
								    <span class="error">[[!+fi.error.phone]]</span>
                                    <input type="tel" class="form-control" name="phone" value="[[+fi.phone]]" placeholder="Контактный телефон" required>
                                </div>
                                                            <div class="comment-area">
								    <span class="error">[[!+fi.error.message]]</span>
                                    <textarea  rows="10" cols="100"  class="form-control" name="message" value="[[+fi.message]]" 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">[[!+fi.error.upload]]</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>

вот стили

/* модальное окно */
.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;
}
/*конец модального окна*/