Upload an image with reactjs and mongodb - reactjs

Question

I'm trying to make an image uploader, thanks to a form, in reactjs.
I've created an api in mongodb (thanks to express, mongoose, etc.), and i'm trying to use it in order to upload an image.
Actually, i would like to send an image file to the cloud (with Cloudinary), and get the url.
That is my form and methods :
class Header extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
data: [],
uploading: false,
image: [],
apiKey: 'xxx'
};
}
onChangeImage = e => {
this.setState({[e.target.name]: Array.from(e.target.files)});
};
sendImage = files => {
const formData = new FormData();
files.forEach((file, i) => {
formData.append(i, file)
});
fetch('http://localhost:3000/image-upload', {
method: 'POST',
headers : new Headers({
'Content-Type' : 'application/x-www-form-urlencoded',
'x-access-token' : this.state.apiKey
}),
body: formData
})
.then(res => res.json())
.then(image => {
this.setState({
uploading: false,
image
});
return true;
});
return false;
};
handleSubmit = (event) => {
event.preventDefault();
const { image } = this.state;
this.sendImage(image);
};
render() {
return(
<form onSubmit={this.handleSubmit} className="formAdd">
<input type='file' id="image" name="image" onChange={this.onChangeImage} />
<button className="contact-form-btn">
Send<i className="fa fa-long-arrow-right" aria-hidden="true"></i>
</button>
</form>
)
}
About my API Controller :
const cloudinary = require('cloudinary');
module.exports = {
create: function(req, res) {
cloudinary.config({
cloud_name: 'xxxx',
api_key: 'xxxxx',
api_secret: 'xxxxx'
});
const path = Object.values(Object.values(req.body.files)[0])[0].path;
cloudinary.uploader.upload(path)
.then(image => res.json([image]));
},
};
The error code that I get is 500 'TypeError: Cannot convert undefined or null to object'.
Indeed, it not found Object.values(Object.values(req.body.files)[0])[0].path.
What I've missed ?
Thanks.

Answer 1

You can use this to upload an image. Using async/await.
async uploadImage(image) {
const form = new FormData();
form.append('file', image);
form.append('upload_preset', 'g5ziunzg');
const res = await Axios.post('YOUR_CLOUDINARY_URL', form)
console.log(res)
return res.data;
}
This will return an object with the secure_url which you can store in your mongo database. I am assuming you have a backend-api for this task.
Inside your formSubmit function, you can first call this function and receive this secure_url.
Note that I am using axios here. This example can easily be translated to work with fetch.

Answer 2

You don't need to use Object.value since req.body.files is an array and you need to check its length before access. Try it:
const [file] = req.body.files
if (file) {
// your logic here
}