In the example provided for Uploading a file, there is some key code missing. To rectify this, you must include an event listener for the change event of the input element. This will allow you to retrieve the file from the input.files property.
A functional illustration:
server.ts:
import express from 'express';
import multer from 'multer';
import path from 'path';
const app = express();
const port = 3000;
const uploader = multer({
storage: multer.diskStorage({
destination: (_req, _file, cb) => cb(null, path.resolve(__dirname, './uploads/')),
filename: (_req, file, cb) => {
cb(null, file.fieldname);
},
}),
});
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname, './index.html'));
});
app.put('/test', uploader.single('avatar'), (req, res) => {
console.log('body: ', req.body);
console.log('file: ', req.file);
res.sendStatus(200);
});
app.listen(port, () => console.log(`HTTP server is listening on http://localhost:${port}`));
client index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file">
<script>
window.onload = function () {
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', () => {
const file = input.files[0]
const formData = new FormData()
formData.append('key1', 'asdf')
formData.append('avatar', file)
fetch('/test', {
method: 'PUT',
body: formData,
}).then(res => res.text()).then(res => {
console.log('res: ', res)
}).catch(console.log)
})
}
</script>
</body>
</html>
The server-side log:
body: [Object: null prototype] { key1: 'asdf' }
file: {
fieldname: 'avatar',
originalname: 'a7947f21438966d97d5ec622fe473ec.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: '/Users/dulin/workspace/github.com/mrdulin/expressjs-research/src/stackoverflow/68172207/uploads',
filename: 'avatar',
path: '/Users/dulin/workspace/github.com/mrdulin/expressjs-research/src/stackoverflow/68172207/uploads/avatar',
size: 40241
The client-side request payload:
------WebKitFormBoundarybnHanQq8UoHLqcbY
Content-Disposition: form-data; name="key1"
asdf
------WebKitFormBoundarybnHanQq8UoHLqcbY
Content-Disposition: form-data; name="avatar"; filename="a7947f21438966d97d5ec622fe473ec.jpg"
Content-Type: image/jpeg
------WebKitFormBoundarybnHanQq8UoHLqcbY--