javascript - Preupload file before submit

one text

I have a form submit for file upload, with all the name transformation, filesize check, file extension check, etc.

I want to know, if there's some way to preupload the file before the submit, because in the submit, the upload is made and sometimes, if I need to upload a big file like 500mb, with a fast internet connection can be made so easy, but with a slow internet like mobile wifi, the petition expires the timeout and it's cancelled.

My idea is to configure a preupload when the file is attached, with a loading bar and a X to cancel the preupload, and not let the user click the submit form until the file is completely preupload, then the submit only takes a few seconds, moving the file in the temporary folder to the upload location.

Can someone explain me what type of language I need to use, the functions or code I need to write, or maybe some guides I can follow? I have been looking for information but I didn't find something usefull.

Edit: upload form code. Now the submit is automatic when the user drops/attaches the files, but it doesn't matter to the real question.

<button type="submit" class="btn btn-primary btn-xs" id="add_file" name="add_file" form="upload-form" style="display:none;">Subir archivos</button>
<form action="info_order.php?order=<?php echo $order; ?>" id="upload-form" method="post" enctype="multipart/form-data">
    <?php if((strpos($_SERVER['HTTP_USER_AGENT'],'Windows'))||(strpos($_SERVER['HTTP_USER_AGENT'],'Macintosh'))){ ?>
        <div id="dropzone" class="drop-zone" style="display:none;">
            <span class="drop-zone__prompt">Haga click o arrastre los archivos que desea subir.</span>
            <input type="file" name="file-upload[]" style="display:none;" id="file-upload" class="drop-zone__input" multiple>
        </div>
    <?php } elseif((strpos($_SERVER['HTTP_USER_AGENT'],'Android'))||(strpos($_SERVER['HTTP_USER_AGENT'],'iPhone'))){ ?>
            <input type="file" name="file-upload[]" id="file-upload2" style="display:none;" onchange="document.getElementById('add_file').click()" multiple>
            <button type="button" class="btn btn-primary" onclick="document.getElementById('file-upload2').click()">Subir archivos</button>
            </input>
        <?php } ?>
    </form>

POST submit code:

if(isset($_POST['add_file'])) { $error_message = ''; $ok = 0; $nook = 0; $new_value = '';
        $array_ext = array('pdf','docx','doc','xlsx','xls','xlsb','jpg','jpeg','png','mp3','mp4','msg','txt','zw1','7z','zip','psd','skr');
        if($_POST['admin-upload'] == true){ $access_level = 1; } else { $access_level = 2; }
        $total_count = count($_FILES['file-upload']['name']);
        for($i=0;$i<$total_count;$i++) {
            $filename = $_FILES['file-upload']['name'][$i];
            $tmpFilePath = $_FILES['file-upload']['tmp_name'][$i];
            $filename = str_replace("'","",strtolower($filename)); $filename = $order.'_'.$filename;
            if($filename != ''){
                $ext = strtolower(substr( $filename, strrpos( $filename, '.' ) + 1 ) );
                if(in_array($ext, $array_ext)) {
                    $upload_path = 'uploads/orders';
                    if(is_writable($tmpFilePath)){
                        $search_file = $upload_path.'/'.$filename;
                        if(file_exists($search_file)){
                            for($i=2;$i<999;$i++) {
                                $filename_noext = basename($filename,'.'.$ext);
                                $new_search_file = $upload_path.'/'.$filename_noext.'('.$i.').'.$ext;
                                if(!file_exists($new_search_file)){ $filename = $filename_noext.'('.$i.').'.$ext; break; }
                            }
                            $search_file = $new_search_file;
                        }
                        if(($info_order['Archivos adjuntos'] == "")&&($new_value == '')){ $new_value = $filename.'??'.$access_level; } elseif(($info_order['Archivos adjuntos'] != "")&&($new_value == '')){ $new_value = $info_order['Archivos adjuntos'].'?�'.$filename.'??'.$access_level; } else { $new_value .= '?�'.$filename.'??'.$access_level; }
                        $update_date = strftime("%Y-%m-%d %H:%M:%S"); $tracking_date = strftime("%d/%m/%Y - %H:%M");
                        $newtrack = '#'.'<b>'.$tracking_date.'</b><br/>El usuario '.$name_user.' ha subido el fichero '.$filename.'.'; $tracking .= $newtrack;
                        $sql = "UPDATE `ordenes` SET `Archivos adjuntos` = '{$new_value}', `Fecha ??ltima modificaci??n` = '{$update_date}', `Tracking` = '{$tracking}' WHERE `N?? orden` = '{$order}'";
                        if($db->query($sql)){
                            if(move_uploaded_file($tmpFilePath,$search_file)){
                                unset($tmpFilePath);
                                $error_message .= '<br/><li>El fichero '.$filename.' se ha subido correctamente.</li>'; $ok++;
                            } else {
                                $error_message .= '<br/><li>El fichero '.$filename.' no se pudo subir al directorio correctamente.</li>'; $nook++;
                            }
                        } else {
                            $error_message .= '<br/><li>El fichero '.$filename.' no se pudo agregar a la base de datos correctamente.</li>'; $nook++;
                        }
                    } else {
                        $error_message .= '<br/><li>El fichero no se puede subir porque no tiene permisos de escritura.</li>'; $nook++;
                    }
                } else {
                    $error_message .= '<br/><li>El fichero '.$filename.' no se puede subir porque la extensi??n no est?? permitida.</li>'; $nook++;
                }
            } else {
                $error_message .= '<br/><li>El fichero no se puede subir porque no tiene nombre.</li>'; $nook++;
            }
        }
        if($nook == 0){ $session->msg('s',$error_message); } elseif($ok == 0){ $session->msg('d',$error_message); } else { $session->msg('w',$error_message); }
        redirect('info_order.php?order='.$order);
    }

php.ini configuration