Skip to content

Instantly share code, notes, and snippets.

@robnyman

robnyman/blob-filereader-localStorage.js

Last active May 21, 2025 16:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save robnyman/1875344 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save robnyman/1875344 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. robnyman revised this gist Feb 8, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions blob-filereader-localStorage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,12 +6,12 @@ if (rhinoStorage) {
    rhino.setAttribute("src", rhinoStorage);
    }
    else {
    // Create XHR, BlobBuilder and FileReader objects
    // Create XHR and FileReader objects
    var xhr = new XMLHttpRequest(),
    fileReader = new FileReader();

    xhr.open("GET", "rhino.png", true);
    // Set the responseType to arraybuffer. "blob" is an option too, rendering BlobBuilder unnecessary, but the support for "blob" is not widespread enough yet
    // Set the responseType to blob
    xhr.responseType = "blob";

    xhr.addEventListener("load", function () {
  2. robnyman revised this gist Feb 21, 2012. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion blob-filereader-localStorage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,12 @@ else {
    // Set image src to Data URL
    rhino.setAttribute("src", result);
    // Store Data URL in localStorage
    localStorage.setItem("rhino", result);
    try {
    localStorage.setItem("rhino", result);
    }
    catch (e) {
    console.log("Storage failed: " + e);
    }
    };
    // Load blob as Data URL
    fileReader.readAsDataURL(xhr.response);
  3. robnyman created this gist Feb 21, 2012.
    34 changes: 34 additions & 0 deletions blob-filereader-localStorage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    // Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
    var rhinoStorage = localStorage.getItem("rhino"),
    rhino = document.getElementById("rhino");
    if (rhinoStorage) {
    // Reuse existing Data URL from localStorage
    rhino.setAttribute("src", rhinoStorage);
    }
    else {
    // Create XHR, BlobBuilder and FileReader objects
    var xhr = new XMLHttpRequest(),
    fileReader = new FileReader();

    xhr.open("GET", "rhino.png", true);
    // Set the responseType to arraybuffer. "blob" is an option too, rendering BlobBuilder unnecessary, but the support for "blob" is not widespread enough yet
    xhr.responseType = "blob";

    xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
    // onload needed since Google Chrome doesn't support addEventListener for FileReader
    fileReader.onload = function (evt) {
    // Read out file contents as a Data URL
    var result = evt.target.result;
    // Set image src to Data URL
    rhino.setAttribute("src", result);
    // Store Data URL in localStorage
    localStorage.setItem("rhino", result);
    };
    // Load blob as Data URL
    fileReader.readAsDataURL(xhr.response);
    }
    }, false);
    // Send XHR
    xhr.send();
    }