mpyazote

             <form accept-charset="utf-8" style="width:80%;max-width:400px;margin-top:-10px" class="upload-form" action="upload.php" method="post" enctype="multipart/form-data">
 <h1 style="color:#505050;text-align:center;font-size:28px">Upload Form</h1>
            <label for="files"><i class="fa-solid fa-folder-open fa-2x"></i>Select files ...</label>
            <input id="files" type="file" name="files[]" multiple>
            <div class="progress"></div>
            <button type="submit" style="background:#089606">Upload</button>
            <div class="result"></div> 
            <h3 style="text-align:center;color:#606060;font-weight:400">Developed by <a style="text-decoration:none" 
            href="https://zinatrend.com">Maslam Technologies</a></h3> 
         </form>    
                
<script>
const uploadForm = document.querySelector('.upload-form');
const filesInput = uploadForm.querySelector('#files');
filesInput.onchange = () => {
    uploadForm.querySelector('label').innerHTML = '';
    for (let i = 0; i < filesInput.files.length; i++) {
        uploadForm.querySelector('label').innerHTML += '<span><i class="fa-solid fa-file"></i>' + filesInput.files[i].name + '</span>';
    }};
uploadForm.onsubmit = event => {
    event.preventDefault();
    if (!filesInput.files.length) {
        uploadForm.querySelector('.result').innerHTML = 'Please select a file!';
    } else {
        let uploadFormDate = new FormData(uploadForm);
        let request = new XMLHttpRequest();
        request.open('POST', uploadForm.action);
        request.upload.addEventListener('progress', event => {
            uploadForm.querySelector('button').innerHTML = 'Uploading... ' + '(' + ((event.loaded/event.total)*100).toFixed(2) + '%)';
            uploadForm.querySelector('.progress').style.background = 'linear-gradient(to right, #25b350, #25b350 ' + Math.round((event.loaded/event.total)*100) + '%, #e6e8ec ' + Math.round((event.loaded/event.total)*100) + '%)';
         
            uploadForm.querySelector('button').disabled = true;
        });
        request.onreadystatechange = () => {
            if (request.readyState == 4 && request.status == 200) {
                 uploadForm.querySelector('.result').innerHTML = request.responseText;        
            if( request.responseText === "Upload Complete!"){ redirect();} else { refresh();}  }};
        request.send(uploadFormDate); }};
function redirect(){ setTimeout(myURL, 1000);}
function myURL(){ document.location.href = 'index.php'; }
function refresh(){ setTimeout(myURL2, 2000);}
function myURL2(){ document.location.href = 'new.php'; }
</script>