DEV Community: Ionx Solutions

How to Handle File Uploads with Node.js and Express - Multer Edition

Ionx Solutions — Mon, 12 May 2025 13:48:14 +0000

A variation on our earlier post 'How to Handle File Uploads with Node.js and Express' (which used express-fileupload). This time, we'll use Multer, a powerful middleware for handling file uploads with Node.js and Express.

NOTE: In order to follow this tutorial, you will need the following:

Node.js installed on your machine

Basic knowledge of JavaScript and Express

A text editor or lightweight IDE such as Visual Studio Code

Why Choose Multer?

In our previous guide, we showed how easy it is to handle file uploads using express-fileupload. Multer brings additional flexibility and control:

Disk & Memory Storage Engines: Choose between saving files directly to disk or keeping them in memory for immediate processing. Third parties even offer pluggable engines for cloud storage.
File Filtering: Accept or reject files based on MIME type or custom criteria.
Limits & Validation: Set size limits, file count limits, and other constraints to protect your server.
Streaming Support: Process large uploads efficiently without consuming excessive RAM.

With these features, Multer is ideal for both simple and advanced upload workflows.

Project Scaffold/Setup

The first step is to create and initialize a new Express project.

Open a terminal or command prompt, navigate to the directory where you want to store the project, and run the following commands:

npx express-generator --view=pug myapp
cd myapp
npm install

The generated app should have the following directory structure:

.
├── app.js
├── package.json
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
├── views
│   ├── error.pug
│   └── index.pug
│   └── layout.pug

Before we move on, make sure you are able to run the app and view it in a browser

On MacOS, Linux or Git Bash on Windows, run the app with this command:

DEBUG=myapp:* npm start

Or use this command for Windows:

set DEBUG=myapp:* & npm start

Or this command for Windows Powershell:

$env:DEBUG='myapp:*'; npm start

Then navigate to http://localhost:3000 in your browser to access the app - you should see a page that looks like this:

Go ahead and stop the server by hitting CTRL-C at the command prompt
Next we’re going to add a few NPM packages:
- We'll add a package to deal with file uploads easier. There are several popular choices here, including Formidable and express-fileupload - but for this tutorial, we'll use Multer.
- For this tutorial, we're going to scan the file for malware using Verisys Antivirus API, and so we'll add a package to make it easier to make external HTTP requests. Popular choices include Axios and node-fetch - for this article, we'll use node-fetch.
- We'll also add the form-data package to allow working with multipart form data, which is used to perform file uploads.

npm install multer@^1.4.5-lts.2
npm install node-fetch@^2.7.0
npm install form-data

Frontend

Before we write JavaScript code to handle the file upload, let’s create a simple web page that lets the end user select a file to upload.

Update the content of myapp/views/index.pug to contain the following:

extends layout

block content

  h2 File Upload

  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">Upload File</button>
  </form>

  br

  h2 Malware Scan

  <form action="/scan" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">Scan File</button>
  </form>

We’ve added two forms to the page. When the File Upload form is submitted, the file will be sent to a route at /upload - the next step is to create the route and route handler. We’ll get back to the Malware Scan form later.

Backend - Simple File Upload

Now we’re going to add a route handler to process uploaded files, and then we’ll wire up the handler to the /upload route.

Create file myapp/routes/upload.js with the following content:

const express = require('express');
const multer  = require('multer');
const router = express.Router();

const storage = multer.diskStorage({
  // Configure file uploads with maximum file size 10MB
  limits: { fileSize: 10 * 1024 * 1024 }
});
const fileUpload = multer({ storage: storage });

router.post('/', fileUpload.single('file'), async function(req, res, next) {
  // Was a file submitted?
  if (!req.file) {
    return res.status(422).send('No files were uploaded');
  }

  const uploadedFile = req.file;

  // Print information about the file to the console
  console.log(`Original File Name: ${uploadedFile.originalname}`);
  console.log(`Uploaded File Name: ${uploadedFile.filename}`);
  console.log(`Uploaded File Path: ${uploadedFile.path}`);
  console.log(`File Size: ${uploadedFile.size}`);
  console.log(`File Mime Type: ${uploadedFile.mimetype}`);

  // Return a web page showing information about the file
  res.send(`File Name: ${uploadedFile.originalname}<br>
  File Size: ${uploadedFile.size}<br>
  File Mime Type: ${uploadedFile.mimetype}`);
});

module.exports = router;

This simple handler will both print information about the file to the console and return it in as a web page, so you can see what has been received by your router.

Next, we need to wire up this code to the /upload route.

Update the content of myapp/app.js to contain the following:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

