Uploading files on the server using Fetch API

File uploading is a commonly used feature in modern web applications. While there are many JavaScript libraries available to handle file uploads efficiently, you can achieve the same functionality using native JavaScript with the help of the Fetch API, a promise-based alternative to XHR for making HTTP requests in the browser.

Fetch API file upload

To handle file uploads using the Fetch API in native JavaScript, follow these steps:

1. Add the following HTML input element to your website:

<input type="file" id="avatar">

2. Attach an event listener to the input element that will be triggered when a file is selected by the user:

// Select the file input
const input = document.getElementById('avatar');

// Add an event listener
input.addEventListener('change', () => {
  uploadFile(input.files[0]);
});

3. Implement the uploadFile() method, which takes a File object as input and uploads it to the server using fetch() and the FormData interface:

const uploadFile = file => {
  // Add the file to the FormData object
  const fd = new FormData();
  fd.append('avatar', file);

  // Send a POST request
  fetch('/upload-avatar', {
    method: 'POST',
    body: fd
  })
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error(err));
};

Note: Do not set the Content-Type header for a multipart request when using fetch(). The browser will automatically add the necessary content type header, including the form boundary.

Validate file type & size

You can also perform validation on the file properties, such as file type and size, before initiating the upload:

const uploadFile = file => {
  // Check the file type
  if (!['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'].includes(file.type)) {
    console.log('Only images are allowed.');
    return;
  }

  // Check the file size (< 2MB)
  if (file.size > 2 * 1024 * 1024) {
    console.log('File must be less than 2MB.');
    return;
  }

  // ...
};

Uploading file to the server using Node.js

Below is an example that handles the file upload request in Node.js. It utilizes the express-fileupload library, a simple Express middleware for handling file uploads. This library parses multipart/form-data requests, extracts the files (if available), and makes them accessible through the req.files property:

app.post('/upload-avatar', async (req, res) => {
  try {
    if (!req.files) {
      res.send({
        status: false,
        message: 'No file uploaded'
      });
    } else {
      // Use the name of the input field (i.e., "avatar") to retrieve the uploaded file
      let avatar = req.files.avatar;

      // Use the mv() method to store the file in the upload directory (e.g., "uploads")
      avatar.mv('./uploads/' + avatar.name);

      // Send the response
      res.send({
        status: true,
        message: 'File uploaded',
        data: {
          name: avatar.name,
          mimetype: avatar.mimetype,
          size: avatar.size
        }
      });
    }
  } catch (err) {
    res.status(500).send(err);
  }
});

Refer to the this guide guide to learn more about handling files in Node.js.

uploads in Node.js.

Uploading file to the server using Spring Boot

If you are using Spring Boot for the backend, the following code snippet demonstrates how to handle the file upload request in Spring Boot:

@PostMapping("/upload-avatar")
@ResponseBody
public ResponseEntity<String> fileUpload(MultipartFile avatar) {
    try {

        // upload directory - change it to your own
        String UPLOAD_DIR = "/opt/uploads";

        // create a path from the file name
        Path path = Paths.get(UPLOAD_DIR, avatar.getOriginalFilename());

        // save the file to `UPLOAD_DIR`
        // make sure you have permission to write
        Files.write(path, avatar.getBytes());
    }
    catch (Exception ex) {
        ex.printStackTrace();
        return new ResponseEntity<>("Invalid file format!!", HttpStatus.BAD_REQUEST);
    }

    return new ResponseEntity<>("File uploaded!!", HttpStatus.OK);
}

For handling single and multiple file uploads in a Spring Boot application, refer to the this guide.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.