Uploding a profile picture in a React native Expo Application - node.js

Question

So, I have an expo application that the user can set his profile picture, but I'm having trouble to store the picture in my backend.
I'm using Node.js in the backend and i have 2 libraries which are fs-extra and path.
So When a user set his profile picture, what i get in the backend is this file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540motaa%252FNatureApp/ImagePicker/783259e0-e3b5-41ee-8fd7-e03fd54425a0.jpg
And i have tried to use a form to transfer the file but i couldn't get it to work so i stuck with this.
But now i don't know how to extract the picture so i can store it on my backend or even in my database.
This is the code i'm using to store the picture in a directory in the backend:
const { image } = req.body;
console.log(image);
const newPath = path.resolve(__dirname, "../PostImages") + "/" + "image.jpg";
await fs.move(image, newPath);
Frontend Code:
const image = result;
const data = new FormData();
data.append("profilePicture", {
name: "hello.jpg",
type: image.type,
uri:
Platform.OS === "android"
? image.uri
: image.uri.replace("file://", ""),
});
uploadUserImage({ data });
Request code:
const uploadUserImage = (dispatch) => {
return async ({ data }) => {
console.log(data);
const token = await AsyncStorage.getItem("token");
try {
await axios({
method: "post",
url: "http://localhost:5000/userImg",
headers: {
Authorization: `Bearer$${token}`,
"Content-Type": "multipart/form-data",
},
body: data,
});
} catch (err) {
console.log(err);
}
};
};

Answer 1

You can use multer which is great to save images on backend. If you are passing the form data you can use it, this is how you can add it:
<form action="/profile" method="post" enctype="multipart/form-data">
<input type="file" name="avatar" />
</form>
var express = require('express')
var multer = require('multer')
var upload = multer({ dest: 'uploads/' })
var app = express()
app.post('/profile', upload.single('nameofImage'), function (req, res, next) {
// req.file is the `avatar` file
// req.body will hold the text fields, if there were any
})
For more details, you can check here.

Answer 2

For React Native/Expo projects, to upload/send a file to the backend you need to create a formData and use it in the Body of the request, like this
const formData = new FormData();
formData.append('FileData', {
name: 'FileData.jpg',
uri: 'file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540motaa%252FNatureApp/ImagePicker/783259e0-e3b5-41ee-8fd7-e03fd54425a0.jpg',
type: 'image/jpg', // mime type of file
});
Now perform a request to the backend with this formData in the body
Request Code would be
const uploadUserImage = (dispatch) => {
return async ({ data }) => {
console.log(data);
const token = await AsyncStorage.getItem("token");
try {
await axios({
method: "post",
url: "http://localhost:5000/profile", // make sure URL is correct
headers: {
Authorization: `Bearer$${token}`,
"Content-Type": "multipart/form-data",
},
body: data,
});
} catch (err) {
console.log(err);
}
};
};
And in the backend access the file as shown below
var express = require('express')
var multer = require('multer')
const upload = multer({ storage: multer.memoryStorage() });
var app = express()
app.post('/profile', upload.single('FileData'), function (req, res, next) {
// access it with --> req.file
})