How to use async function with mutation and image upload react js - reactjs

Question

I have to upload images in the directory and save that name into a database using graphql resolver. When I upload an image and pass that image in resolver but I am getting an undefined value of image name. So how can I get the image name?
In the Below code, I saved information with file upload but a problem to get a file name after uploading an image. So how can I get the file uploaded file name?
const fs = require("fs");
function ProfileImage(argsprofilephoto) {
try {
argsprofilephoto.then(profilephoto => {
const {
createReadStream,
filename,
mimetype
} = profilephoto;
const fileStream = createReadStream();
fileStream.pipe(fs.createWriteStream(`./uploadedFiles/${filename}`));
console.log("filename=", filename);
return filename;
});
} catch (err) {
console.log(err);
}
}
export default {
Mutation: {
signUp: async (parent, args, {
models,
secret
}) => {
try {
let profimgnm = "";
let docimgnm = "";
// Prfile Photo Upload
if (args.profilephoto != "") {
profimgnm = ProfileImage(args.profilephoto);
console.log("profimgnm=", profimgnm);
}
if (args.documents != "") {
docimgnm = ProfileImage(args.documents);
console.log("docimgnm=", docimgnm);
}
let name = args.name;
let email = args.email;
let phone = args.phone;
let address = args.address;
let zipcode = args.zipcode;
let profilephoto = profimgnm;
let documents = docimgnm;
const user = await models.User.create({
name,
email,
phone,
address,
zipcode,
profilephoto,
documents
});
return user;
} catch (err) {}
}
}
};
I am getting this output.
profimgnm= undefined
docimgnm= undefined
filename= download.jpg
filename= dimg.jpg
Anyone, please give me a solution.

Answer 1

There are a few issues here. You are not returning the promise from ProfileImage async method. You should be doing something like:
function ProfileImage(argsprofilephoto) {
return argsprofilephoto.then(profilephoto => {
const {
createReadStream,
filename,
mimetype
} = profilephoto;
const fileStream = createReadStream();
fileStream.pipe(fs.createWriteStream(`./uploadedFiles/${filename}`));
console.log("filename=", filename);
return filename;
}).catch(e => {
// you might want to return some sensible default depending on your usecase, or let the error bubble up by not catching
console.log(e)
});
}
and in your resolver you need to wait for the promise to resolve:
if (args.profilephoto != "") {
// could still be undefined if the promise above failed on catch block returned nothing, but you get the idea
profimgnm = await ProfileImage(args.profilephoto);
console.log("profimgnm=", profimgnm);
}
if (args.documents != "") {
docimgnm = await ProfileImage(args.documents);
console.log("docimgnm=", docimgnm);
}