0

Currently I'm working on an azure function written in typescript.

The function should be able to handle a form-data received through a POST request. In this request, files and text will be send. How can I work with both?

Right now, I'm using the parse-multipart library, but it only seems to work with the files. Every time I send a file field and a text field, it returns an error.

I also tried using the formidable library, with no success. It expects the request object to have a on method, which the HttpRequest from Azure does not.

The request instance has a method called formData which gets me the both values. However, the file data looks like: { size: 3115398, type: 'image/jpeg', name: 'imageName.jpg', lastModified: 1706633173379 } (no buffer), so I can't work with it.

Any solutions?

1
  • share your function code. Commented Jan 31, 2024 at 7:09

1 Answer 1

0

Thanks to @anzharip.

This code worked for me. In code we are using @anzp/azure-function-multipart module.

My code

HttpTrigger1/index.ts:

import { AzureFunction, Context, HttpRequest } from "@azure/functions";
import parseMultipartFormData from "@anzp/azure-function-multipart";

const httpTrigger: AzureFunction = async function (
  context: Context,
  req: HttpRequest
): Promise<void> {
  const { fields, files } = await parseMultipartFormData(req);
  context.log("HTTP trigger function processed a request.");
  const name = req.query.name || (req.body && req.body.name);

  const fileContent = files.length > 0 ? Buffer.from(files[0].bufferFile).toString('utf-8') : null;
  const responseMessage = {
    fields,
    files:[
        {
          ...files[0],
          fileContent,
        },
      ],
  };

  context.res = {
    body: responseMessage,
  };
};

export default httpTrigger;

hello.txt:

Hello, this is file data of hello.txt

OUTPUT:

{
  "fields": [
    {
      "name": "Name",
      "value": "Vivek",
      "nameTruncated": false,
      "valueTruncated": false,
      "encoding": "7bit",
      "mimeType": "text/plain"
    }
  ],
  "files": [
    {
      "name": "Testfile",
      "bufferFile": {
        "type": "Buffer",
        "data": [
          72,
          101,
          108,
          108,
          111,
          44,
          32,
          116,
          104,
          105,
          115,
          32,
          105,
          115,
          32,
          102,
          105,
          108,
          101,
          32,
          100,
          97,
          116,
          97,
          32,
          111,
          102,
          32,
          104,
          101,
          108,
          108,
          111,
          46,
          116,
          120,
          116
        ]
      },
      "filename": "hello.txt",
      "encoding": "7bit",
      "mimeType": "text/plain",
      "fileContent": "Hello, this is file data of hello.txt"
    }
  ]
}

Functions:

        HttpTrigger1: [GET,POST] http://localhost:7071/api/HttpTrigger1

For detailed output, run func with --verbose flag.
[2024-01-31T13:44:55.287Z] Host lock lease acquired by instance ID '000000000000000000000000AAE5F384'.
[2024-01-31T13:45:36.816Z] Executing 'Functions.HttpTrigger1' (Reason='This function was programmatically called via the host APIs.', Id=cbd178b7-09f8-4316-b22b-1f8fd5b5a3f0)
[2024-01-31T13:45:37.065Z] HTTP trigger function processed a request.
[2024-01-31T13:45:37.371Z] Executed 'Functions.HttpTrigger1' (Succeeded, Id=cbd178b7-09f8-4316-b22b-1f8fd5b5a3f0, Duration=648ms)

Sign up to request clarification or add additional context in comments.

5 Comments

I get the error "Type 'HttpRequest' is missing the following properties from type 'HttpRequest': get, parseFormBody". This is when passing the request object to parseMultipartFormData method. Seems like we are working with different versions of the azure function, maybe?
Yeah. Reading your code better, I noticed we worked with different versions. Im using v4.
i am using function version V4, typescript model V3
Hey @beto were you able to get this working with V4?
Not really. We are still using parse-multipart to handle files. text fields of the form data are being sent in the headers, which is a work around. However, a friend told me that in Javascript (and Typescript), when you have a Blob, it hides the content of the file for whatever reason. Maybe you can use Multer to parse the file received in the form data and use text fields as well

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.