narusawa narusawa - 1 year ago 51
JSON Question

JSONifying a Blob file

I am trying to JSONify a blob file so that I can send it over AJAX requests. I have tried with the code below without any success. When I parse a JSONified file, I only get a different file with much smaller size.

function test(blob, cb) {

var fileReader = new FileReader()
fileReader.onloadend = function() {

// client
var arry = Array.from(new Uint8Array(fileReader.result))
var data = {data: arry }
var json = JSON.stringify(data)

// server
var parse = JSON.parse(json)
var arr =
var blob = new Blob([arr])

Answer Source

You can try to use FileReader.readAsDataURL() method, and send the data as base64 encoded string, and than decode it on the server side. Base64 string will be much smaller than json string representing an array.

Here is an example

function getBase64() {
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function () {
  	document.getElementById("result").value = reader.result;
  }, false);
  if (file) {
<input type="file" onchange="getBase64()" />
<textarea id="result"></textarea>