How can I make a javascript function run before submit?

See more:

Javascript

PHP

i'm working on an app that selects a file from client and then upload it to the server and pass his Name parameter to another javascript function but the problem is that i need to do this using only a one button so i tried to create a html post form containing a File input and a one button for selecting the file as the first step and upload it and pass the file name to another function so this is

What I have tried:

<form action="scripts\upload.php" onsubmit="return myFunction()" method="post" enctype="multipart/form-data">
          <input id="file" name="uploadedFile" style="display:none;"type="file" accept="image/*" capture="camera">
          <div class="row justify-content-center">
          <button type="submit" id="submit" onclick="document.getElementById('.$fstring.').click();" class="btn wbtn border rounded-pill" style="font-family:Hana; font-size:32px;">
            <img src="style\image\camera.png" width="64" /> تصوير النمودج 
          </button> 
          </div>
          </form>

so as you see clearly this is a normal post form with a submit button so after changing the button type to (submit) it opens a popup to select the file and in the same time it redirect to the form action url. so itried to use onSubmit

function myFunction(){

  document.getElementById('file').click();

  console.log('working 1');
  if(!document.getElementById("file").files.length == 0) {

  console.log('working 2');
  }
}

there is a problem with this function that is all the code even the if statmeant works onsubmited in the same time not one by one

upload.php :-

<?php 
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedFile']['tmp_name']); 
if(move_uploaded_file($_FILES['uploadedFile']['tmp_name'], $target_path)) {
    echo "جاري إضافة الملف  ".  basename( $_FILES['uploadedFile']['name']). 
    " إلى جدول ملف إكسل";
   echo "<script>document.write(readfile(\"".$target_path."\"));</script>";
   $stringpath= $target_path; //PASSING NAME PARAM
    // how can i pass the Name to prepare.php
    printf($stringPath);
} else{
    echo "There was an error uploading the file, please try again!";
}
?>

prepare.php

<script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
<script type="text/javascript">
function readfile(stringpath) {
Tesseract.recognize(
        stringpath,
        'ara',
  { logger: m => console.log(m) }
).then(({ data: { text } }) => {
}
})  
  };
</script>