Updated Oct 26 2019
Uploading a file and process it in the backend in one of the most common file handling functionalities in a web app: think about uploading an avatar or an attachment.
Say we have an HTML file input element:
<input type="file" id="fileUpload" />
We register a change handler on the #fileUpload
DOM element, and when the user chooses an image, we trigger the handleImageUpload()
function passing in the file selected.
const handleImageUpload = event => {
const files = event.target.files
const formData = new FormData()
formData.append('myFile', files[0])
fetch('/saveImage', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data.path)
})
.catch(error => {
console.error(error)
})
}
document.querySelector('#fileUpload').addEventListener('change', event => {
handleImageUpload(event)
})
We use the Fetch API to send the file to the server. When the server returns successfully, it will send us the image path in the path
property.
With that, we will do what we need to do, like updating the interface with the image.
The server part is detailed here below. Iβm using Node.js with the Express framework to handle the request.
Install the express-fileupload
npm module:
npm install express-fileupload
and add it to your middleware:
import fileupload from 'express-fileupload'
//or
const fileupload = require('express-fileupload')
After you created your Express app, add:
app.use(
fileupload(),
//...
This is needed because otherwise the server canβt parse file uploads.
Now uploaded files are provided in req.files
. If you forget to add that middleware, req.files
would be undefined
.
app.post('/saveImage', (req, res) => {
const fileName = req.files.myFile.name
const path = __dirname + '/images/' + fileName
image.mv(path, (error) => {
if (error) {
console.error(error)
res.writeHead(500, {
'Content-Type': 'application/json'
})
res.end(JSON.stringify({ status: 'error', message: error }))
return
}
res.writeHead(200, {
'Content-Type': 'application/json'
})
res.end(JSON.stringify({ status: 'success', path: '/img/houses/' + fileName }))
})
})
This is the smallest amount of code needed to handle files.
We call the mv
property of the uploaded image. That is provided to us by the express-fileupload
module. We move it to path
and then we communicate the success (or an error!) back to the client.
If you need to check the filetype or the file size, you can preprocess them in the handleImageUpload
function, like this:
const handleImageUpload = event => {
const files = event.target.files
const myImage = files[0]
const imageType = /image.*/
if (!myImage.type.match(imageType)) {
alert('Sorry, only images are allowed')
return
}
if (myImage.size > (100*1024)) {
alert('Sorry, the max allowed size for images is 100KB')
return
}
//...
}
I wrote an entire book on this topic π
I also got a super cool course π
© 2023 Flavio Copes
using
Notion to Site
Interested in solopreneurship?