How to convert a callback into async/await
I had some code that used a callback. Without too many implementation details, here’s the gist of it:
const uploadFile = (callback) => {
//upload the file, then call the callback with the location of the file
callback(location)
}
uploadFile((location) => {
// go on
})
See? I call uploadFile
and when it finishes doing what it needs to do, it calls the callback function.
But was using async/await across all my file, so I decided to use async/await here too, instead of using the callback.
Here’s how I did it: I wrapped all the body of the uploadFile
function in a return new Promise()
call, and when I got the data I wanted to return, I called resolve()
:
const uploadFile = () => {
return new Promise((resolve, reject) => {
//upload the file, then call the callback with the location of the file
resolve(location)
})
}
const location = await uploadFile()
Now I could use the location
data in the first-level, instead of being it wrapped in the callback function.
It helps me keep the code cleaner and reason better about it.
If you are interested, here’s the full code of the actual function, so you can see this concept in a larger example:
const uploadFile = (fileName, id, callback) => {
const fileContent = fs.readFileSync(fileName)
const params = {
Bucket: process.env.AWS_BUCKET_NAME,
Key: `file.jpg`,
Body: fileContent
}
s3.upload(params, (err, data) => {
if (err) {
throw err
}
callback(data.Location)
})
}
uploadFile(files.logo.path, job.id, async (location) => {
await prisma.job.update({
where: { id: job.id },
data: {
logo: location
}
})
})
Here’s what I transformed it into:
const uploadFile = (fileName, id) => {
return new Promise((resolve, reject) => {
const fileContent = fs.readFileSync(fileName)
const params = {
Bucket: process.env.AWS_BUCKET_NAME,
Key: `job-${id}.jpg`,
Body: fileContent
}
s3.upload(params, (err, data) => {
if (err) {
reject(err)
}
resolve(data.Location)
})
})
}
handler.post(async (req, res) => {
const files = req.files
const body = req.body
const job = await prisma.job.create({
data: {
...body,
created_at: new Date().toISOString()
}
})
const location = await uploadFile(files.logo.path, job.id)
await prisma.job.update({
where: { id: job.id },
data: {
logo: location
}
})
res.redirect(`/jobs/${job.id}/payment`)
})
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025