We’ve only added 2 lines to the default code provided by the Express generator (lines #9 and #25 above), telling Express to use our upload.js router for the /upload route.

Testing File Uploads

Now we’re ready to test it! 🎉

Begin by starting your Node.js server using the same command as before
Open your browser and navigate to http://localhost:3000 - you should see a page that looks like this:

Use the File Upload form, Browse to select a file and press the Upload File button

If everything was set up correctly, you should see information about the file being printed to the console, and also shown in a web page.

Backend - Malware Scanning

Now we’re going to add a route handler to perform a virus scan on uploaded files, and then we’ll wire up the handler to the /scan route.

Create file myapp/routes/scan.js with the following content:

const express = require('express');
const fetch = require('node-fetch');
const multer  = require('multer');
const FormData = require('form-data'); 
const fs = require('fs');
const router = express.Router();

const storage = multer.diskStorage({
  // Configure file uploads with maximum file size 10MB
  limits: { fileSize: 10 * 1024 * 1024 }
});
const fileUpload = multer({ storage: storage });

router.post('/', fileUpload.single('file'), async function(req, res, next) {
  // Was a file submitted?
  if (!req.file) {
    return res.status(422).send('No files were uploaded');
  }

  const uploadedFile = req.file;

  // Print information about the file to the console
  console.log(`Original File Name: ${uploadedFile.originalname}`);
  console.log(`Uploaded File Name: ${uploadedFile.filename}`);
  console.log(`Uploaded File Path: ${uploadedFile.path}`);
  console.log(`File Size: ${uploadedFile.size}`);
  console.log(`File Mime Type: ${uploadedFile.mimetype}`);

  // Scan the file for malware using the Verisys Antivirus API - the same concepts can be
  // used to work with the uploaded file in different ways
  try {
    // Attach the uploaded file to a FormData instance
    var form = new FormData();
    form.append('file', fs.createReadStream(uploadedFile.path), uploadedFile.originalname);

    const headers = {
      'X-API-Key': '<YOUR API KEY HERE>',
      'Accept': '*/*'
    };

    // Send the file to the Verisys Antivirus API
    const response = await fetch('https://eu1.api.av.ionxsolutions.com/v1/malware/scan/file', {
      method: "POST",
      body: form,
      headers: headers
    });

    // Did we get a response from the API?
    if (response.ok) {
      const result = await response.json();

      // Did the file contain a virus/malware?
      if (result.status === 'clean') {
        return res.send('Uploaded file is clean!');
      } else {
        return res.status(500).send(`Uploaded file contained malware: <b>${result.signals[0]}</b>`);
      }
    } else {
      throw new Error('Unable to scan file: ' + response.statusText);
    }
  } catch (error) {
    // Delete the uploaded file
    fs.rm(uploadedFile.path, () => {});

    // Forward the error to the Express error handler
    return next(error);
  }
});

module.exports = router;

As with the /upload handler, this new /scan handler will print information about the file to the console, so you can see what has been received by your route handler. It then uploads the file to Verisys Antivirus API to scan it for malware.

NOTE:
The X-API-Key in the above code will need to be replaced with a real API key to scan files. Don't have an API key? Subscribe or start a trial now!

Next, we need to wire up this code to the /scan route.

Update the content of myapp/app.js to contain the following:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');
var scanRouter = require('./routes/scan');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter);
app.use('/scan', scanRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

We’ve only added two lines to the previous code (lines #10 and #27 above), telling Express to use our scan.js router for the /scan route.

Testing Malware Scanning

Now we’re ready to test malware scanning! 🎉

Begin by starting your Node.js server using the same command as before
Open your browser and navigate to http://localhost:3000 - you should see a page that looks like this:

Use the Malware Scan form, Browse to select a file and press the Scan File button

If everything was set up correctly, as before you should see information about the file being printed to the console, but you should also see a response from Verisys Antivirus API:

Code for this tutorial can be found on GitHub: https://github.com/IonxSolutions/tutorial-file-uploads-express-multer

How to Handle File Uploads with Python and FastAPI

Ionx Solutions — Mon, 14 Oct 2024 11:14:52 +0000

Handling file uploads securely is a common need for modern applications, but it comes with challenges. From managing large files to ensuring that the content isn't malicious, developers must implement robust solutions. In this guide, we'll walk through how to use Python's FastAPI to handle file uploads. Plus, we'll show you how to integrate Verisys Antivirus API to scan files for malware, protecting your application and users.

NOTE: To follow this tutorial, you will need the following:

Python 3.7+ installed on your machine

Basic knowledge of Python and FastAPI

A text editor or lightweight IDE such as Visual Studio Code

Why FastAPI?

FastAPI is a modern web framework for Python that enables you to build APIs quickly. It's built on standard Python type hints, making it easier to work with and maintain. With built-in support for asynchronous request handling, it's also ideal for high-performance applications.

Combined with Verisys Antivirus API, FastAPI helps you build secure file upload endpoints, crucial for any web or mobile app handling potentially unsafe files.

Project Scaffold/Setup

The first step is to create a Python environment, ready with the libraries we will use for the FastAPI project.

Open a terminal or command prompt, and navigate to the directory where you want to store the project
Create and activate a virtual environment

Install FastAPI, Uvicorn and python-multipart:

pip install fastapi uvicorn python-multipart

For this tutorial, we'll also use the requests library to send uploaded files to Verisys Antivirus API for malware scanning:
```
pip install requests
```

Creating the FastAPI App

Let's start by setting up a simple FastAPI app that will accept file uploads. Create a file main.py with this content:

from fastapi import FastAPI, File, UploadFile
import uvicorn
import logging

logger = logging.getLogger('uvicorn.error')
logger.setLevel(logging.DEBUG)

app = FastAPI()

@app.post("/upload/")
async def upload_file(file: UploadFile = File(...)):
    content = await file.read()

    # Print information about the file to the console
    logger.debug(f"File Name: {file.filename}")
    logger.debug(f"File Size: {len(content)}")
    logger.debug(f"File MIME Type: {file.content_type}")

    # Return information about the file to the caller - note that the
    # content_type can easily be spoofed
    return {"filename": file.filename, "file_size": len(content), "file_mime_type": file.content_type}

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)

Starting the FastAPI App

To run the API using the Uvicorn web server, execute the following from the same folder as main.py:

uvicorn main:app --reload

The --reload flag allows the server to automatically reload as we make changes to the code, which is helpful during development.

Once Uvicorn starts, you'll see output indicating that the app is running, along with the URL where it's accessible. By default, it will run at:

http://127.0.0.1:8000

Testing the API

To test the basic file upload functionality, you can simply use curl, or you could a tool like Postman or Insomnia.

Here's an example using curl, with a file testfile.png (substitute for any file you want to upload):

curl -F "file=@testfile.png" http://127.0.0.1:8000/upload/

You should see a result similar to:

{
  "filename":"testfile.png",
  "file_size":26728,
  "file_mime_type":"image/png"
}

Integrating Verisys Antivirus API

Uploading files is a start, but ensuring that uploaded files are free of malware is critical, especially when accepting files from end users. Verisys Antivirus API allows us to scan files before processing them further.

Verisys Antivirus API is a language-agnostic REST API that allows you to easily add malware scanning to mobile apps, web apps and backend processing.

By scanning user-generated content and file uploads, Verisys Antivirus API can stop dangerous malware at the edge, before it reaches your servers, applications - or end users.

Here's how to integrate Verisys Antivirus API to scan uploaded files:

Get your Verisys API Key: Before we start, ensure you have your Verisys Antivirus API key. If you don't have one, visit Verisys Antivirus API to get started or request a trial.
Send the file to Verisys Antivirus API: Once the file has been received, send it to the Verisys API for scanning.

Update main.py with this content:

from fastapi import FastAPI, File, UploadFile
import uvicorn
import requests
import logging

VERISYS_API_URL = "https://eu1.api.av.ionxsolutions.com/v1/malware/scan/file"
API_KEY = "your_api_key"

logger = logging.getLogger('uvicorn.error')
logger.setLevel(logging.DEBUG)

app = FastAPI()

class ScanResult:
    def __init__(self, filename="", status="", content_type="", signals=None, metadata=None):
        self.filename = filename
        self.status = status
        self.content_type = content_type
        self.signals = signals if signals is not None else []
        self.metadata = metadata if metadata is not None else []

    def __repr__(self):
        return f"ScanResult(filename={self.filename},status={self.status}, content_type={self.content_type}, signals={self.signals}, metadata={self.metadata})"

def scan_file(file_content, filename):
    files = {'file': (filename, file_content)}
    headers = {'X-API-Key': API_KEY, 'Accept': '*/*'}

    response = requests.post(VERISYS_API_URL, headers=headers, files=files)

    # Was the scan successful?    
    if response.status_code == 201:
        result = response.json()

        # Print the full scan result to the console
        logger.debug(f"Scan result: {result}")

        scan_result = ScanResult(
            filename=filename,
            status=result["status"],
            content_type=result["content_type"],
            signals=result["signals"],
            metadata=result["metadata"]
        )

        return scan_result
    else:
        return ScanResult(status="error", metadata=[{"message": "Failed to scan file"}])

@app.post("/upload/")
async def upload_file(file: UploadFile = File(...)):
    content = await file.read()

    # Print information about the file to the console
    logger.debug(f"File Name: {file.filename}")
    logger.debug(f"File Size: {len(content)}")
    logger.debug(f"File MIME Type: {file.content_type}")

    # Scan file with Verisys API
    scan_result = scan_file(content, file.filename)

    # In real-life, you'd now use the scan result to determine what to do 
    # next - but here, we'll just return the scan results to the caller

    return scan_result

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)

