Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

'Result from one function cannot be utilized in another function.'

The question has already been answered in this post: How do I return the response from an asynchronous call? with 41 answers. The query is regarding the issue in the 'addData' function where the result is always undefined. Two functions, 'convertToBase64' for converting files and 'addData' for sending the converted file have been provided. However, the converted result was undefined in the 'addData' function. The issue has been tried to be resolved using try...catch and async-await functions, but the solution couldn't be found. Below is the original code with unchanged format: 
async function convertToBase64(file) {
  const fileReader = new FileReader();
  fileReader.onload = () => {
    const srcData = fileReader.result;
    console.log('scrData: ', srcData);     // result is correct
    return srcData;
  };
  fileReader.readAsDataURL(file);
}

async function addData(values) {
  const converted = await convertToBase64(values.file);
  console.log(converted);       // result undefined
  await addDoc(collection(db, 'list'), {
    image: converted,
  });
}
Answers(2)
avatar
Vogi
a month ago
Verified Answer
I see that you are having trouble with the 'addData' function where the result is always undefined. The issue has been tried to be resolved using try...catch and async-await functions, but the solution couldn't be found. One possible reason for this issue could be that the 'convertToBase64' function does not return anything. It only logs the result in the console. Therefore, when you call this function in 'addData', it returns undefined. To fix this issue, you can modify your 'convertToBase64' function to return a Promise that resolves with the base64-encoded string of your file. Here's how you can do it: 
async function convertToBase64(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = () => {
      const srcData = fileReader.result;
      console.log('scrData: ', srcData);     // result is correct
      resolve(srcData);
    };
    fileReader.onerror = reject;
    fileReader.readAsDataURL(file);
  });
}

async function addData(values) {
  const converted = await convertToBase64(values.file);
  console.log(converted);       // result undefined
  await addDoc(collection(db, 'list'), {
    image: converted,
  });
}
This should fix your issue and allow you to use the base64-encoded string in your 'addData' function. I hope this helps! Let me know if you have any other questions.

Sources

7 Tips to Handle undefined in JavaScript - Dmitri Pavlutin BlogHow to fix async function which returns `undefined`?Can't use result of one function in other - Stack OverflowChart.js addData is undefined when using SignalR
avatar
Tolerim
a month ago
The issue with the code is that the convertToBase64 function is not returning anything explicitly. The onload event is triggered asynchronously when the file is read and hence the converted variable in the addData function is undefined when console.log is called. To fix this, you need to modify the convertToBase64 function to return a Promise which resolves with the Base64 encoded data. Here's an updated code that should work: 
async function convertToBase64(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = () => {
      resolve(fileReader.result);
    };
    fileReader.onerror = reject;
    fileReader.readAsDataURL(file);
  });
}

async function addData(values) {
  try {
    const converted = await convertToBase64(values.file);
    console.log(converted);
    await addDoc(collection(db, 'list'), {
      image: converted,
    });
  } catch (error) {
    console.log(error);
  }
}
In the updated code, convertToBase64 returns a Promise which resolves with the Base64 encoded data. The onerror event is also handled to reject the Promise if any error occurs. In the addData function, the converted variable is now assigned the resolved value of await convertToBase64(values.file) which should give the expected result. The code also includes a try-catch block to catch any errors that might occur during the function execution.
;