3

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>
BLESSING
  • 407
  • 1
  • 7
  • 17
  • Can you share an example of the data being stored, and the code that performs the storing of the data? What is the variable type of the videoFile variable (e.g. string, date, object, etc)? – Josh Dec 20 '18 at 16:26
  • @Josh, i have edited the post to add the js code for storing the data. VideoFile is an object variable.I am basically downloading and storing videos as blobs on the client. – BLESSING Dec 21 '18 at 09:00
  • Thanks, that should help someone answer your question. Complete guess, but something about the id property together with blob storage, not sure if that works. – Josh Dec 21 '18 at 15:34
  • @Josh, sorry for the late response. Let me look at that, thanks for the pointer. – BLESSING Jan 07 '19 at 07:10
  • Just to comment on this problem I had, the reason why i couldnt retrieve my video was because on getting the video, I had wrapped the key path id in double quotes yet its not a string, simply changing that solved my problem in case someone comes across the same issue – BLESSING Feb 27 '19 at 07:10

1 Answers1

1

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...}
BLESSING
  • 407
  • 1
  • 7
  • 17