Getting error in indexeddbshim: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable

Question

I'm using the IndexedDBShim polyfill for iOS 7.1 (so underlying is WebSQL) and when I try to run it, I get:

"InvalidStateError: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable."

The code:

//Create and open the database
var request = indexedDB.open( "Videos", 1.1 );
var database;

request.onerror = function (event)
{
    console.log( "Unable to create storage for offline videos, an error occurred." );
    console.dir( event );
};

//On success we'll grab the database and store or load the videos
request.onsuccess = function (event)
{
    //Grab the database
    database = request.result;

    //Handle database error
    database.onerror = function (event)
    {
        console.log( "Unable to access storage, an error occurred." );
        console.dir( event );
    };

    downloadVideo();
}

//Create the database and object store
request.onupgradeneeded = function (event)
{
    //Create the video object store (event.target.result is the database)
    event.target.result.createObjectStore( "Videos" );
};

function downloadVideo()
{
    var blob;

    //Start the request
    var videoRequest = new XMLHttpRequest();

    //Get the Video file from the server.
    videoRequest.open( "GET", "videos/test.mp4", true );

    //It's a blob (for storing in database)
    videoRequest.responseType = "blob";

    //Listen for when it's done downloading the video data
    videoRequest.addEventListener(
        "load",
        function ()
        {
            //We got it
            if ( videoRequest.status === 200 )
            {
                //Get the data
                blob = videoRequest.response;

                //Start transaction for videos object store
                var transaction = database.transaction( [ "Videos" ], "readwrite" );

                //Store the video file
                var putRequest = transaction.objectStore( "Videos" ).put( blob, "savedVideo" );

                putRequest.onsuccess = function(e)
                {
                    console.log( "succes!" );
                    console.dir(e);
                }
            }

            //An error occurred
            else console.log( null, "Unable to save, as an error occurred." );
        },
        false
    );

    //Start the request
    videoRequest.send();
}

Answer 1

My first guess would be that you encounter this error because of how you are using the database variable. Try setting and opening the connection from within the body of the load callback, and then doing the database-related work within the body of the connection open callback.

Something like the following abbreviated code:

function downloadVideo(path) {
  console.log('Requesting video blob at %s', path);
  var vr = new XMLHttpRequest();
  vr.onload = onVideoDownload.bind(vr);
  vr.responseType = 'blob';
  vr.open('GET', path);
  vr.send();
}

function onVideoDownload(request) {
  console.log('Downloaded video blob, connecting to indexedDB');
  var video = request.response;
  var openRequest = indexedDB.open('Videos', 1);
  openRequest.onupgradeneeded = onUpgradeNeeded;
  openRequest.onsuccess = storeVideo.bind(openRequest, video);
}

function onUpgradeNeeded(event) {
  var database = event.target;
  database.createObjectStore('Videos');
}

function storeVideo(video, event) {
  console.log('Connected to indexedDB, storing a video');
  var database = event.target.result;
  var tx = database.transaction('Videos','readwrite');
  var videoStore = tx.objectStore('Videos');
  var putRequest = videoStore.put('blob', video);
  putRequest.onsuccess = onStoreVideo.bind(putRequest, video);
}

function onStoreVideo(video, event) {
  console.log('Successfully stored a video!');
}

downloadVideo('videos/test.mp4');

Answer 2

I was attempting to insert a blob into the database without encoding it in base64 first. As it was on iOS safari 7.1, the backing database is WebSQL which doesn't accept binary data.