CODEWITHSUNDEEP
javascriptfileblob
carloss medranoo
carloss medranoo

Reputation: 1489

Create a file with data ur

I have something like this.

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACkCAYAAAAZtYVBAAAgAElEQ…TFHIWRhe2sii/S5zA+N/ZF6gI+RiSKspPUBiI1UQf9/wDVxYvlSggfZqgAAAABJRU5Erkaa==="

Is there a way to create a file object? with this?

i see the method URL.createObjectURl but it seems like a need to create a blobl object and i dont really know how.

Upvotes: 0

Views: 117

Answers (1)

George Reith
George Reith

Reputation: 13476

The following function will convert a data URI to a blob.

function dataURIToBlob(dataURI) {
  // Split the dataUri up into parts
  // data:[<mediatype>][;<charset>],(data)
  var parts = /data:([^;]+)(?:;([^,]+))?,(.+)/.exec(dataURI),
      mime        = parts[1],
      charset     = parts[2] || 'charset=US-ASCII',
      encodedData = parts[3];

  var data;
  if (charset === 'base64') {
    // If base64 convert to a Uint8 clamped array of character codes
    var decodedData = atob(encodedData);
    data = new Uint8Array(decodedData.length);
    for (var i = 0; i < decodedData.length; i++) {
      data[i] = decodedData.charCodeAt(i);
    }
  } else {
    data = decodeURIComponent(encodedData);
  }

  return new Blob([data], {
    type: mime
  });
}

You can see it working in this snippet which takes a data URI, converts it into a blob, then creates a blob URI that you can use to access the file. A sample image and CSV file is provided.

testData = {};
testData['image/gif'] = 'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7';
testData['text/csv'] = 'data:text/csv;charset=utf-8,ID%2CScore%2CAssignee%2CCreated%2CComment%0Aid_value0%2Cscore_value0%2Cassignee_value0%2Ccreated_value0%2Ccomment_value0%0Aid_value1%2Cscore_value1%2Cassignee_value1%2Ccreated_value1%2Ccomment_value1%0Aid_value2%2Cscore_value2%2Cassignee_value2%2Ccreated_value2%2Ccomment_value2%0A';

function dataURIToBlob(dataURI) {
  // Split the dataUri up into parts
  // data:[<mediatype>][;<charset>],(data)
  var parts = /data:([^;]+)(?:;([^,]+))?,(.+)/.exec(dataURI),
      mime        = parts[1],
      charset     = parts[2] || 'charset=US-ASCII',
      encodedData = parts[3];
  
  var data;
  if (charset === 'base64') {
    // If base64 convert to a Uint8 clamped array of character codes
    var decodedData = atob(encodedData);
    data = new Uint8Array(decodedData.length);
    for (var i = 0; i < decodedData.length; i++) {
      data[i] = decodedData.charCodeAt(i);
    }
  } else {
    data = decodeURIComponent(encodedData);
  }
  
  return new Blob([data], {
    type: mime
  });
}

function createBlobURI() {
  var blob = dataURIToBlob(dataURIInput.value);
  var blobURI = URL.createObjectURL(blob);
  blobURIAnchor.href = blobURI;
  blobURIAnchor.innerHTML = blobURI;
  blobURIAnchor.style.display = 'block';
  blobURIAnchor.download = 'blob.' + blob.type.split('/')[1];
}

function insertTestData(mime) {
  dataURIInput.value = testData[mime];
}

insertTestData('image/gif');
<button onclick="insertTestData('image/gif')">Image test</button>
<button onclick="insertTestData('text/csv')">CSV test</button>
<input id="dataURIInput" type="text"/>
<button onclick='createBlobURI()'>Create blob URI</button>
<a id="blobURIAnchor" href="#" style="display:none"></a>

Upvotes: 1

Related Questions