IndexedDB: Store file as File or Blob or ArrayBuffer. What is the best option?

Question

Now most of browsers are supporting IndexedDB to store data/file directly as File, Blob or ArrayBuffer.

This code saves a IDB key 'File1' as File

<input type="file" id="userfile" />
var a = document.getElementById("userfile");
var b = a.files[0];

Now we can directly save this file to IDB using the following code

//LocalForage is a library for indexedDB developed by Mozilla
//Note: localforage._config.driver=asyncStorage (IDB method)
function run(){
  //"File1" = IDB data table key and b=value
  localforage.setItem("File1", b, function(err, value) {
    console.log(err)
  });
}

a.onchange = function(){
  run()
}

This code saves a IDB key 'BlobFile' as Blob

mb = new Blob([b],{type:b.type});

function runB(){
  localforage.setItem("BlobFile", mb, function(err, value){
    console.log(err)
  });    
}

a.onchange = function(){
  runB()
}

I want to know what is the best practice to store the file to IDB. (File/Blob/ArrayBuffer)

The files could be images or very small size videos.

Answer 1

I recommend using Blob for images & videos as the API is fairly straightforward for downloading as blob and saving to db, as well as retrieving from db and creating URL for src attribute

Check this sample here for implementation https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/