How can I upload an image and POST data to an Azure Mobile Services ApiController endpoint?

Question

I am trying to upload an image and POST form data (although ideally I'd like it to be json) to an endpoint in my Azure Mobile Services application.

I have the ApiController method:

[HttpPost]
[Route("api/upload/{databaseId}/{searchingEnabled}/{trackingEnabled}")]
public async Task<IHttpActionResult> Upload(string databaseId, string searchingEnabled, string trackingEnabled, [FromBody]string metadata) {

    if (!Request.Content.IsMimeMultipartContent()) {
        return BadRequest("No image is uploaded.");
    }
    else {
        var provider = new MultipartMemoryStreamProvider();
        await Request.Content.ReadAsMultipartAsync(provider);
        foreach (var file in provider.Contents) {
             // Process each image uploaded
        }
    }
}

This only works when I remove the [FromBody]string metadata, but then it works great.

When [FromBody]string metadata is included (as above), I get the error:

The request entity's media type 'multipart/form-data' is not supported for this resource.

However, I would like to POST additional metadata (which can be long, so I don't want to put it in the Uri).

How can I keep the file upload logic, and also POST additional string data to my controller?

I am using Azure Mobile Services, so this code is inside an System.Web.Http.ApiController (if that matters).

Answer 1

What I've done previously is to make the client post a json model which contains both the metadata and the actual files. Each file is then a base64 encoded string of the actual file content. The below code should be able to handle data uri + base64.

My frontend app is using the javascript File API to get a reference to a FileReader object which can return a base64 (data uri) string by using the readAsDataURL method. It's basically doing something like this:

var attachment = {};

function loadAttachmentFromFileInput(element) {
    var file = element.files[0];

    var reader = new FileReader();

    reader.onload = function(e) {
        var result = reader.result;

        attachment = {
            data: result,
            filename: file.name,
            type: file.type,
            size: file.size
            }
    }

    reader.readAsDataURL(file);    
}

I'm then building a POST model which results in the following json content:

{
  "messageId": 1,
  "foo": "bar",
  "bar": "foo",
  "attachments": [{
    "filename": "stackoverflow.jpg",
    "data": "data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAaABQDAREAAhEBAxEB/8QAmQABAAIDAAAAAAAAAAAAAAAACQUIBgcKAQABBQEBAAAAAAAAAAAAAAAIAAEEBgcFAxAAAAUCAwUFAg8AAAAAAAAAAgMEBQYBBxEUCAASFRYXIRM1NhgiJDFBU2NkJbXFN0iIGTlJmREAAQIEBAQEAwkBAAAAAAAAAQIDERMEBQASFAYhMUEVIhYHFzIjJPBRwZJDNEQ1Jhj/2gAMAwEAAhEDEQA/AO/UwwsoAjDRgLLD2iGYKgABpjhiIQq0pTtrsylJQnMsgJHU8BhwCowSCTg7L3z6TXPenazKFQ/afNS1v5eO5Wmw96kAq28vslimYoiSjcEA07JJmmTNSo9G9R9VSq9pzAFIAmVJqMIt7z3rc903d/08cS/tj1WoK1dbYy88VUV3bplEIg6iW05PaUQ/RLM1iYFCcGn0pLH042tZ9mW5j1CqU0u6vR+6UAt+4AywNdZlVOXOoNrzPU7tO6lDtJXNkM1MtTKiiYEnMfXLB/Tp1g4G5dSeN9K+hGIeffUR3/B+j2QxzGf497WZ3NzhPvuHd9m1q9+9v+23nGX/AKjUdv7Zm+o7zGX27LCZnndZeeT8yVm+Xjgf827j92fIWpZ8oabuXef4XYoTe65/hySeEuMdT9PHNxxsXUHMo092tq3As9KNTttp44L4jN2i0y5gezm9lShWhc15pXMrIpdKIXhtokGQ3KKrSVPxBqAWF+9RtK/t5doulmrL3ZK0yalmny50tEFRWQXWlkBQTCUqYDAp5YxfZqqmmvCLnb7lT2y60sHGHXY5S4DAJBCFpBgSfGMpEQeeDTUHRWVr45YtguY+zCMvsmb0TBp01oNNwbUX4t46phgEQ/aedQDpHuYD5NFk5ZihC3ruLjOJTDIAsAWZWlRWuW3bbuBTGyaW5PXGwuVYLVrv6KmjulA6JhS/Z7qtsOh5lSkBtlye3pm1spK0uFKiM2/vC47aqnN5JpEW6+t06ptdaAxVW6taUPHT3W155K2H/gdW3KAUsOFvMkEJD0ms10j4pzvHOJ5HNeqHctrzxzvwDpx1Q564Ly/z3kfq7PbneYe7449mxN+11m8udomL8ySv7WVT9x1MjT62dK/dSvBNhMycM+bxYx33b3B5k7nkHlSZl7NPq+16PU6vt0nUZtFP+ZJz5c/jhHBYWjhUglWkOxCWC2euRdFUwXa1cKVx1pNULbpiXQZSvv1LBJqvNFL8yFzWshAMwwkNQHhQ1JEKtA1PpWt+utpprqtBqXH21NcUltxbZ4gRjkIjy4RjDpjObfc37bnkIZWHIRDjaVjhHlmBhz4whHriw1g41qIZLwQFfNYFqkjMCQOLsoflVz9adir2wdsI5ZeyEKl2jpyFfPFoQOBxRZIm5YUeUcMBhgqkgMDWCxt9mnfRUayreDaswQ6oOJJgQDFaSpJEYgpUD0jCOJT97W+wtnS0jZWIZ20FtQEQeSVBJjCECCMV+yKH9irJZNLkeG45TLk5Xc9V/f49xudzu7/t/Bhj27WOP1H2+7HF6YHKXedJx/HD55m3iXiXmx68R+n/AC3zu9t7DkPjw2ID/NTZfnwsPl/S1+XPyH+nb8bfsv7y2j/q9fx5Yfpj/9k=",
    "type": "image/jpeg"
}]
}

Controller looks like this:

[Route("api/messages/{messageId:guid}")]
public async Task<IHttpActionResult> Post(Guid messageId, CreateMessageAttachments model)
{
    // Access to all properties in your post model
    Trace.WriteLine(model.Foo);
    Trace.WriteLine(model.Bar);

    foreach (var attachment in model.Attachments)
    {
        // Do what you need to with the bytes from the uploaded attachments
        var bytes = attachment.GetByteArray();
    }

    return Ok();
}

Then I have the following models to support the controller:

public class CreateMessageAttachments
{
    public Guid MessageId { get; set; }
    public string Foo { get; set; }
    public string Bar { get; set; }
    public IList<CreateAttachment> Attachments { get; set; }
}

public class CreateAttachment
{
    public string Data { get; set; }
    public string Filename { get; set; }
    public string Type { get; set; }

    public string GetBase64()
    {
        if (string.IsNullOrWhiteSpace(Data))
            return null;

        var index = Data.LastIndexOf("base64");

        if (index == -1)
            return Data;

        return Data.Substring(index + 7);
    }

    public byte[] GetByteArray()
    {
        try
        {
            var base64 = GetBase64();

            if (string.IsNullOrWhiteSpace(base64))
                return null;

            return Convert.FromBase64String(base64);
        }
        catch
        {
            return null;
        }

    }
}