confusion on how to manipulate html object

Question

I am trying to upload a html canvas to amazon s3 as a "image.png".

in this following code snippet, I think the first function takes a datastructure and gets the "image.img" out of it. This is what its supposed to do at least, and it works it's on a heroku example.

(function() {
  document.getElementById("file_input").onchange = function(){
    var files = document.getElementById("file_input").files;
    var file = files[0];
    if(!file){
      return alert("No file selected.");
    }
    getSignedRequest(file);
  };
})();


function getSignedRequest(file){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/sign_s3?file_name="+file.name+"&file_type="+file.type);
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
      if(xhr.status === 200){
        var response = JSON.parse(xhr.responseText);
        uploadFile(file, response.data, response.url);
      }
      else{
        alert("Could not get signed URL.");
      }
    }
  };
  xhr.send();
}

In my case in my javascript I do " canvas = document.getElementById('mycanvas') follwed by var picture = canvas.toDataURL('image/png'). When I call getSignedRequest, how can I pass in whatever the right thing is supposed to be? I initially thought getSignedRequest(picture) was enough, but then I saw upload canvas data to s3 , which makes me think I need to first turn it into blob data ( which still says return image/png) ? but in whichever case, im not sure how the file object being passed in is supposed to contain the name attribute. sure it has the type, that is unambiguous because of what i mentioned earlier, but what is the name supposed to be? how am I supposed to set it