In this modified version, after the file is uploaded, it's passed to the scan_file function, which sends the file to Verisys Antivirus API for scanning. The response from Verisys is returned as part of the result, indicating whether the file is safe or malicious.

Testing the Completed API

To test the file upload and scanning functionality, as before you can use curl or another tool of your preference.

Here's an example using curl, with an EICAR Anti-Virus Test File eicar.png (substitute for any file you want to upload):

curl -F "file=@eicar.png" http://127.0.0.1:8000/upload/

Depending on the file you upload, you should see the malware scan result:

{
  "filename": "eicar.png",
  "status": "threat",
  "content_type": "text/plain",
  "signals": [
    "Virus:EICAR_Test_File"
  ],
  "metadata": {
    "hash_sha1": "3395856ce81f2b7382dee72602f798b642f14140",
    "hash_sha256": "275a021bbfb6489e54d471899f7db9d1663fc695ec2fe2a2c4538aabf651fd0f"
  }
}

Your upload endpoint could use the scan result to determine what to do next - for example, to prevent uploading files that contain malware.

Note that while in this example the file masqueraded as a PNG image file, Verisys Antivirus API detected that it was actually a plain text file!

Handling File Uploads Securely

Here are a couple of additional tips to ensure your file upload system is secure:

Limit File Size: Ensure you're not accepting excessively large files, which could cause performance issues or even DoS attacks. FastAPI allows you to define custom file size limits.
Restrict File Types: Only accept specific file types (e.g., PDFs, images) to prevent the upload of executable or malicious files.

