This post was originally published for Mozilla Hacks.
The desired future approach for storing things client-side in web browsers is utilizing IndexedDB. Here I’ll walk you through how to store images and files in IndexedDB and then present them through an ObjectURL.
The general approach
First, let’s talk about the steps we will go through to create an IndexedDB data base, save the file into it and then read it out and present in the page:
Create or open a database.
Create an objectStore (if it doesn’t already exist)
Retrieve an image file as a blob
Initiate a database transaction
Save that blob into the database
Read out that saved file and create an ObjectURL from it and set it as the src of an image element in the page
Creating the code
Let’s break down all parts of the code that we need to do this:
Create or open a 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”);
};
// Interim solution for Google Chrome to create an objectStore. Will be deprecated
if (db.setVersion) {
if (db.version != dbVersion) {
var setVersion = db.setVersion(dbVersion);
setVersion.onsuccess = function () {
createObjectStore(db);
getImageFile();
};
}
else {
getImageFile();
}
}
else {
getImageFile();
}
}
// For future use. Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
createObjectStore(event.target.result);
};
The intended way to use this is to have the onupgradeneeded event triggered when a database is created or gets a higher version number. This is currently only supported in Firefox, but will soon be in other web browsers. If the web browser doesn’t support this event, you can use the deprecated setVersion method and connect to its onsuccess event.
Create an objectStore (if it doesn’t already exist)
Here you create an ObjectStore that you will store your data – or in our case, files – and once created you don’t need to recreate it, just update its contents.
Retrieve an image file as a blob
This code gets the contents of a file as a blob directly. Currently that’s only supported in Firefox.
Once you have received the entire file, you send the blob to the function to store it in the database.
Initiate a database transaction
To start writing something to the database, you need to initiate a transaction with an objectStore name and the type of action you want to do – in this case read and write.
Save that blob into the database
Once the transaction is in place, you get a reference to the desired objectStore and then put your blob into it and give it a key.
Read out that saved file and create an ObjectURL from it and set it as the src of an image element in the page
Use the same transaction to get the image file you just stored, and then create an objectURL and set it to the src of an image in the page.
This could just as well, for instance, have been a JavaScript file that you attached to a script element, and then it would parse the JavaScript.
The complete code
So, here’s is the complete working code:
Web browser support
IndexedDB
Supported since long (a number of versions back) in Firefox and Google Chrome. Planned to be in IE10, unclear about Safari and Opera.
onupgradeneeded
Supported in latest Firefox. Planned to be in Google Chrome soon and hopefully IE10. Unclear about Safari and Opera.
Storing files in IndexedDB
Supported in Firefox 11 and later. Planned to be supported in Google Chrome. Hopefully IE10 will support it. Unclear about Safari and Opera.
XMLHttpRequest Level 2
Supported in Firefox and Google Chrome since long, Safari 5+ and planned to be in IE10 and Opera 12.
responseType “blob”
Currently only supported in Firefox. Will soon be in Google Chrome and is planned to be in IE10. Unclear about Safari and Opera.
Demo and code
I’ve put together a demo with IndexedDB and saving images and files in it where you can see it all in action. Make sure to use any Developer Tool to Inspect Element on the image to see the value of its src attribute. Also make sure to check the console.log messages to follow the actions.
The code for storing files in IndexedDB is also available on GitHub, so go play now!