Uploading image using Posting API

Developers
1

Hello again :slight_smile:

Still working away on my little client. I have managed to get text posts to get created using the Posting API, but I’m a little stumped on getting an image uploaded. Any help or guidance would be appreciated. I making a POST request to my server, reading the file data, getting the media-endpoint and then attempting to POST the image. Below is the the code I’m working with:

const body = ctx.request.body({ type: 'form-data' });
const data = await body.value.read({ maxSize: 10000000 });
const file = data.files != undefined? data.files[0] : undefined;
if(file) {
    let fetchMethod = {
        method: "GET",
        headers: {
            "Authorization": "Bearer " + access_token
        }
    };
    let fetchingMediaEndpoint = await fetch('https://micro.blog/micropub?q=config', fetchMethod);
    let endpointFetched = await fetchingMediaEndpoint.json();
    let mediaEndpoint = endpointFetched["media-endpoint"];

    let formData = new FormData();
    formData.append('file', file);

    let uploadMethod = {
        method: "POST",
        headers: {
            "Authorization": "Bearer " + access_token
        },
        body: formData
    };

    let fetchingFileUpload = await fetch(mediaEndpoint, uploadMethod);
    let fileFetched = await fetchingFileUpload.json();
}

and this is what the contents of the file object look like:

{
  content: Uint8Array(37448) [
    137,  80,  78,  71,  13,  10,  26,  10,   0,   0,   0,  13,
     73,  72,  68,  82,   0,   0,   2, 176,   0,   0,   2, 170,
      8,   3,   0,   0,   0, 245, 215, 157, 121,   0,   0,   0,
      1, 115,  82,  71,  66,   0, 174, 206,  28, 233,   0,   0,
      0,   4, 103,  65,  77,  65,   0,   0, 177, 143,  11, 252,
     97,   5,   0,   0,   1,  59,  80,  76,  84,  69, 255, 255,
    255, 253, 253, 253, 254, 254, 254, 252, 252, 252, 249, 249,
    249, 240, 240, 240, 234, 234, 234, 229, 229, 229, 222, 222,
    222, 226, 226, 226,
    ... 37348 more items
  ],
  contentType: "image/png",
  name: "media",
  filename: undefined,
  originalName: "Untitled.png"
}

I don’t even get a JSON response back, but an html error page. Is the file not in the right format? The help documentation says “The media endpoint accepts a multipart/form-data upload with a file part containing the JPEG image data.”

Thanks!
Loura

2

Sorry for the unhelpful error message. This basically means Micro.blog was trying to read the file data and something was unexpected. I’ll have to improve that.

Your code looks correct to me, so I think the file object must not be an actual object of type File and so FormData doesn’t know exactly how to handle it. I wonder if you could convert it to a Blob and that would work? Something like:

let fileBlob = new Blob([file.content], { 'type': 'image/png' });
formData.append('file', fileBlob, file.originalName);

If that doesn’t work, let us know! Hopefully some other JavaScript folks can chime in too.

3

Thanks for the reply! I had to try a couple of things, but you were right, the file object was wrong and using a blob was the key. What worked for me was using the buffer to make the blob:

let fileBlob = new Blob([new Uint8Array(file.content).buffer], { 'type': file.contentType }); 
formData.append('file', fileBlob, file.originalName);

I do have another follow up question, I noticed the uploads going to my main blog, and not my test blog. Is it possible to have the uploads go to the test blob? Similar to how you can use mp-destination when posting content?

Thanks!
Loura

4

Yes, it’s the same for uploading files. You can add another form data append for the mp-destination parameter and that should do it.

Glad it’s working!