23

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.

marionebl
  • 3,342
  • 20
  • 34
Ankit_Shah55
  • 799
  • 2
  • 9
  • 17

2 Answers2

6

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/

gafi
  • 12,113
  • 2
  • 30
  • 32
6

This is a debatable matter, but there are some lines we can draw here, I am quoting MDN here:

The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

so between file and blob, it's a matter of needed functionality (my preference is blob as it's a bit more handy).

now between blob and ArrayBuffer, this one is tricky, since it totally depends on what you need, ArrayBuffer is very helpful in some cases but it's a structured and it's a

fixed-length container for binary data

so your file size can make a huge difference.

another big point is, ArrayBuffer is in-memory, while blob can be any where, disk or memory, so with using blob you might be reducing over head a lot. so for your case, imho, blob wins.

now on a side note, I don't know what you are trying to do exactly, but storing the whole file in a db is not a good idea unless your target is indexing the whole file content and querying it, because, not all user devices can handle that type of overload, so, if you don't need the content, index the file names only, it saves time and storage space.

I hope this helps.

Labib Ismaiel
  • 1,240
  • 2
  • 11
  • 21
  • 2
    Let me explain. I will store small images upto 2.5 Mb and videos upto 16 Mb. It will be stored for only one week and max quota will be 50-75 Mb per user. – Ankit_Shah55 Aug 16 '15 at 12:21
  • 3
    first I don't know why I was down voted, please leave a comment explaining what you found wrong. back to the issue, use blob, don't use something else, 50Mb is a lot of memory overhead for a single tab for a long time, blob will give you option of using disc space which is way more feasible. – Labib Ismaiel Aug 16 '15 at 17:12
  • btw, check this one https://msdn.microsoft.com/en-us/library/hh779017(v=vs.85).aspx and there are a lot of more resources on MDN which might help you a lot – Labib Ismaiel Aug 16 '15 at 17:16
  • I have been storing and retrieving dataurl's. I don't understand what a blob actually is... ? – pollaris May 25 '17 at 19:16