how to reqeust additional file info in client side? - httprequest

Question

Can i add some file info in client side, and receive these info and files in serverside in one request?
The code below is what i've tried.
I hope to send fileName(string) and fileSize(string) info which are from the client side request to the server
This is client side UI
Client side request
// console.log(files)
(2) [File, File]
0: File
fileName: "home banner"
fileSize: "md"
lastModified: 1578046598141
lastModifiedDate: Fri Jan 03 2020 19:16:38 GMT+0900 (Korean Standard Time) {}
name: "주석 2020-01-03 191634.png"
size: 80587
type: "image/png"
webkitRelativePath: ""
__proto__: File
1: File
fileName: "home carousel"
fileSize: "sm"
lastModified: 1585672500304
lastModifiedDate: Wed Apr 01 2020 01:35:00 GMT+0900 (Korean Standard Time) {}
name: "Capture001.png"
size: 756604
type: "image/png"
webkitRelativePath: ""
__proto__: File
length: 2
// on submit
const handleSubmit = (e) => {
e.preventDefault();
console.log(files);
const formData = new FormData();
files.forEach((file, i) => formData.append('file' + i, file));
fetch('/image/upload', {
method: 'POST',
body: formData,
});
};
Server side
app.post('/image/upload', (req, res) => {
console.log(req.files);
});
// log
{
file0: {
name: '주석 2020-01-03 191634.png',
data: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 06 45 00 00 03 0f 08 06 00 00 00 6b 13 d2 fd 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 00 04 ... 80537 more bytes>,
size: 80587,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: '5dc5122f8334ba14b362f4dcf96cd729',
mv: [Function: mv]
},
file1: {
name: 'Capture001.png',
data: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 0a 00 00 00 08 70 08 06 00 00 00 e1 e9 67 30 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 00 04 ... 756554 more bytes>,
size: 756604,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: '3858e650b34e3210d41e923f249e9018',
mv: [Function: mv]
}
}

Answer 1

Adding fields to the File object will not add it to the upload, you're going to have to upload that data separately.
const handleSubmit = (e) => {
e.preventDefault();
console.log(files);
const formData = new FormData();
files.forEach((file, i) => {
formData.append('file' + i, file);
formData.append('file' + i + 'fileName', file.fileName);
formData.append('file' + i + 'fileSize', file.fileSize);
});
fetch('/image/upload', {
method: 'POST',
body: formData,
});
};
On the server
app.post('/image/upload', (req, res) => {
console.log(req.files);
console.log(req.body);
});
Log
{
file0fileName: "home banner",
file0fileSize: "md",
file1fileName: "home carousel",
file1fileSize: "sm",
}