Retrieve of promise from input file

Question

I have an HTML file with the following code:

<input type="File" id="myFile" name="filename" onchange="loadFile(this.files[0])">

And a javascript file with the following code:

const fileInput = document.getElementById('myFile');
    fileInput.onchange = () => {
      var allFolders = fileInput.files[0].text();
      console.log(allFolders);
    }

When I open my console log, I receive the message:

Promise { <state>: "pending" }

<state>: "fulfilled"

<value>: "{'1' : { '2' : { '3' : { 'a': {}, 'b' : {}, 'c' : {}}}}};"

I want to console log ONLY the value so that my console log returns

"{'1' : { '2' : { '3' : { 'a': {}, 'b' : {}, 'c' : {}}}}};"

but I am not sure how to retrieve it, given the structure of the code I have written. Does anyone know, using the simple code I already have functioning, what to add to make console.log(allFolders) return the value of the promise?

score -1 · Answer 1 · answered Apr 17 '22 at 21:08

fileInput.files[0].text();

this returns a Promise<string>. To get the value of a Promise, you need to await it, so prepend await. In order to use await, the function needs to be async, so you need to add the async keyword before the function parameters. It should end up looking like:

const fileInput = document.getElementById('myFile');
fileInput.onchange = async () => {
  var allFolders = await fileInput.files[0].text();
  console.log(allFolders);
}

thank you! This seems to have achieved what I was looking for! — hibiscushooligan, Apr 17 '22 at 21:21

Retrieve of promise from input file

1 Answers1