Upload an input image taken from webapp into google drive with google script

Question

I found something similar here, but it seems a lot more complicated than what I need.

I am uploading an image to a webapp and I would like to save the image into google drive.

I am having troubles to pass the file in a readable format for DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(file); and I keep getting error. I do not know how to pass the file in the correct format.

HTML:

<input id = "output2" type="file" accept="image/*">
<script>
document.getElementById('output2').addEventListener('change', (e) => triggerF(e.target.files));

</script>


function triggerF(file) {

console.log("event triggered");
console.log(file.name);
google.script.run.withSuccessHandler(yourCallBack1).upload(file)}


function yourCallBack1() {
  console.log("callback called");
  }

GS:

function upload(e) {

const file = new Blob(e);
const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(file);
console.log("created file");

}

UPDATE: Tanaike's solution #2 works for me. Please check below.