I am working on a PWA project where I have created an IndexedDB and stored the images and videos in it. On the next reload of page, if image/video is available in IndexedDB, it should load it from there.

function fetchMedia(id) {
    var transaction = db.transaction(["media"]);
    var objectStore = transaction.objectStore("media");
    var request = objectStore.get(id);

    request.onerror = function(event) {
       console.log("Unable to retrieve daa from database!");
       return "";
    };

   request.onsuccess = function(event) {
       var imgFile = request.result;
       console.log(imgFile)
       var imgURL = window.URL.createObjectURL(imgFile);
       return imgURL;
   };
}

It always returns undefined. When I console.log the imgFile, it shows that it's there in the IndexedDB:

File in IndexedDB:

I have also tried this but no success yet:

var imgURL = window.URL.createObjectURL(new Blob(imgFile, {'type': 'application/octet-stream'}));

What's the correct approach to load the files from IndexedDB?