Image upload fails using datauri from browser

[pthieu]

@aleclarson @junhoyeo getting a Upload image failed error. I have the following base64 image that will render on the UI using an <img src="..." /> tag

data:image/png;base64,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

If I do something like:

const base64 = ... // image string above
const data = base64.split(',')[1];
const buf = Buffer.from(data, 'base64');

await client.publish({
    text: 'test',
    attachment: {
        image: { type: 'image/png', data: buf },
    },
});

verbose error:

[token] UPDATED xxxxxx
[userID] UPDATED undefined
[UPLOAD_IMAGE] Uploading 2,292b as 1690005367354...
[UPLOAD_IMAGE] FAILED {
  debug_info: {
    retriable: false,
    type: 'ProcessingFailedError',
    message: 'Request processing failed'
  }
}

Using v1.5.4.

I can also confirm that if I remove the imagefield, the post is published so not a credential issue.

[aleclarson]

Related issue https://github.com/junhoyeo/threads-api/issues/111

[pthieu]

@aleclarson it's from clipboard as a blob, then I convert it to a base64 datauri string using:

const blobToBase64 = (blob: Blob): Promise<string> => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  return new Promise((resolve) => {
    reader.onloadend = () => {
      resolve(reader.result as string);
    };
  });
};

It renders on the UI so I know it's working, but based on the comments in #111 it looks like png's are not working?

[pthieu]

Yeah looks like converting to a jpg blob works but the file quality is not good