0

I am trying to send a fetch Request with BASE64 Encoded BLOB data.

When validating the JSON through different services, it proves as valid JSON.

export function sendRecording1(blob){
let base64data; 
var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
  base64data = reader.result;                
  //base64data = base64data.substring(22);

  base64data = base64data.toString();

  let body = JSON.stringify({text: base64data, id: "blob"});
  //console.log(body);
    return fetch(url, {
    method: "POST", // or 'PUT'
    async: true,
    //body: JSON.stringify({ text: base64data, id: "blob" }), 
    body: body,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    }
  }).then(res => res.json())

But it seems like fetch() doesnt like that Base 64 Body and gives me the Error: Error: SyntaxError: Unexpected token I in JSON at position 0

This also seems to happen when the body is reaching over 100.000bytes. Which is weird as it was working when I had other files that big.

The Base64 Data are being made from a .WAV file for voice recording.

Ahmed Ashour
  • 5,179
  • 10
  • 35
  • 56
Derek Haynes
  • 125
  • 1
  • 2
  • 13
  • It looks like you're not putting quotes around the base 64 string. – just.another.programmer Oct 15 '18 at 11:51
  • 4
    it sounds like your response isn't json – Daniel A. White Oct 15 '18 at 11:51
  • Inspect the response in your browser and ensure that it's a valid JSON. I agree with Daniel, it doesn't look like it's a valid JSON. – lloydaf Oct 15 '18 at 11:52
  • providing a capture of error stack trace might be useful – You Nguyen Oct 15 '18 at 11:54
  • The weird thing is, I really tried it but everythin below 97.000 Bytes works. This is the Stack trace: index.js:2178 Error: SyntaxError: Unexpected token I in JSON at position 0 __stack_frame_overlay_proxy_console__ @ index.js:2178 (anonymous) @ send.js:103 Promise.catch (async) reader.onloadend @ send.js:102 FileReader (async) sendRecording1 @ send.js:80 (anonymous) @ rtcspeech.js:41 (anonymous) – Derek Haynes Oct 15 '18 at 13:17

1 Answers1

0

I have faced this issue few weeks back not sure exactly what I did. try this and debug it will help.

 // .then(res => res.json()) // comment this out for now
  .then(res => res.text())          // convert to plain text
  .then(text => console.log(text))  // then log it out

https://daveceddia.com/unexpected-token-in-json-at-position-0/

Raphael
  • 1,738
  • 2
  • 27
  • 47