PATCH existing OneNote Page by appending binary image content

Question

Using the Microsoft Graph v1.0 api and C#, I am able to update (patch) existing OneNote pages however after writing image data to the multipart/form-data section, the resulting image height and width are correct, but, the image is not rendered on the page -- other than an empty image place-holder.

So the question is, what is the correct image format expected by OneNote for a PATCH command? The docs state that it must be 'binary image data'. Shouldn't File.ReadAllBytes be sufficient?

Here are the formats attempted so far:

string file = @"c:\images\file1.jpg";

var rawData = System.IO.File.ReadAllText(file); //attempt1
byte[] bytes = System.IO.File.ReadAllBytes(file);  //attempt2
var byteArray = BitConverter.ToString(bytes);   //attempt3
var byteString = Encoding.ASCII.GetString(bytes);  //attempt4
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);  //attempt5
string imageDataURL = string.Format("data:image/jpeg;base64,{0}", base64String);  //attempt6

...

/* Construct message content */
StringBuilder sb = new StringBuilder();
sb.Append("--MyPartBoundary198374" + "\r\n");
sb.Append(@"Content-Disposition: form-data; name=""Commands"""  + "\r\n");
sb.Append("Content-Type: application/json" + "\r\n" + "\r\n");

sb.Append(
@"[{
    'target':'body',
    'action':'append',
    'position':'before',
    'content':'<img src=""name:image1"" width=""400"" height=""500""/>'
}]" 

+ "\r\n" + "\r\n");

sb.Append("--MyPartBoundary198374" + "\r\n");
sb.Append(@"Content-Disposition: form-data; name=""image1""" + "\r\n");
sb.Append("Content-Type: image/jpeg" +  "\r\n\r\n" );
sb.Append([see formats above] + "\r\n");
sb.Append("--MyPartBoundary198374--" );

string content = sb.ToString();
string contentType = "multipart/form-data; boundary=MyPartBoundary198374";
var result = await OneNoteService.UpdatePageAsync(client, page, contentType, content);

...

internal static async Task <HttpResponseMessage> UpdatePageAsync(GraphServiceClient client, OnenotePage page, string contentType, string content)
{
    HttpResponseMessage response = null;

    try
    {
        string requestUri = client.Users[ME].Onenote.Pages[page.Id].Content.Request().RequestUrl;

        List<OnenotePatchContentCommand> patchCommands = new List<OnenotePatchContentCommand>();

        HttpRequestMessage request = new HttpRequestMessage()
        {
            Method = new HttpMethod("PATCH"),
            RequestUri = new Uri(requestUri),
            Content = new StringContent(content, Encoding.UTF8, "application/json"),
        };

        request.Content.Headers.Remove("Content-Type");
        request.Content.Headers.TryAddWithoutValidation("Content-Type", contentType);

        // Adds the user's access token from the GraphServiceClient to the request.
        await client.AuthenticationProvider.AuthenticateRequestAsync(request);

        response = await client.HttpProvider.SendAsync(request);

        if (!response.IsSuccessStatusCode)
        {
            throw new Microsoft.Graph.ServiceException(
                new Error
                {
                    Code = response.StatusCode.ToString(),
                    Message = await response.Content.ReadAsStringAsync()
                });
        }
    }
    catch (Exception ex)
    {
        //TODO: Error handling
        Console.WriteLine(ex.ToString());
    }
    return response;
}

The suggestions listed in this post did not resolve the issue: Inserting image into existing OneNote page via REST api not working

Been trying to resolve this for more than a day. Can someone provide the proper image data format expected by the PATCH command.

Thanks, Roland

Answer 1

Moving previous comment to an answer in case others run into this.

Rather than sending multiple parts, combine attempts 5 & 6 and include the result directly in the src attribute:

string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);  //attempt5
string imageDataURL = string.Format("data:image/jpeg;base64,{0}", base64String);  //attempt6

/* Construct message content */
StringBuilder sb = new StringBuilder();
sb.Append("--MyPartBoundary198374" + "\r\n");
sb.Append(@"Content-Disposition: form-data; name=""Commands"""  + "\r\n");
sb.Append("Content-Type: application/json" + "\r\n" + "\r\n");

sb.Append(
@"[{
    'target':'body',
    'action':'append',
    'position':'before',
    'content':'<img src=" + imageDataURL  + " width=""400"" height=""500""/>'
}]" 

+ "\r\n" + "\r\n");

This will include the image directly in the HTML you're inserting.