Fetch and Store files with IndexedDB

Question

I need to download a list of files and store them locally with IndexedDB. I am using fetch to retrieve the files as follows:

cacheRecordings() {
      var request = window.indexedDB.open("database", 2);

      request.onsuccess = event => {
          var database = event.target.result;
          var transaction = database.transaction(["store"], 'readwrite'); //second step is opening the object store
          this.objectStore = transaction.objectStore("store");      
      }

      for (const url of this.urls) {
        fetch(url)
          .then(resp => resp.blob())
          .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const index = this.objectStore.index('path');
            index.openCursor().onsuccess = function(event) { <-- Error is thrown here
              this.objectStore.add(url, path);
            }.bind(this)
          })
          .catch((error) => {
            console.log(error)
          })
      } 
}

The above code results in the following two errors:

Failed to execute 'openCursor' on 'IDBIndex': The transaction is not active.

Failed to execute 'index' on 'IDBObjectStore': The transaction has finished

How do I store the fetched files using IndexedDB?

I found a relevant question - but it does NOT address my use case of fetched files. TransactionInactiveError: Failed to execute 'add' on 'IDBObjectStore': The transaction is not active

Answer 1

My guess is that this happens because you are performing an async operation (the fetch) within a sync loop (the for)

To confirm this try storing a single file in the db without the loop. If that's successful, look into executing acync code within a loop