Error: 'invalid argument' when trying to upload a file to firebase storage

I am getting the following error while trying to upload an image to firebase storage:

v {code_: "storage/invalid-argument", message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.", serverResponse_: null, name_: "FirebaseError"}
name: (...)
code: (...)
message: (...)
serverResponse: (...)
code_: "storage/invalid-argument"
message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File."
serverResponse_: null
name_: "FirebaseError"
__proto__: Object

Here is my code

<div><h1>Upload file</h1><label class="upload-group"><input type="file" onchange="handleFileSelect(this)" id="file"></label><button type="button" id="uploadButton" onclick="uploadFile()">Submit</button></div>

function handleFileSelect() {
  $(".upload-group").show();
  return document.getElementById('file').files[0];
};


function uploadFile() {
  var filename = handleFileSelect().name;
  var storageRef = firebase.storage().ref('/dogImages/' + filename);
  var uploadTask = storageRef.put(selectedFile);

I have been trying for several hours to upload an image to firebase storage but, it has been unsuccessful. I postulate that the problem might be due to my imports or my storage.rules file. Initially I had problems with the variables then with the storage function I had forgotten to include the firebase-storage.js file, then missing a bucket and after adding the bucket and the rules at the storage i came up with this one.