Click here to Skip to main content
15,941,973 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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'
CSS
.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

JavaScript
<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

PHP
<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
Posted
Updated 9-May-23 2:29am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900