{{% aside-note %}}
Checking the file extension and Content-Type header are basic steps towards securing file uploads. However, both of these can easily be spoofed.

By scanning the actual file content, Verisys Antivirus API can identify 50+ different file formats for you, while also scanning files for malware.
{{% /aside-note %}}

Checking the file extension and Content-Type header are basic steps towards securing file uploads. However, both of these can easily be spoofed.

By scanning the actual file content, Verisys Antivirus API can identify 50+ different file formats for you, while also scanning files for malware.

Why Choose Verisys Antivirus API?

Verisys Antivirus API is specifically designed to ensure secure file uploads in your applications. Here's why it's a great fit for your project:

Powerful Malware Detection: Verisys detects a wide range of threats, ensuring that no malicious files slip through.
Easy Integration: The API is simple to integrate with any web framework, including FastAPI.
Content Type Detection: Alongside malware scanning, the API also scans the file content to determine the real file type.

Conclusion

Handling file uploads is essential for many applications, but steps must be taken to ensure security. By using FastAPI and Verisys Antivirus API, you can create a secure file upload endpoint that scans files for malware before processing them further. Whether you're building a web app or an API for file storage, this approach ensures that your infrastructure - and your users - remain safe from harmful files.

If you haven't yet, sign up for Verisys Antivirus API today and start protecting your application against malware!

Code for this tutorial can be found on GitHub: https://github.com/IonxSolutions/tutorial-file-uploads-fastapi

Securing File Uploads

Ionx Solutions — Thu, 06 Jun 2024 11:06:14 +0000

File uploads are a common feature in web and mobile applications, but they can pose significant security risks if not handled properly. To ensure your apps remains secure, it's crucial to implement robust validation and security measures. This guide will help you to effectively secure file uploads, protecting your systems and end users from malicious intent and malware.

File uploads present several security risks that could compromise both your apps and users. The main risks include:

Malicious Files: Uploaded files can contain viruses, malware, or executable code designed to exploit vulnerabilities.
Cross-Site Scripting (XSS): Inadequately validated files can contain scripts that execute in the context of the user's browser.
Denial-of-Service (DoS) Attacks: Malicious users upload large files, or numerous smaller files, to exhaust server storage and processing capacities.
SQL Injection: If uploaded file metadata (e.g. filename) are not meticulously sanitised, they can serve as vectors for SQL injection attacks, potentially compromising the database.

Due to the diverse range of risks, relying on a single method is not sufficient - a multi-layered approach is required, combining validation checks, metadata sanitisation, secure configuration and malware scanning.

Validate the File Extension

File extensions help in identifying the type of file and determining whether it should be accepted. However, just like the Content-Type header, file extensions can be manipulated. Despite this, enforcing a whitelist of allowed file extensions can act as a preliminary filter to block obviously dangerous file types. Ensure that only extensions pertinent to your application's needs are accepted.

Checking the file extension is another basic step in securing file uploads. However, like other HTTP headers, file names and extensions can easily be spoofed. Use an allowlist approach, permitting only the specific extensions that your application requires (e.g., .jpg, .png, .pdf). This is a simple validation, and can act as a preliminary filter to block obviously dangerous/incorrect file types.

Validate the File Size

Limiting the file size is crucial to prevent denial-of-service (DoS) attacks where an attacker attempts to upload extremely large files to exhaust server resources. Set a maximum file size limit according to your application's requirements and enforce this limit server-side to ensure that oversized files are rejected immediately.

Validate the `Content-Type` Header

Depending on your application's requirements, you will want to accept only particular types of file; for example, for a profile picture you would only want to accept image files.

The Content-Type header, sent by the client, indicates the MIME type of the file being uploaded. While it's useful to validate as a quick and easy check, it should never be fully trusted - malicious users can easily spoof this header. Therefore, treat the Content-Type header as just one of several checks.

How to definitively determine the file type is covered in the next section.

Validate the File Type Based on Signature

As neither the file extension or Content-Type header can be trusted, the most effective and reliable way to verify a file's content/media type is by checking its file signature, or "magic number". These are unique sequences of bytes, usually at the beginning of a file, that indicate its true format. Validation can be performed by reading the first few bytes of the file and matching them against known signatures for allowed file types. For example, a PNG file typically starts with 89 50 4E 47, and a JPEG file starts with FF D8 FF.

This method ensures that the file content matches its purported type, providing a robust defence against file type spoofing. Libraries and tools are available in various programming languages to facilitate this check, or alternatively Verisys Antivirus API can identify 50+ different file formats for you, while also scanning files for malware.

