1

I am trying to read a CSV file using FileReader.readAsText() in JavaScript. But I am not able to get the value synchronously. I tried multiple approaches. But none is working. Below is the code I have so far:

1st Approach:

<input
id = "inputfile"
type = "file"
name = "inputfile"
onChange = {uploadFile} >
    const uploadFile = (event: React.ChangeEvent < HTMLInputElement > ) => {
        let resultSyncOutput = '';

        connst files = event?.target.files;

        if (files && files.length > 0) {
            readAsTextCust(files[0]).then(resultStr => {
                resultSyncOutput = resultStr;
            });
        }
      
      // At this line I am not able to get the value of resultSyncOutput with the content of file sychronously
      
      //Do something with the result of reading file.
      someMethod(resultSyncOutput);
    }

async function readAsTextCust(file) {
    let resultStr = await new Promise((resolve) => {
        let fileReader = new FileReader();
        fileReader.onload = (e) => resolve(fileReader.result);
        fileReader.readAsText(file);
    });

    console.log(resultStr);

    return resultStr;
}

This is the first approach I tried ie, using async/await. I also tried to do it without aysnc/await and still was not able to succeed. It is critical for this operation to be synchronous.

NB: I checked a lot of answers in Stack Overflow and none provides a solution to this problem. So please do not mark this as duplicate. Answer to this particualr question is not provided anywhere

tech user
  • 33
  • 7
  • 1
    If you have checked a lot of answers on SO, did you not notice any of them saying you can't make an async method sync.. – Keith May 13 '21 at 06:18
  • Why don't you move `someMethod(resultSyncOutput);` to be *inside* the `.then` callback few lines above? Why does it need to be outside? – VLAZ May 13 '21 at 06:23
  • @Keith Thanks for helping. But no that will no answer mine – tech user May 13 '21 at 06:30
  • 1
    "*Answer to this particualr question is not provided anywhere*" well yes. Because the other questions use different variable names and might make different calls. But the general approach is exactly the same. Your code matches the 5th code block [of this question](https://stackoverflow.com/q/23667086/). `myPromise` = `readAsTextCust(files[0])`, `outerScopeVar` = `resultSyncOutput`, and `console.log` = `someMethod`. The structure is *exactly* the same as yours. And you've not really explained why you want it "synchronous", either. Why not move `someMethod(resultSyncOutput)`? – VLAZ May 13 '21 at 06:59
  • @VLAZ I read that but still could not find a solution for me. I am new to JavaScript. I want this synchronously because after getting this one i need to run an another code to execute and by the way dependent code is written its really hard if i read file asynchronously i need to change a lot of code – tech user May 13 '21 at 10:01
  • 1
    Then use `resultSyncOutput = await readAsTextCust(files[0]);` and make the function `async`. You're trying to fit a square peg in a round hole just because you prefer oval shapes. If the issue is that the code is hard to read *then address that*. Don't ask for something that cannot happen. There is a plethora of ways to make async code work and look easier and better. You did not ask for that but seems that's your goal. – VLAZ May 13 '21 at 10:16
  • There is a solution to your problem in the links provided, but the solution doesn't involve making async code sync, because it can't be done, no point in saying that isn't a solution for me as no other solution is going to appear. I know your new to JavaScript, and async stuff can seem daunting at first, but it will get easier, and with async/await it's easier now than it's ever been. You may even find you don't have to change as much code as you think. – Keith May 13 '21 at 10:41

0 Answers0