Upload ProgressBar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>

</head>
<body>

<div class="container py-4">
        <style>
            .progress{
                position: relative;
                width:100%;
                height:30px;
                background-color: #c9cfc9;
            }
            .bar{
                background-color: #00ff00;
                width:0%;
                height:30px;
            }
            .percent{
                position: absolute;
                display:inline-block;
                color: #040608;
                font-size:20px;
            }
        </style>
        <form action="{{url('/store')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="file" name="image" class="form-control" required > 
                
                <br><br>
                <div class="progress">
                    <div class="bar"></div>
                    <div class="percent px-2"> 0% </div> 
                </div>
                <br><br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var bar = $(".bar");
            var percent = $(".percent");
            $('form').ajaxForm({
                beforeSend:function(){
                    var percentVal='0%';
                    bar.width(percentVal);
                    percent.html(percentVal);
                },
                uploadProgress:function(event, position, total, percentComplete){
                    var percentVal=percentComplete+'%';
                    bar.width(percentVal);
                    percent.html(percentVal);
                },
                complete:function(res){
                    console.log(res);
                    alert("File has been uploaded.");
                }
            });
        });
    </script>
    
</body>
</html>