JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<form>
  <input type="file" id="file" multiple />
</form>

<ul id="results">

</ul>

JavaScript 1.7

const $fileUpload = $("#file");
const $results = $("#results");

$fileUpload.on("input", (e) => {
  const files = $(e.currentTarget)[0].files;

  $results.empty();

  $(files).each((i, file) => {
    const reader = new FileReader();
    const $fileResult = $("<li />");

    reader.onload = (e) => {
      const $link = $("<a>" + file.name + "</a>");
      $link.attr('href', e.target.result);

      $results.append($fileResult.append($link));
    }
    
    reader.readAsDataURL(file);
  })
})