JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.5.3/localforage.min.js"></script>
<div id="uploader">
<input type="file" id="inp" accept="video/mp4,video/quicktime">
<button id="store" disabled>store in db</button>
</div>
<div id="explorer">
<select id="sel">
<option>No file available</option>
</select>
<button id="remove_all">clear all db</button>
</div>
<div id="player">
</div>

JavaScript

let blobURIs = [];

function storeInDB(){
  if(inp.files.length){
  	store.textContent = 'storing in db...';
  	store.disabled = true;
	localforage.getItem('media')
	.then((mediaList) => {
		mediaList = mediaList || {};
		mediaList[inp.files[0].name] = getChunks(inp.files[0], 5000000);
	  	return localforage.setItem('media', mediaList)		
	})
    .then(onstoresuccess)
    .catch(onstorefailure);
  }
}
function onstoresuccess(e){
	console.log('successfully saved', e);
  	store.textContent = 'store in db';
	getFromDB();
}
function onstorefailure(e){
	console.log('problem saving', e);
}

function getFromDB(){
	localforage.getItem('media').then((mediaList = {}) => {
		mediaList = mediaList || {};
		window.mediaList = mediaList;
		sel.innerHTML = '';
		var filenames = Object.keys(mediaList);
		if(!filenames.length){
			sel.appendChild(new Option('No file available', ''));
			sel.onchange = null;
		}
		else{
			sel.appendChild(new Option('Please select a file', ''))
			filenames.forEach((fn, i) => sel.appendChild(new Option(fn, i)));
			sel.onchange = onfileselect;
		}
	})
	.catch(ongetfailure);
}
function ongetfailure(e){
	console.log('problem getting', e);
}

function onfileselect(evt){
	if(this.value === '' || !window.mediaList) return;
	const filename = Object.keys(mediaList)[this.value];
	const mediaObj = mediaList[filename];
	const blob = new Blob(mediaObj.chunks, {type: mediaObj.type});
	loadVid(blob);
}

function loadVid(blob){
	clearBlobURIs();
	const vid = document.createElement('video');
	vid.src = URL.createObjectURL(blob)
	blobURIs.push(vid.src);
	player.innerHTML = '';
	player.appendChild(vid);
	vid.controls = true;
}

function getChunks(blob, maxSize){
	const chunks = [];
	let total = 0;
	while(total < blob.size){
		chunks.push(blob.slice(total, (total+maxSize)));
		total += maxSize;
	}
	return {
		chunks: chunks,
		type: blob.type
	};
}

function clearBlobURIs(){
	blobURIs.forEach(function(uri){
		URL.revokeObjectURL(uri);
	});
	blobURIs.length =...