Transforming Blob().text() to a File()

Question

I want to send a generated image from a React frontend to an Express server but since I can't send a Blob() object with axios (I get an empty object) my idea was to get the raw image data with Blob().text() first, send that to the express backend and transform it back to a File() object there (File() inherites from Blob()) but somehow all I get is an blank squared png which was definetly not what I send.

React

async mint() { 
    const blob = await htmlToImage.toBlob(document.querySelector('.kryptoweapon'));
    const rawPng = await blob.text();

    const response = await axios.post('http://localhost:3002/api/mint', { 
        rawPng,
        metadata: this.state 
    });
}

Express (node)

const { rawPng } = req.body;
const { name, type, blockz, starz } = req.body.metadata;

const nft = {
    name,
    description: '',
    image: new File([rawPng], `blaat.png`, { type: 'image/png' }),
    ...
}

score 1 · Answer 1 · answered Oct 12 '22 at 18:16

You can't get image content by using Blob.text. It returns bytes in UTF-8 format, which isn't the right format for images.

Otherwise there are 2 options.

1) Use FormData instead

It's another content type for HTTP requests, you can read her https://developer.mozilla.org/en-US/docs/Web/API/FormData

On client-side

var form = new FormData();
form.append('name', yourblob);

On Node.js it can be handled for example by a very common library

https://www.npmjs.com/package/multer

2) Encode/Decode to Base64

It's a common encode/decode algorithm which can be performed also with files to get a string https://en.wikipedia.org/wiki/Base64

On client-side

function encodeBase64(blob) {
  var reader = new FileReader();
  reader.onloadend = function() {
    var base64Result = reader.result;
  }
  reader.readAsDataURL(blob);
}

On server-side

You can read her NodeJS: How to decode base64 encoded string back to binary?

After collecting the buffer convert it to file, for example with using

fs.createWriteStream('your/path/to/store/image').write(buffer);

Turns out It works on the frontend but doesn't on the node side somehow, I send the image to https://nft.storage/, when I send it from the frontend it goes over well but when I do the exact same thing on node it doesn't. Copmplete mystery — Rik Verbeek, Oct 14 '22 at 04:59
The problem is that you can't use blob.text to get image content, because image, content isn't in UTF-8 format (if easy, its isn't a normal text), as an example you can open your image with text editor. It will show not a normal text. Other easy way to solve, I'll add another answer — Sam Khachatryan, Oct 15 '22 at 22:39

score 0 · Answer 2 · answered Oct 15 '22 at 22:43

Blob.text() uses UTF-8 encoding which isn't the right format for images, use FileReader.readAsText() instead, which depending on blob's type uses different encoding.

const reader = new FileReader();

reader.addEventListener("load", () => {
  const result = reader.result;
  //Send this result to Node.js
}, false);

reader.readAsText(yourBlob);

Transforming Blob().text() to a File()

2 Answers2

1) Use FormData instead

2) Encode/Decode to Base64