Scan for Malware

Incorporating malware scanning into your file upload process is a critical step to ensure the security of both your application and your end users. Malware can be hidden in seemingly harmless files, posing significant risks once they are uploaded and processed.

While there are several malware scanning tools available, not all are equally effective. For instance, ClamAV is a popular open-source antivirus engine, but has notable drawbacks such as poor detection rates, high resource usage, and slow scan times. These limitations can compromise your application's performance and security.

Consider using a more robust and efficient solution like Verisys Antivirus API. Verisys Antivirus API offers vastly superior detection capabilities, faster scan times, and a ready-to-use antivirus API, making it a reliable choice for integrating malware scanning into your applications.

Boost your app security with Verisys Antivirus API: our language-agnostic API seamlessly integrates malware scanning into your mobile apps, web apps, and backend systems.

By scanning user-generated content and file uploads, Verisys Antivirus API can stop dangerous malware at the edge, before it reaches your servers, applications - or end users.

Storing Files

Steps required to secure files at rest will depend on the location of stored files - for example, they could be uploaded to object storage such as S3, or they could be stored on disk.

Sanitise File Names: file names can contain malicious characters that your application may be unable to process correctly. Always sanitise file names by removing or replacing special characters, spaces, and potentially executable scripts. Consider renaming files upon upload to a standardised naming convention to prevent any harmful effects.
Secure Storage Location: if storing files on disk (rather than, for example, object storage), uploaded files should be stored in a directory that is not directly accessible via the web. This prevents direct execution or access to the files from a URL.
Set Appropriate Permissions: ensure that uploaded files have the minimum necessary permissions. For instance, files should not be executable if they don't need to be.

Closing Thoughts

By combining these strategies, developers can significantly enhance the security of file uploads in their applications. A layered approach, which includes malware scanning, provides comprehensive protection against a variety of attack vectors, ensuring that file uploads remain a safe and useful feature.

For a comprehensive guide on securing file uploads and other web application security best practices, refer to OWASP (Open Worldwide Application Security Project). OWASP provides a wealth of resources, including the OWASP Top Ten, which highlights the most critical security risks to web applications. In particular, see Unrestricted File Upload.

Learn more about Verisys Antivirus API, our language-agnostic API that seamlessly integrates antivirus scanning into your mobile apps, web apps, and backend systems: https://www.ionxsolutions.com/products/antivirus-api

How to Handle File Uploads with ASP.NET Core

Ionx Solutions — Tue, 07 May 2024 11:21:02 +0000

Managing file uploads from end users is often required in web apps and APIs. This tutorial will guide you through the process of handling uploaded files using using ASP.NET Core and C#.

NOTE: To follow this tutorial, you will need the following:

.NET SDK 8 installed on your machine

Basic knowledge of .NET, ASP.NET Core and C#

An IDE or text editor; we'll use Visual Studio 2022 for this tutorial, but a lightweight IDE such as Visual Studio Code will work just as well

To allow files to be uploaded, you will:

Create ASP.NET Core Razor views that allow the user to select a file to upload
Create ASP.NET Core controllers to work with uploaded files

Of course, you will also want to do something with each uploaded file! In this tutorial, we're going to write C# code to show information about the file, and also to scan it for malware using Verisys Antivirus API.

Verisys Antivirus API is a language-agnostic REST API that allows you to easily add malware scanning to mobile apps, web apps and backend processing.

By scanning user-generated content and file uploads, Verisys Antivirus API can stop dangerous malware at the edge, before it reaches your servers, applications - or end users.

Project Setup

First, we need to create a new ASP.NET Core MVC project.

Start Visual Studio and select File > New > Project
Select the template named ASP.NET Core Web App (Model-View-Controller) and click Next

Enter Web for the Project Name, choose a location to save the project, then click Next

For the Framework, select .NET 8.0 (Long Term Support), then click Create

The new project will be created, and you should see this folder structure in Visual Studio's Solution Explorer:

Running the App

Now we've created a new project, let's make sure it runs!

Press CTRL+F5, or click the Start Without Debugging button:

The first time you run the project, you will be asked to install an SSL/TLS certificate - click Yes on both popups:

Visual Studio will then run the app, opening it in the default browser:

While running your project, Visual Studio will open a terminal as well as the browser - this is for the default web server, Kestrel. If you press CTRL-C, it will shut down the web server and stop running your project.

File Upload

To enable file uploads, we need to add:

View models, to encapsulate information about uploaded files
A view with a form that allows users to select and upload a file
A view to show information about the uploaded file
A controller, to show the views and handle the uploaded file
We'll also update the main layout view, just to add links to our new pages

Let's get started!

First, create file Models/FileModels.cs, with content:

namespace Web.Models;

public record UploadModel(IFormFile File);
public record ResultModel(string Name, long Size, string MimeType, 
    MalwareStatus MalwareStatus, string[] Signals);

public record ApiResultModel(Guid Id, MalwareStatus Status, string[] Signals);
public enum MalwareStatus { Unknown, Clean, Threat }

