JSFiddle - React, Tailwind, and code Playground

by beradrian

HTML

<input type="file" multiple id="f1"/>
<input type="file" multiple id="f2"/>
<button onclick="compare()">Compare</button>
<div id="result"></div>

JavaScript

function compareFiles(f1, f2) {
console.log(f1, f2);
	return f1 === f2;
}

function compare() {
	var files1 = document.getElementById("f1").files;
  var files2 = document.getElementById("f2").files;
  var s = "<table>";
  s += "<tr><th></th>";
  for (var j = 0, m = files2.length; j < m; j++) {
  	s += "<th>f2[" + j + "]</th>";
  }
  s += "</tr>";
  for (var i = 0, n = files1.length; i < n; i++) {
  	s += "<tr><th>f1[" + i + "]</th>";
	  for (var j = 0, m = files2.length; j < m; j++) {
    	s += "<td>" + (compareFiles(files1[i], files2[j]) ? "same" : "different") + "</td>";
  	}
    s += "</tr>";
  }
  s += "</table>";
  document.getElementById("result").innerHTML = s;
}