Add progress bar to kleeja uploader script

See more:

Javascript

upload

I have to add a progress bar to kleeja upload script
I add the css code to show the progress bar in file 'tpl_index_body.php'

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #ddd;
}

i found many java codes but i don't know where i put these codes in the file 'tpl_index_body.php'

this is the code i used

<pre>const form = document.getElementById('upload-form');
const fileInput = document.getElementById('file-input');
const progressBar = document.getElementById('progress');

form.addEventListener('submit', e => {
  e.preventDefault();

  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.upload.onprogress = e => {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      progressBar.style.width = `${percentComplete}%`;
    }
  };
  xhr.send(formData);
});

this is the php file content

<pre><!-- Powered by kleeja -->
 
<div id="content_index">

    <!-- welcome -->
    <div class="jumbotron">
        <h5>  <?=$this->vars['lang']['WELCOME'] ?? '{lang.WELCOME}'?> <?php if($this->vars['user_is']){ ?>[ <?=$this->vars['username']?> ]<?php } ?></h5>
        <p><?=$this->vars['welcome_msg']?></p>
    </div>




    <!-- messages: error or info -->
    <?php if($this->vars['info']){ ?>
        <div class="card mb-5">
            <ul class="list-group list-group-flush">
                <?php foreach($this->vars["info"] as $key=>$value){ ?>
                    <?php if($value['message_type'] == "info"){ ?>
                        <li class="list-group-item">
                            <?=$value['message_content']?>
                        </li>
                    <?php }else{ ?>
                        <!-- error -->
                        <li class="list-group-item  list-group-item-danger">
                            <?=$this->vars['lang']['INFORMATION'] ?? '{lang.INFORMATION}'?> : <?=$value['message_content']?>
                        </li>
                    <?php } ?>
                <?php } ?>
            </ul>
        </div>
    <?php } ?>




    <!-- form upload -->
    <form id="uploader" action="<?=$this->vars['action']?>" method="post" enctype="multipart/form-data">


        <div class="card text-center">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#fileUpload" role="tab"><?=$this->vars['lang']['DOWNLOAD_F'] ?? '{lang.DOWNLOAD_F}'?></a>
                    </li>
                </ul>
            </div>
            <div class="card-body tab-content">

                <?php if($this->vars['config']['safe_code']){ ?>
                    <!-- verification code -->
                    <div class="safe_code card">
                        <div class="card-body">
                            <h4 class="card-title"><?=$this->vars['lang']['VERTY_CODE'] ?? '{lang.VERTY_CODE}'?></h4>
                            <h6 class="card-subtitle mb-2 text-muted"><?=$this->vars['lang']['NOTE_CODE'] ?? '{lang.NOTE_CODE}'?></h6>
                            <p class="card-text">
                                <img style="vertical-align:middle;" id="kleeja_img_captcha" src="<?=$this->vars['captcha_file_path']?>" alt="<?=$this->vars['lang']['REFRESH_CAPTCHA'] ?? '{lang.REFRESH_CAPTCHA}'?>" title="<?=$this->vars['lang']['REFRESH_CAPTCHA'] ?? '{lang.REFRESH_CAPTCHA}'?>" onclick="javascript:update_kleeja_captcha('<?=$this->vars['captcha_file_path']?>', 'kleeja_code_answer');" />
                                <input type="text" name="kleeja_code_answer" id="kleeja_code_answer" />
                            </p>
                        </div>
                    </div>
                <?php } ?>


                <!-- files upload  -->
                <div class="tab-pane active" id="fileUpload" role="tabpanel">

                    <?php foreach($this->vars["FILES_NUM_LOOP"] as $key=>$value){ ?>

                    <div class="input-group mb-2" style="<?=$value['show']?>" id="file-block-<?=$value['i']?>" onclick="document.getElementById('file<?=$value['i']?>').click();">
                        
                            <div class="btn btn-primary file-button-browse">
                                <img src="<?=$this->vars['STYLE_PATH']?>images/folder.png" width="20" height="20">
                                <?=$this->vars['lang']['OPEN'] ?? '{lang.OPEN}'?>
                            </div>
                        
                        <input type="file" name="file_<?=$value['i']?>_" id="file<?=$value['i']?>" data-number="<?=$value['i']?>" style="display:none">
                        <input type="text" id="file-text<?=$value['i']?>" disabled="disabled" placeholder="<?=$this->vars['lang']['NO_FILE_SELECTED'] ?? '{lang.NO_FILE_SELECTED}'?>" class="form-control">
                    </div>

                    <?php } ?>

                    <div>
                        <br>
                        <div class="agree text-muted"><small><?=$this->vars['terms_msg']?></small></div>
                        <input type="submit" id="submitr" name="submitr" value="<?=$this->vars['lang']['DOWNLOAD_F'] ?? '{lang.DOWNLOAD_F}'?>" class="btn btn-outline-primary">
                    </div>

                </div>
            </div>
        </div>

    </form>

    <!-- box loading -->
    <div id="loadbox" class="card">
        <div class="card-body">
            <?=$this->vars['lang']['WAIT_LOADING'] ?? '{lang.WAIT_LOADING}'?>
            <br>
            <img src="<?=$this->vars['STYLE_PATH']?>images/loading.gif" alt="<?=$this->vars['lang']['LOADING'] ?? '{lang.LOADING}'?>" />
        </div>
		
	
  </div>
  
  
  
  
  
    </div>
	<script>
	
const form = document.getElementById('form-data');
const fileInput = document.getElementById('file');
const progressBar = document.getElementById('progress');

form.addEventListener('submit', e => {
  e.preventDefault();

  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.upload.onprogress = e => {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      progressBar.style.width = `${percentComplete}%`;
    }
  };
  xhr.send(formData);
});
    
</script>
	




    <?php if($this->vars['show_online']){ ?>
        <!-- who's onLine -->
        <div class="card who-online">
            <div class="card-header">
                <?=$this->vars['lang']['NUMBER_ONLINE'] ?? '{lang.NUMBER_ONLINE}'?>: <?=$this->vars['current_online_users']?>
            </div>

            <?php if($this->vars['show_names']){ ?>
                <div class="card-body">
                <?php foreach($this->vars["show_names"] as $key=>$value){ ?>
                    <?=$value['name']?>
                <?php } ?>
                </div>
            <?php } ?>
        </div>
    <?php } ?>
</div>

i try many times but no results and i changed the code constants
the progress bar is shown but the progress percentage is missed

I ask if there's another modification to make
Thanks advance

What I have tried:

progress bar to upload files issue in kleeja script