javascriptindexeddbhtml5-appcache

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided


This is the js code for downloading the file and persisting to the database:

 <script type="text/javascript"> 
      (function () {        
 
 window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
                    window.mozIndexedDB || window.OIndexedDB || 
                    window.msIndexedDB;
                      
 var IDBTransaction = window.IDBTransaction || 
                      window.webkitIDBTransaction || 
                      window.OIDBTransaction || 
                      window.msIDBTransaction;
                        
 var dbVersion = 1.0; 
 var indexedDB = window.indexedDB;
 var dlStatusText = document.getElementById("fetchstatus");

 // Create/open database
 var request = indexedDB.open("Syafunda_Videos", dbVersion),
    db,
    createObjectStore = function (dataBase) {
        dataBase.createObjectStore("Videos",{ keyPath: "id", autoIncrement:true });
    },    

    getVideoFile = function () {
       var xhr = new XMLHttpRequest(),
       blob;
       // Get the Video file from the server.
       xhr.open("GET", "<?php echo $name ?>", true);     
       xhr.responseType = "blob";
       xhr.addEventListener("load", function () {
          if (xhr.status === 200) {
              blob = xhr.response;
              addVideoInDb(blob);
              dlStatusText.innerHTML = "DOWNLOAD COMPLETE: Video file downloaded.";
          }
          else {
              dlStatusText.innerHTML = "ERROR: Unable to download video.";
          }
        }, false);
        xhr.send();
    },

    addVideoInDb = function (blob) {
       var transaction = db.transaction(["Videos"], "readwrite");
       var add = transaction.objectStore("Videos").put(blob);
       //console.log(objectStore.autoIncrement);
  
    };


  request.onerror = function (event) {
      console.log("Error creating/accessing IndexedDB database");
  };

  request.onsuccess = function (event) {
      console.log("Success creating/accessing IndexedDB database");
      db = request.result;

      db.onerror = function (event) {
          console.log("Error creating/accessing IndexedDB database");
      };
       
      getVideoFile();
      
  }
   
  // For future use. Currently only in latest Firefox versions
  request.onupgradeneeded = function (event) {
      createObjectStore(event.target.result);
  };
    
})();</script>

I'm trying to retrieve files from indexedDB. I keep on getting that error in the console:This is the js code for retrieving files from the databas,this is where I am getting the error:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. at IDBRequest.transaction.objectStore.get.onsuccess)

Where am I going wrong? Here is a snippet of my JS code. Some pointers would be great:

<script type="text/javascript"> 

      (function () {
    // IndexedDB
    window.indexedDB = window.indexedDB || window.webkitIndexedDB || 
                       window.mozIndexedDB || window.OIndexedDB || 
                       window.msIndexedDB,
    IDBTransaction = window.IDBTransaction || 
                     window.webkitIDBTransaction ||
                     window.OIDBTransaction || window.msIDBTransaction,
    dbVersion = 1.0;
 
    var indexedDB = window.indexedDB;
 
    // Create/open database
    var request = indexedDB.open("Syafunda_Videos");
     
    request.onerror = function (event) {
        // Failed to Open the indexedDB database
    };
 
    request.onsuccess = function (event) {
        db = request.result;
         
        // Open a transaction to the database
        var transaction = db.transaction(["Videos"], "readwrite");
 
        //Retrieve the video file
        transaction.objectStore("Videos").get("2").onsuccess = 
        function (event) {        
          
        var videoFile = event.target.result;
        var URL = window.URL || window.webkitURL;
        var videoURL = URL.createObjectURL(videoFile);
      
       
        // Set video src to ObjectURL        
        var videoElement = document.getElementById("Video");
        videoElement.setAttribute("src", videoURL);
 
       var mimeDisplayElement = document.getElementById("vidMimeDisplay");
           mimeDisplayElement.innerHTML = videoFile.type;
        };
    }
})();

</script>


Solution

  • on getting the video,i changed: get("2") to get(2) like so

    //Retrieve the video file
            transaction.objectStore("Videos").get(2).onsuccess = 
            function (event) {  //code...}