I am just trying to upload one file (less than 5MB) to my own personal Google Drive from HTML2Canvas. I am new and trying to learn. The documentation is very confusing and has no example of a simple upload.

I have already set up the Google Drive API and tested it using the quickstart guide at https://developers.google.com/drive/api/v3/quickstart/js. This works perfectly, but it is not helpful for what I am trying to do.

Here are the basic steps of what I am trying to do:

1. (DONE) Generate image using HTML2Canvas.
2. (DONE) Save the image with a unique name to my website directory in a new folder.
3. (NOT DONE) Save the image to my personal google drive in a new folder.

Here is my CURRENT code that works through #2 (You can try out what I have so far at https://www.cardobot.com). I have no idea how to post to my google drive properly. I really need step-to-step help at this point.

JAVASCRIPT (This works exactly as intended)

    let ln_un = n_inp2.value() + n_inp1.value();

    //SEND CARD TO SERVER
    function saveCardtoServer() {
          html2canvas(document.getElementById("cardCritter"), {scale:4, backgroundColor:"#eafefc"}).then(function(canvas) {
          var dataURL = canvas.toDataURL("image/png");
              var user_Name = ln_un;
            $.ajax({
                    type: "POST", 
                    url: "savePNG.php", 
                    data: { img: dataURL, unm: user_Name }      
                  }).done(function(msg){ 
                    alert(msg); 
                    });
          });
    }

Below is savePNG.php (This works exactly as intended)

<?php
 
    $img = $_POST['img'];
    $unm = $_POST['unm'];
   
   if (strpos($img, 'data:image/png;base64') === 0) {
       
      $img = str_replace('data:image/png;base64,', '', $img);
      $img = str_replace(' ', '+', $img);
      $data = base64_decode($img);
      $path = "images/userCards/{$unm}/";
            if ( ! is_dir($path)) {
            mkdir($path);
            }   ;
      $file = ("images/userCards/{$unm}/".date(Ymdhis).$unm.'.png');
   
      if (file_put_contents($file, $data)) {
         echo "CARD SAVED!";
      } else {
         echo 'CARD NOT SAVED!';
      }   
     
   }
 
?>

NOW, how do I post the image to my personal Google drive using Google Drive API? I have tried posting the same way I posted the other image, and I have tried following EVERY guide and post I can find on StackOverflow and other websites, but nothing has worked.

I'm new at this, so I will really need some step-by-step help.

Thank you so much for any and all help!