ReactJS upload file to Express backend undefined - node.js

Question

I am trying to upload a profilePhoto from reactjs to express backend using FormData:
const form = new FormData();
form.append(user, "user");
form.append(profilePhoto, "profilePhoto");
axios({
method: "post",
url: "http://localhost:8082/candidate/addCandidate",
data: form,
headers: { "Content-Type": "multipart/form-data" },
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});
in the backend : (this works well with the postman and the image gets added to the backend)
const DIR = "./public/";
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, DIR);
},
filename: (req, file, cb) => {
const fileName = file.originalname.toLowerCase().split(" ").join("-");
cb(null, uuid() + "-" + fileName);
},
});
var upload = multer({
storage: storage,
fileFilter: (req, file, cb) => {
if (
file.mimetype === "image/png" ||
file.mimetype === "image/jpg" ||
file.mimetype === "image/jpeg"
) {
cb(null, true);
} else {
cb(null, false);
return cb(new Error("Only .png, .jpg and .jpeg format allowed!"));
}
},
});
router.post(
"/addCandidate",
upload.single("profilePhoto"),
(req, res, next) => {
const url = req.protocol + "://" + req.get("host");
// try {
const candidate = new Candidate({
user: req.body.user,
profilePhoto: url + "/public/" + req.file,
});
candidate
.save()
.then((result) => {
console.log("bbbbbbbbbbbb", req);
res.status(201).json({
message: "User registered successfully!",
profilePhoto: result.profilePhoto,
});
})
.catch((err) => {
console.log("aaaaaaaaaaaa", req.body.file);
res.status(500).json({ error: err });
console.log(err);
});
}
);
however, when ever i try to upload a file it doesnt get uploaded to the backend and i get req.file undefined. I tried to console the req and this is what i get body:
{'606aee02f057cd714db2b646': 'user', '[object File]': 'profilePhoto'}
Any help!

Answer 1

I use something like this, you can change it for your project
My component:
import React from "react";
import ConfigX from '../ConfigX'
class FileUploader extends React.Component
{
url_upload = "";
url_download = "";
apiKey = "";
typ = "news";
typ_id = 99999;
constructor(props)
{
super(props)
this.state = {
view: "list",
title: "wybierz plik",
files: [],
uploadProcentAll: 10,
}
this.url_upload = ConfigX.restApi + "/rest,file_upload";
this.url_download = ConfigX.restApi + "/rest,file_list";
this.url_delete = ConfigX.restApi + "/rest,file_delete";
this.apiKey = this.props.apiKey;
this.typ = this.props.typ;
this.typ_id = this.props.typ_id;
}
/**
* Get actual list of file uploaded to server
*/
componentDidMount()
{
var dataPost = {
};
fetch( this.url_download , {
method: 'POST',
body: JSON.stringify(dataPost),
headers: {
'Content-Type': 'text/html',
'X-API-KEY': this.apiKey
}
})
.then( res => res.json() )
.then(json => {
// this.setState({
// files: json
// });
});
}
onChangeInput(event)
{
var handle = event.target;
console.log("FileUploader, selected: " + handle.files.length );
if( handle.files.length == 0) return false;
for(var i = 0; i < handle.files.length; i++)
{
var file = handle.files[i];
var isAdded = false;
this.state.files.forEach( exFile => {
if(exFile.name == file['name']) isAdded = true;
});
if(isAdded) continue;
var randName = crypto.getRandomValues( new Uint32Array(1)) + file['name'];
var item = {
name: file['name'],
progress: 0,
status: 'start',
uq: randName
}
var list = this.state.files;
list.push(item);
this.setState({ files: list});
this.startUpload(file, list.length-1, randName );
}
}
onDelete(event)
{
var uq = event.target.getAttribute("uq");
console.log("FileUploader, delete: " + uq);
var dataPost = {
uq: uq
};
fetch( this.url_delete , {
method: 'POST',
body: JSON.stringify(dataPost),
headers: {
'Content-Type': 'text/html',
'X-API-KEY': this.apiKey
}
})
.then( res => res.json() )
.then(json => {
if(json.status == "OK") //deleted on server..
{
var files = this.state.files.filter( item => {
if(item.uq == uq) return false;
return true;
} );
this.setState({
files: files
})
}
});
}
refreshProgress()
{
var sumP = 0;
var countP = 0;
this.state.files.map( item => {
if(item.status == 'start' || item.status == 'upload')
{
countP++;
sumP += item.progress;
}
} );
var avg = sumP / countP;
this.setState({
uploadProcentAll: avg
});
}
startUpload(file, tabIndex, randName)
{
var refState = this.state;
var refRefreshProgress = this.refreshProgress.bind(this);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress',function(ev)
{
var procent = (ev.loaded/ev.total );
procent *= 100;
procent = Math.round(procent) ;
refState.files[tabIndex]['progress'] = procent;
refState.files[tabIndex]['status'] = "upload";
refRefreshProgress();
}, false)
xhr.addEventListener("load", function(ev){
} , false);
xhr.addEventListener("error", function(ev){}, false);
xhr.addEventListener("abort", function(ev){}, false);
xhr.onreadystatechange = function(ev)
{
if (xhr.readyState == 4)
{
refState.files[tabIndex]['status'] = "finish";
refState.files[tabIndex]['progress'] = 100;
}
};
xhr.open('POST', this.url_upload, true);
xhr.setRequestHeader('X-API-KEY', this.apiKey);
var data = new FormData();
data.append('file'+tabIndex, file );
data.append('typ', this.typ);
data.append('typ_id', this.typ_id);
data.append('fileUploader','yes');
data.append('uq', randName);
xhr.send(data);
}
render()
{
var progress = "";
var progressStyle = {
width: this.state.uploadProcentAll+"%"
}
if(this.state.uploadProcentAll > 0 && this.state.uploadProcentAll < 100 )
{
progress = (
<div className="progressBar">
<div className="progressLine" style={progressStyle}>{this.state.uploadProcentAll}</div>
</div>
)
}
return (
<div className="fileUploader">
<div className="buttonUploader">
<input type="file" onchange="zaladuj_pliki(this)" multiple id="fileselect" name="fileselect[]" accept="*/*" onChange={this.onChangeInput.bind(this)} />
{progress}
</div>
<table>
{
this.state.files.map( (item,index) => {
return (
<tr key={index} >
<td>{item.progress}</td>
<td>{item.name}</td>
<td uq={item.uq} onClick={this.onDelete.bind(this) } >Del</td>
</tr>
)
})
}
</table>
</div>
)
}
}
export default FileUploader;
Put in parent:
<FileUploader typ="sk_szkolenia" typ_id={this.state.rows.id} apiKey={this.props.apiKey} />