Q: PHP upload file with Ajax I'm trying to get working this PHP/Ajax uploader
Currently I'm able to upload files, but the JS dependencies for get the progress tracking and remain on the same page, doesn't work. Probably because I add other JS dependencies due to bootstrap engine. It seems that JS files for upload files are actually overrides or however not running any more.
HTML/JS
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <style>
            .card {
                /*  z-index: 0;*/ 
            }
            
            .card-container {
                display: flex;
                align-items: center;
                height: calc(100% - 110px);
                justify-content: center;
            }

            nav, footer{ z-index: 1}
        </style>
    </head>
    <body>
        <div class="card-container">
            <div class=" w-40 card ">
                <div class="card-header">
                    Dropbox 
                </div>
                <div class="card-body">
                    <form action="uploadFile.php" method="post" enctype="multipart/form-data">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <input type="submit" value="UPLOAD" name="submit" id="inputGroupFileAddon01" class="input-group-text">
                            </div>
                            <div class="custom-file">
                                <input type="file" name="files[]" class="custom-file-input" id="fileToUpload" aria-describedby="inputGroupFileAddon01">
                                <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                            </div>   
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                var status = $('.status');
                var percent = $('.percent');
                var bar = $('.bar');
                
                $('form').ajaxForm({
                    dataType:'json',
                    beforeSend: function() {
                        status.fadeOut();
                        bar.width('0%');
                        percent.html('0%');
                    },
                
                    /* progress bar call back*/
                    uploadProgress: function(event, position, total, percentComplete) {
                        var pVel = percentComplete + '%';
                        bar.width(pVel);
                        percent.html(pVel);
                    },
                
                    /* complete call back */
                    complete: function(data) {
                        data = $.parseJSON(data.responseText);
                        status.html(data.count + ' Files uploaded!').fadeIn();
                    }
                });
            });
        </script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.form.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    </body>
</html>

PHP
<?php 

$max_size = 100000000000;
$extensions = array('mp4', 'mp3', 'aac');
$dir = 'dropbox/';
$count = 0;

if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files']))
{
  // loop all files
  foreach ( $_FILES['files']['name'] as $i => $name )
  {
    // if file not uploaded then skip it
    if ( !is_uploaded_file($_FILES['files']['tmp_name'][$i]) )
      continue;

      // skip large files
    if ( $_FILES['files']['size'][$i] >= $max_size )
      continue;

    // skip unprotected files
    if( !in_array(pathinfo($name, PATHINFO_EXTENSION), $extensions) )
      continue;

    // now we can move uploaded files
      if( move_uploaded_file($_FILES["files"]["tmp_name"][$i], $dir . $name) )
        $count++;

  }

  echo json_encode(array('count' => $count));

}

?>

the js files that I add for this upload file form are:
link for jquery.js
link for jquery.form.js
script.js is already inside the html code above.
Seems maybe that jquery.js is in conflict with jquery-3.5.1slimminjs that I add for bootstrap.
Please note that im newer about js, every suggestion about how to harmonize and fix it would be appreciate
"WORKING" EXAMPLE HERE
