sending json and files to Azure Function

Question

I am trying to upload files to an Azure Function, but I also need a JSON object to add addition context and I am struggling.

I am not sure if its the restClient in vs code that the issue or if its the Azure function not being happy;

POST http://localhost:7071/api/upload
Content-Type: application/json; multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="files"; filename="2020-04-29.png"
Content-Type: image/png

< C:\Users\enend\OneDrive\Pictures\Screenshots\2020-04-29.png
------WebKitFormBoundary7MA4YWxkTrZu0gW--

private async Task<UploadCommand?> GetCommandAsync(HttpRequestData httpRequest)
        {
            try
            {
                var command =  await httpRequest.ReadFromJsonAsync<UploadCommand>();

                if(command == null) return null;

                var parser = await MultipartFormDataParser.ParseAsync(httpRequest.Body);
                
                command.Files = parser.Files.ToList();

                return command;
            }
            catch(Exception ex)
            {
                _log.LogError(ex.ToString());
                return null;
            }
        }
    }

public class UploadCommand
    {
        [JsonPropertyName("files")]
        public IEnumerable<FilePart> Files {get;set;} = new List<FilePart>();
        [JsonPropertyName("culture")]
        public string? Culture { get; set; }
        [JsonPropertyName("status")]
        public string? Status { get; set; }
        [JsonPropertyName("accessType")]
        public string? AccessType { get; set; } 
        [JsonPropertyName("folders")]
        public IEnumerable<Folder>? Folders { get; set; }
        [JsonPropertyName("fileTypes")]
        public IEnumerable<string>? FileTypes { get; set; }
        [JsonPropertyName("allowOverrides")]
        public bool AllowOverride { get; set; }
    }

the above code works, but I can't figure away to add JSON to it, so my function accepts it (I can send JSON separately but not together).

Any thoughts would be appreciated.

Answer 1

You need to define your content-type at the root of the message with multipart/form-data and each unique part will define the content-type thereafter

POST "https://yourdomain.com/upload" HTTP/1.1
Authorization: ''
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name='image'; filename:"test_file.png"
Content-Type: image/png
Content-Length: <number>

<test_file data in bytes>

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name='filename'
Content-Type: application/json
Content-Length: <number>

{
    "image": "<filename>",
    "countryCode": "US"
}
----WebKitFormBoundary7MA4YWxkTrZu0gW--