JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.7.1/localforage.js"></script>
<form id='file-catcher'>
    <input id='file-input' type='file' multiple/>
    <button type='submit'>
    Submit
  </button>
</form>

<div id='file-list-display'></div>

JavaScript

(function() {
    var fileCatcher = document.getElementById('file-catcher');
    var fileInput = document.getElementById('file-input');
    var fileListDisplay = document.getElementById('file-list-display');

    var fileList = [];
    var reloadFiles, renderFileList, sendFile;

    localforage.config({
        driver: localforage.INDEXEDDB, // Force WebSQL; same as using setDriver()
        name: 'fileList',
        version: 1,
        storeName: 'keyvaluepairs', // Should be alphanumeric, with underscores.
        description: 'storage for fileList'
    });

    reloadFiles = function() {
        localforage.ready(function(err) {
            if (!err && localforage.getItem("fileList")) {
                localforage.getItem("fileList").then(function(value) {
                    if (value) {
                        fileList = value;

                        renderFileList();
                    }
                })
            }
        });
    };

    fileCatcher.addEventListener('submit', function(evnt) {
        evnt.preventDefault();
        fileList.forEach(function(file) {
            sendFile(file);
        });
    });

    fileInput.addEventListener('change', function(evnt) {
        // fileList = [];
        for (var i = 0; i < fileInput.files.length; i++) {
        	// check if file already in list
        	var matching = fileList.filter(function(f) { 
            
            	// compare file name and size
                return (
                    (f.name == fileInput.files[i].name) && 
                    (f.size === fileInput.files[i].size)
                )
            });
            // when the file isnt in the list push it
            if (matching.length === 0) {
                fileList.push(fileInput.files[i]);
            }
        }
        // save file to localForage
        localforage.setItem("fileList", fileList).then(function(err, value) {
            console.log(err)
        });
        renderFileList();
    });

    renderFileList =...