I have an extremely large JSON string that I need to send to my server. I encountered payloadTooLargeError when I tried sending the JSON string directly.
So, I decided to send it as a blob instead. But unfortunately, after creating the blob, the blob is returning an empty string.
Here is how I created the blob:
let largeContentPayload = {
data: {
'batch_id': batchId,
content: extremelyLargeJSON
}
};
const largeContentStringified = JSON.stringify(largeContentPayload);
const largeContentBlob = new Blob([largeContentStringified], {
type: 'application/json;charset=utf-8'
});
console.log(largeContentBlob); //This is only returning size and type, the JSON string is not there
const blobUrl = URL.createObjectURL(largeContentBlob);
let requestBody = new FormData();
let blob = await fetch(blobUrl).then(r => r.blob());
How can this be resolved?
By default if you try to log a blob object in the console it will only display the size and type of that blob.
If you want to see the text content of the blob, you can use text method in the blob.
Example
async function createBlob() {
const obj = { hello: 'world' };
const blob = new Blob([JSON.stringify(obj, null, 2)], { type: 'application/json' });
console.log(blob);
const text = await (new Response(blob)).text();
console.log(text);
}
createBlob();