Next, create a folder Views/Upload, and inside a view file Views/Upload/Index.cshtml with content:

@model UploadModel
@{
    ViewData["Title"] = "Upload File";
}

<form method="post" enctype="multipart/form-data">
    <input type="file" asp-for="File">
    <button type="submit">Upload File</button>
</form>

Note the form's encoding type (enctype) property is set to multipart/form-data - this is required for uploading files.

Next, create view file Views/Upload/Result.cshtml with content:

@model ResultModel
@{
    ViewData["Title"] = "Result";
}

<h1>Result</h1>

<div>File Name: @Model.Name</div>
<div>File Size: @Model.Size</div>
<div>Mime Type: @Model.MimeType</div>
<div>Malware Status: @Model.MalwareStatus</div>

Create a controller file Controllers/UploadController.cs with content:

using Microsoft.AspNetCore.Mvc;
using Web.Models;

namespace Web.Controllers;

public class UploadController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Index(UploadModel model)
    {
        var result = new ResultModel(model.File.FileName, model.File.Length, model.File.ContentType, MalwareStatus.Unknown, []);
        return View("Result", result);
    }
}

Finally, update the content of Views/Shared/_Layout.cshtml to add links to our new pages:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand border-bottom mb-3">
            <div class="container-fluid">
                <div class="navbar-collapse">
                    <a class="nav-link text-dark" href="/upload">Upload File</a>
                    <a class="nav-link text-dark" href="/scan">Scan File</a>
                </div>
            </div>
        </nav>
    </header>

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

</body>
</html>

It really is that simple!

Testing File Uploads

Now we’re ready to test file uploads! 🎉

Begin by running the project again, either by pressing CTRL+F5, or by click the Start Without Debugging button
Your browser should open automatically, showing a page that looks like this:

Click the link Upload File, and you should see one of the new views we created:

Press Choose File to select a file to upload, then and press the Upload File button
If everything was set up correctly, you should see information about the file being shown in a web page:

Note that the Malware Status is shown as Unknown - we'll fix that in the next section.

Malware Scanning

Now we're going to use Verisys Antivirus API to scan uploaded files for malware. Following a similar pattern as for the previous section, we need to add:

Registration of an HTTP client with the Dependency Injection (DI) container
A view with a form that allows users to select and upload a file for scanning
A view to show the results of the malware scan
A controller, to show the views and send the uploaded file to Verisys Antivirus API

Let's get started!

In file Program.cs, replace line builder.Services.AddControllersWithViews(); with:

// Register an HTTP client for use with Verisys Antivirus API
builder.Services.AddHttpClient<HomeController>(x =>
{
    x.BaseAddress = new Uri("https://eu1.api.av.ionxsolutions.com/v1/");
    x.DefaultRequestHeaders.Add("Accept", "application/json");
    x.DefaultRequestHeaders.Add("X-API-Key", "<YOUR API KEY HERE>");
});

builder.Services.AddControllersWithViews().AddJsonOptions(x => {
    x.JsonSerializerOptions.Converters.Add(new JsonStringEnumConverter());
    x.JsonSerializerOptions.PropertyNameCaseInsensitive = false;
});

NOTE:
The X-API-Key in the above code will need to be replaced with a real API key to scan files for real. Don’t have an API key? Subscribe now!

Create a folder Views/Scan, and inside a view file Views/Scan/Index.cshtml with content:

@model UploadModel
@{
    ViewData["Title"] = "Scan File";
}

<form method="post" enctype="multipart/form-data">
    <input type="file" asp-for="File">
    <button type="submit">Scan File</button>
</form>

Next, create view file Views/Scan/Result.cshtml with content:

@model ResultModel
@{
    ViewData["Title"] = "Result";
}

<h1>Result</h1>

<div>File Name: @Model.Name</div>
<div>File Size: @Model.Size</div>
<div>Mime Type: @Model.MimeType</div>
<div>Malware Status: @Model.MalwareStatus</div>

@if (Model.MalwareStatus == MalwareStatus.Threat)
{
    foreach (var signal in Model.Signals)
    {
        <div>Signal: @signal</div>
    }
}

Finally, create a controller file Controllers/ScanController.cs with content:

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using System.Text.Json;
using Web.Models;

namespace Web.Controllers;

public class ScanController : Controller
{
    private readonly IHttpClientFactory clientFactory;
    private readonly JsonSerializerOptions jsonOptions;

    public ScanController(IHttpClientFactory clientFactory, IOptions<JsonOptions> jsonOptions)
    {
        this.clientFactory = clientFactory;
        this.jsonOptions = jsonOptions.Value.JsonSerializerOptions;
    }

    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public async Task<IActionResult> Index(UploadModel model)
    {
        using var client = this.clientFactory.CreateClient(nameof(HomeController));

        using var formData = new MultipartFormDataContent();
        formData.Add(new StreamContent(model.File.OpenReadStream()), "file", model.File.FileName);

        using var response = await client.PostAsync("malware/scan/file", formData);
        response.EnsureSuccessStatusCode();

        var apiModel = await response.Content.ReadFromJsonAsync<ApiResultModel>(this.jsonOptions);

        var result = new ResultModel(model.File.FileName, model.File.Length, model.File.ContentType, apiModel!.Status, apiModel.Signals);
        return View("Result", result);
    }
}

