I'm trying to allow users to upload pictures to my application (React frontend, Node backend). I want to send the uploaded file from the client to the server, then make a request from my server to Firebase cloud functions that will deal with storing the image.
My HTML for the form is as follows:
<div className='LoafGalleryWrap'>
<h1 className='banner'>Illustrious Loafs</h1>
<form>
<label>Add a loaf to the exhibit:
<input type='file' onChange={props.fileSelectedHandler} />
<button onClick={props.fileUploadHandler}>Upload</button>
</label>
</form>
<button onClick={props.toggleDisplayLandingPage}>Back</button>
</div>
I get the file data in my app with the following method. In the console.log, I can see the file data I want to send to my server.
fileUploadHandler(e) {
e.preventDefault();
e.stopPropagation();
let file = this.state.selectedFile;
let formData = new FormData();
formData.append('image', file);
formData.append('name', file.name);
const pic = formData.getAll('image');
console.log(formData)
axios({
url: 'http://localhost:3001/uploadLoaf',
method: 'POST',
data: formData,
headers: { "Content-Type": "multipart/form-data" }
})
.then(respo => console.log(respo))
}
In my server, when I check the request body, there is nothing there. I log it out and simply get an empty object. I've tried using multer and connect-multipart middlewares but none have been successful in showing the form data. What I am doing is similar to what this article suggest (https://www.geeksforgeeks.org/file-uploading-in-react-js/), but I am at a loss for how to get the data sent in my forms. Any guidance much appreciated.
My server route is as follows:
app.post('/uploadLoaf', (req, res) => {
console.log('uploadLoaf endpoint reached');
console.log(req.body);
res.status(201).json('complete')
// axios.post('https://us-central1-sour-loafs.cloudfunctions.net/uploadFile/', 'upload_file', formData, {
// headers: {
// 'Content-Type': 'multipart/form-data'
// }
// })
// .then(result => {
// console.log(result);
// res.send(result);
// })
// .catch(err => {
// console.log(err);
// res.send(err)
// })
});
try to replace the axios function you have with this
axios.post("http://localhost:3001/uploadLoaf", formData, { })
.then(res => { // then print response status
console.log(res.statusText)
})
let me know what you use in the backend and what is the result on res function
I managed to access the FormData file data by using Multer's upload function. My imports and server route configured so that I can access the file data is as follows:
const multer = require("multer");
const upload = multer({
limits:{fileSize: 1000000},
}).single("image");
app.post('/uploadLoaf', (req, res) => {
upload(req, res, (err) => {
if (err) {
res.sendStatus(500);
}
console.log(req.file);
res.send(req.file);
});
});
I am now unsure of how to send this file data to the API in the way the API expects, getting an error stating: "Error: could not handle the request\n". But at least I can now see the data from the form.