Upload image in react native and Express - node.js

Question

I use expo document picker to pick a file, and multer in the back end to save it into a folder.
When I send the image, I get a 200 status response but the image is not saved.
What have I been doing wrong ?
React native code :
const pickPicture = async () => {
let result = await DocumentPicker.getDocumentAsync({});
console.log(result.file);
console.log(result);
const data = new FormData();
data.append("avatar", {
uri: result.uri,
type: result.type,
name: result.fileName,
file: result.file,
});
axios
.post(
`http://localhost:8000/uploadAvatar`,
data,
{
withCredentials: true,
headers: {
"Content-Type": "multipart/form-data",
},
transformRequest: (infos, error) => {
return data;
},
}
)
.catch(function (error) {
console.log(error);
})
.then(function (res) {
console.log(res);
});
Node code :
const storage = multer.diskStorage({
destintion: (req, file, callback) => {
callback(null, "avatars")
},
filename: (req, file, callback) => {
callback(null, Date.now() = path.extname(file.originalname));
}
});
const upload = multer({storage: storage});
app.use("/uploadAvatar", upload.single("avatar"), (req, res) => {
res.status(200).json("Image enregistrée !")
})

Answer 1

Path of the image to upload result.file returned by DocumentPicker is a reference of the image to the device storage not actually image data.
It required to fetch raw image data as BLOB and upload BLOB data to the server.
let result = await DocumentPicker.getDocumentAsync({});
console.log(result.file);
console.log(result);
const imageData = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET",result.file, true);
xhr.send(null);
});
const data = new FormData();
data.append("avatar", {
uri: result.uri,
type: result.type,
name: result.fileName,
file: imageData,
});