Skip to content

How to upload files to the server using JavaScript

Uploading a file an process it in the backend in one of the most common file handling functionalities in a web app

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 =
  const formData = new FormData()
  formData.append('myFile', files[0])

  fetch('/saveImage', {
    method: 'POST',
    body: formData
  .then(response => response.json())
  .then(data => {
  .catch(error => {

document.querySelector('#fileUpload').addEventListener('change', 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.

Handling the file upload server-side using Node.js

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'


const fileupload = require('express-fileupload')

After you created your Express app, add:


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.'/saveImage', (req, res) => {
  const fileName =
  const path = __dirname + '/images/' + fileName, (error) => {
    if (error) {
      res.writeHead(500, {
        'Content-Type': 'application/json'
      res.end(JSON.stringify({ status: 'error', message: error }))

    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.

Check the properties of the files uploaded client-side

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 =
  const myImage = files[0]
  const imageType = /image.*/

  if (!myImage.type.match(imageType)) {
    alert('Sorry, only images are allowed')

  if (myImage.size > (100*1024)) {
    alert('Sorry, the max allowed size for images is 100KB')

β†’ Download my free JavaScript Handbook!



You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about js: