Parse multipart/form-data in Azure Function

This post is over a year old, some of this information may be out of date.

While working on an internal Azure Static Web Site project, I needed to upload CSV files to an Azure Function to import data to Cosmos DB.

When uploading a file to your API, the multipart/form-data content-type is used. The body’s format looks a bit “special” as it requires some parsing to get each file.

1
-----WebKitFormBoundaryXvnFih9Jfw9ZdQNB
2
Content-Disposition: form-data; name': '"file"; filename="2020-9-2-localization.csv"
3
Content-Type: text/csv
4

5
id,name
6
test1,test1
7
test2,test2
8
------WebKitFormBoundaryXvnFih9Jfw9ZdQNB--

Similar like the previous article about parsing application/x-www-form-urlencoded in Azure Function, this content type is something you have to parse yourself as well.

To make it easier, you will have to install the following dependency to your project: npm i parse-multipart -S -E. The code looks like this:

1
import { AzureFunction, Context, HttpRequest } from "@azure/functions";
2
import * as multipart from 'parse-multipart';
3

4
const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
5
  const body = req.rawBody;
6
  // Retrieve the boundary id
7
  const boundary = multipart.getBoundary(req.headers["content-type"]);
8
  if (boundary) {
9
    const files: File[] = multipart.Parse(Buffer.from(body), boundary);
10

11
    if (files && files.length > 0) {
12
      // Do what you want to do with the file
13
    }
14

15
    context.res.status(200);
16
  } else {
17
    context.res.status(500).send("No file(s) found.");
18
  }
19
};

I hope this helps you get started processing your uploaded files.

Parse multipart/form-data in Azure Function

Related articles

How to make local Azure Static Web App development easier

Parse application/x-www-form-urlencoded in Azure Function

Why does your timer trigger Azure Function run at unforeseen times?

Report issues or make changes on GitHub

Comments

Elio Struyf