Окно загрузки файла

Помогите У меня есть форма:

<form class="my-form" method="POST" enctype="multipart/form-data">
                <img src="/src/icons/cloud-upload-outline.svg" class="img-cloud">
                <h3 class="drop-zone-prompt">Перетащите PDF файл сюда</h3>
                <h3>или</h3>
                <div class="choice-file" id="personal-btn">
                    <input class="fileupload" type="button" value="Выберете файл" name="submit">
                </div>
                <input class="drop-zone-input" type="file" id="fileElem" name="files"  multiple onchange="Files(this)">
                <br>
                <h4>Максимальное количество страниц файла - 15</h4>
           </form>

Я к нему подключил XMHL API. У меня есть прогресс бар

<div class="progressbar">
            <img src="/src/icons/loader.svg" alt="">
            <h2>Загружаем файл</h2>
            <progress class="progressbar1" max="100" value="0"></progress>
        </div>

Как это работает, я жмакаю на кнопку Выбрать файл(pdf) и беру файл, файл помещается в форму, и после этого появляется форма прогресс бара как он загружает файл. Вопрос, как мне это сделать?