Perform JQuery Ajax request before performing Add To Cart

I would like to perform a file upload upon clicking the Add to cart button in the product detail page. How can I do this? I have a JQuery scripts that target a PHP script to process the uploaded file. So basically I was thinking that before Magento performs all Add to Cart process it will execute the file upload first and executing the PHP Script. After that if the response of the Ajax is success it will proceed with the add to cart process. I don’t know how to do this.

I was thinking of code like this

productAddToCartForm.submit = function() {      var canvas = jQuery('canvas.canvas');     var canvasImage = canvas[0].toDataURL("image/jpeg", 0.7);      jQuery.ajax({         type: "POST",         url: "/canvas-upload.php",         data: {            imgBase64: canvasImage         },         success: function(response)         {             jQuery('#hidden_field').val(response.path);             uploaded = true;         }     }); } 

So in this example after generating the uploaded file it will return the of the uploaded image. Now this path is being saved into a hidden field which in turn be submitted upon add to cart function. That way I can revisit or view the generated image. How can I achieve this