Testing Malware Scanning

Now we’re ready to test malware scanning! 🎉

Begin by running the project again, either by pressing CTRL+F5, or by click the Start Without Debugging button
Your browser should open automatically, showing a page that looks like this:

Click the link Scan File, and you should see one of the new views we created:

Press Choose File to select a file to upload, then and press the Upload File button
If everything was set up correctly, you should see malware scan results from Verisys Antivirus API being shown in a web page:

Code for this tutorial can be found on GitHub: https://github.com/IonxSolutions/tutorial-file-uploads-aspnetcore

How to Handle File Uploads with Node.js and Express

Ionx Solutions — Wed, 07 Feb 2024 13:47:30 +0000

A common requirement in web apps and APIs is handling file uploads from end users. In this tutorial you will learn how to work with uploaded files using Node.js and Express.

NOTE: In order to follow this tutorial, you will need the following:

Node.js installed on your machine

Basic knowledge of JavaScript and Express

A text editor or lightweight IDE such as Visual Studio Code

Overview

To allow files to be uploaded, you will:

Create a web page with a form that allows the user to select a file to upload
Create Express route handlers to work with uploaded files

Of course, you will also want to do something with each uploaded file! In this tutorial, we're going to write JavaScript code to display some information about the file, and also to scan it for malware using Verisys Antivirus API.

Verisys Antivirus API is a language-agnostic REST API that allows you to easily add malware scanning to mobile apps, web apps and backend processing.

By scanning user-generated content and file uploads, Verisys Antivirus API can stop dangerous malware at the edge, before it reaches your servers, applications - or end users.

Project Setup

The first step is to create and initialize a new Express project.

Open a terminal or command prompt, navigate to the directory where you want to store the project, and run the following commands:

npx express-generator --view=pug myapp
cd myapp
npm install

The generated app should have the following directory structure:

.
├── app.js
├── package.json
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
├── views
│   ├── error.pug
│   └── index.pug
│   └── layout.pug

Before we move on, make sure you are able to run the app and view it in a browser

On MacOS, Linux or Git Bash on Windows, run the app with this command:

DEBUG=myapp:* npm start

Or use this command for Windows:

set DEBUG=myapp:* & npm start

Or this command for Windows Powershell:

$env:DEBUG='myapp:*'; npm start

Then navigate to http://localhost:3000 in your browser to access the app - you should see a page that looks like this:

Go ahead and stop the server by hitting CTRL-C at the command prompt
Next we’re going to add a few NPM packages:
- We’ll add a package to deal with file uploads easier. There are several popular choices here, including Multer, Formidable and express-fileupload - they are all fairly similar, and for this tutorial, we’ll use express-fileupload
- For this tutorial, we’re going to scan the file for malware using Verisys Antivirus API, and so we’ll add a package to make it easier to make external HTTP requests. Popular choices include Axios and node-fetch - for this article, we’ll use node-fetch
- We’ll also add the form-data package to allow working with multipart form data, which is used to perform file uploads

npm install express-fileupload
npm install node-fetch@^2.7.0
npm install form-data

Frontend

Before we write JavaScript code to handle the file upload, let’s create a simple web page that lets the end user select a file to upload.

Update the content of myapp/views/index.pug to contain the following:

extends layout

block content

  h2 File Upload

  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">Upload File</button>
  </form>

  br

  h2 Malware Scan

  <form action="/scan" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">Scan File</button>
  </form>

Backend - Simple File Upload

Now we’re going to add a route handler to process uploaded files, and then we’ll wire up the handler to the /upload route.

Create file myapp/routes/upload.js with the following content:

const express = require('express');
const fileUpload = require('express-fileupload');
const router = express.Router();

router.use(fileUpload({
  // Configure file uploads with maximum file size 10MB
  limits: { fileSize: 10 * 1024 * 1024 },

  // Temporarily store uploaded files to disk, rather than buffering in memory
  useTempFiles : true,
  tempFileDir : '/tmp/'
}));

router.post('/', async function(req, res, next) {
  // Was a file submitted?
  if (!req.files || !req.files.file) {
    return res.status(422).send('No files were uploaded');
  }

  const uploadedFile = req.files.file;

  // Print information about the file to the console
  console.log(`File Name: ${uploadedFile.name}`);
  console.log(`File Size: ${uploadedFile.size}`);
  console.log(`File MD5 Hash: ${uploadedFile.md5}`);
  console.log(`File Mime Type: ${uploadedFile.mimetype}`);

  // Return a web page showing information about the file
  res.send(`File Name: ${uploadedFile.name}<br>
  File Size: ${uploadedFile.size}<br>
  File MD5 Hash: ${uploadedFile.md5}<br>
  File Mime Type: ${uploadedFile.mimetype}`);
});

module.exports = router;

This simple handler will both print information about the file to the console and return it in as a web page, so you can see what has been received by your router.

Next, we need to wire up this code to the /upload route.

