File doesn't always upload to server using PHP & Javascript -

i have page use have users press submit button insert mysql data capture image , upload .png file directory click of 1 submit button. 9/10 works perfectly. i'm not sure if it's connectivity issue (it's being done on wireless device) or if it's code. 1/10 times insert mysql data not upload image server. below upload code file , upload_data.php file code calls. sorry formatting on site isn't greatest.

 <script>         function uploadex() {             var canvas = document.getelementbyid("canvassignature");             var dataurl = canvas.todataurl("image/png");             document.getelementbyid('hidden_data').value = dataurl;             var fd = new formdata(document.forms["form"]);              var xhr = new xmlhttprequest();             xhr.open('post', '/inc/img/inspection/upload_data.php', true);              xhr.upload.onprogress = function(e) {                 if (e.lengthcomputable) {                     var percentcomplete = (e.loaded / e.total) * 100;                     console.log(percentcomplete + '% uploaded');                   //alert('succesfully uploaded');                 }             };              xhr.onload = function() {              };             xhr.send(fd);         };     </script>   below upload_data.php <?php $upload_dir = "upload/"; $img = $_post['hidden_data']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $id = $_post['sub_id']; $file = $upload_dir . $id . ".png"; $success = file_put_contents($file, $data); print $success ? $file : 'unable save file.'; ?> 

based on comment, not cancelling default submit event , cause form submitted. , cause ajax request not finish always.

if use inline javascript (i try move inline js script itself...), need make sure use like:

onsubmit="return uploadex();" 

and

onclick="return uploadex();" 

and in uploadex() function end with:

function uploadex() {   // code    return false; }