Iam trying to send files to Firebase storage in my JS file (.png) it looks fine, but when I look into the repo, the file is a 9B (corrupted??). I read the Google doc many times, but I didn't realize what Iam doing wrong, please HELP.

My input on the html...

<input name="foto aluno" id="photo" type="file"/>

My JS:

document.getElementById('photo').addEventListener('change', handleFileSelect, false);

var handleFileSelect = function(e){
    e.stopPropagation();
    e.preventDefault();

    var file = e.target.files[0];
    var storageRef   = top.firebase.storage().ref();

    console.log(file);

    var metadata = {
        'contentType': file.type,
        'contentLength': file.size
    };

    storageRef.child('/imagem' + file.name).put(file, metadata).then(function(snapshot) {
        
        console.log('Uploaded', snapshot.totalBytes, 'bytes.');
        console.log('File metadata:', snapshot.metadata);

        snapshot.ref.getDownloadURL().then(function(url) {
          console.log('File available at', url);
         
        });
      }).catch(function(error) {
        console.error('Upload failed:', error);
    });
};

and finally, the result in firebase9B picture