Update the content of myapp/app.js to contain the following:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

We’ve only added 2 lines to the default code provided by the Express generator (lines #9 and #25 above), telling Express to use our upload.js router for the /upload route.

Testing File Uploads

Now we’re ready to test it! 🎉

Begin by starting your Node.js server using the same command as before
Open your browser and navigate to http://localhost:3000 - you should see a page that looks like this:

Use the File Upload form, Browse to select a file and press the Upload File button

If everything was set up correctly, you should see information about the file being printed to the console, and also shown in a web page.

Backend - Malware Scanning

Now we’re going to add a route handler to perform a virus scan on uploaded files, and then we’ll wire up the handler to the /scan route.

Create file myapp/routes/scan.js with the following content:

const express = require('express');
const fetch = require('node-fetch');
const fileUpload = require('express-fileupload');
const FormData = require('form-data'); 
const fs = require('fs');
const router = express.Router();

router.use(fileUpload({
  // Configure file uploads with maximum file size 10MB
    limits: { fileSize: 10 * 1024 * 1024 },

  // Temporarily store uploaded files to disk, rather than buffering in memory
  useTempFiles : true,
  tempFileDir : '/tmp/'
}));

router.post('/', async function(req, res, next) {
  // Was a file submitted?
  if (!req.files || !req.files.file) {
    return res.status(422).send('No files were uploaded');
  }

  const uploadedFile = req.files.file;

  // Print information about the file to the console
  console.log(`File Name: ${uploadedFile.name}`);
  console.log(`File Size: ${uploadedFile.size}`);
  console.log(`File MD5 Hash: ${uploadedFile.md5}`);
  console.log(`File Mime Type: ${uploadedFile.mimetype}`);

  // Scan the file for malware using the Verisys Antivirus API - the same concepts can be
  // used to work with the uploaded file in different ways
  try {
    // Attach the uploaded file to a FormData instance
    var form = new FormData();
    form.append('file', fs.createReadStream(uploadedFile.tempFilePath), uploadedFile.name);

    const headers = {
      'X-API-Key': '<YOUR API KEY HERE>',
      'Accept': '*/*'
    };

    // Send the file to the Verisys Antivirus API
    const response = await fetch('https://eu1.api.av.ionxsolutions.com/v1/malware/scan/file', {
      method: "POST",
      body: form,
      headers: headers
    });

    // Did we get a response from the API?
    if (response.ok) {
      const result = await response.json();

      // Did the file contain a virus/malware?
      if (result.status === 'clean') {
        return res.send('Uploaded file is clean!');
      } else {
        return res.status(500).send(`Uploaded file contained malware: <b>${result.signals[0]}</b>`);
      }
    } else {
      throw new Error('Unable to scan file: ' + response.statusText);
    }
  } catch (error) {
    // Forward the error to the Express error handler
    return next(error);
  } finally {
    // Remove the uploaded temp file
    fs.rm(uploadedFile.tempFilePath, () => {});
  }
});

module.exports = router;

NOTE:
The X-API-Key in the above code will need to be replaced with a real API key to scan files for real. Don’t have an API key? Subscribe now!

Next, we need to wire up this code to the /scan route.

Update the content of myapp/app.js to contain the following:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');
var scanRouter = require('./routes/scan');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter);
app.use('/scan', scanRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

We’ve only added two lines to the previous code (lines #10 and #27 above), telling Express to use our scan.js router for the /scan route.

Testing Malware Scanning

Now we’re ready to test malware scanning! 🎉

Begin by starting your Node.js server using the same command as before
Open your browser and navigate to http://localhost:3000 - you should see a page that looks like this:

Use the Malware Scan form, Browse to select a file and press the Scan File button

If everything was set up correctly, as before you should see information about the file being printed to the console, but you should also see a response from Verisys Antivirus API:

Code for this tutorial can be found on GitHub: https://github.com/IonxSolutions/tutorial-file-uploads-express

DEV Community: Ionx Solutions

How to Handle File Uploads with Node.js and Express - Multer Edition

Why Choose Multer?

Project Scaffold/Setup

Frontend

Backend - Simple File Upload

Testing File Uploads

Backend - Malware Scanning

Testing Malware Scanning

How to Handle File Uploads with Python and FastAPI

Why FastAPI?

Project Scaffold/Setup

Creating the FastAPI App

Starting the FastAPI App

Testing the API

Integrating Verisys Antivirus API

Testing the Completed API

Handling File Uploads Securely

Why Choose Verisys Antivirus API?

Conclusion

Securing File Uploads

Validate the File Extension

Validate the File Size

Validate the Content-Type Header

Validate the File Type Based on Signature

Scan for Malware

Storing Files

Closing Thoughts

How to Handle File Uploads with ASP.NET Core

Project Setup

Running the App

File Upload

Testing File Uploads

Malware Scanning

Testing Malware Scanning

How to Handle File Uploads with Node.js and Express

Overview

Project Setup

Frontend

Backend - Simple File Upload

Testing File Uploads

Backend - Malware Scanning

Testing Malware Scanning

Validate the `Content-Type` Header