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.
-----WebKitFormBoundaryXvnFih9Jfw9ZdQNB
Content-Disposition: form-data; name': '"file"; filename="2020-9-2-localization.csv"
Content-Type: text/csv
id,name
test1,test1
test2,test2
------WebKitFormBoundaryXvnFih9Jfw9ZdQNB--
Like the previous article about parsing application/x-www-form-urlencoded
in Azure Function, this content type is something you must 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:
import { AzureFunction, Context, HttpRequest } from "@azure/functions";
import * as multipart from 'parse-multipart';
const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
const body = req.rawBody;
// Retrieve the boundary id
const boundary = multipart.getBoundary(req.headers["content-type"]);
if (boundary) {
const files: File[] = multipart.Parse(Buffer.from(body), boundary);
if (files && files.length > 0) {
// Do what you want to do with the file
}
context.res.status(200);
} else {
context.res.status(500).send("No file(s) found.");
}
};
I hope this helps you get started processing your uploaded files.
Top comments (1)
Recently facing this issue on my projects. I ended up writing an npm module for this: npmjs.com/package/@anzp/azure-func...
Hope it can help anybody struggling with this issue!