Hello there people my people, sorry I'm a PHP newbie and could use some help!

I'm making an image from a canvas element which is being converted from BASE64 into a .PNG and sent to my WP uploads folder using AJAX and the following function in my functions.php:

function canvasUpload(){
    $uploads = wp_upload_dir();
    $img = $_POST['uploadImage'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = $uploads['path'].'/'. uniqid() . '.png';
    return; 
    $r = file_put_contents($file, $data);
    echo $r ? $file : 'Error saving file';
}

//AJAX CALL
$.ajax( {
    type: "POST",
    url: ajaxurl,
    data: {
        action: 'canvasUpload',
        uploadImage: data
    }
} ).done(function(o) {

});
});
});

I need to be able to get the URL of the image in my uploads folder after it's created, so I can use it in my template and access with Javascript. I'm assuming this is created from the $file variable, but I don't know how to echo it in my template.

Any help much appreciated!