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><!--
<div id="content_index">
<!--
<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>
<!--
<?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{ ?>
<!--
<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 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']){ ?>
<!--
<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 } ?>
<!--
<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>
<!--
<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']){ ?>
<!--
<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