How to dynamically create downloadable link from user uploaded files (disregarding file types) without calling server?

Question

HTML:

<input id="browse" type="file" multiple>
<div id="preview"></div>

Javascript:

var elBrowse = document.getElementById("browse");
var elPreview = document.getElementById("preview");

function readFile(file) {
    //Create downloadable link and generate DOM elements.
    var fileName = file.name;
    elPreview.insertAdjacentHTML("beforeend", "<a>" + fileName + '</a>');
    elPreview.insertAdjacentHTML("beforeend", "<a>Delete</a><br>");
}

elBrowse.addEventListener("change", function () {
    var files = this.files;

    // Check for `files` (FileList) support and if contains at least one file:
    if (files && files[0]) {

        // Iterate over every File object in the FileList array
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            readFile(file);
        }
    }

});

I am facing a new requirement, but I don't have much experience in Javascript. Basically, I want users to be able to upload files by clicking the browse button and displays the files name with downloadable link. User can upload files of any type and be able to download the files back.

The whole process MUST not trigger the backend server and everything has to be done in javascript or JQuery. Could anyone help please? Thank you.

System and User interaction:

1. User uploads a file

2. System saves the file in javascript and displays the file name with downloadable link.

3. User delete it.

4. System removes it from DOM and javascript

5. User can repeat step 1-4. The whole process does not trigger the server at all.

6. Eventually, user submits all the files to the server by clicking somewhere else (This step is out of the scope of this post)

Answer 1

If you are using a modern browser then you can utilize the HTML5 FileReader. I've used it, but found an example more suited to your question here.

You can use the FileReader to read the files on the client side, and store in sessionStorage, localStorage, or even a variable. But the one caveat is that you'll probably run out of RAM because JavaScript's not really designed for retaining large BLOBs in RAM.

window.onload = function() {
  var fileInput = document.getElementById('fileInput');
  var fileDisplayArea = document.getElementById('fileDisplayArea');

  fileInput.addEventListener('change', function(e) {
   var file = fileInput.files[0];
   var textType = /text.*/;

   if (file.type.match(textType)) {
    var reader = new FileReader();

    reader.onload = function(e) {
     fileDisplayArea.innerText = reader.result;
    }

    reader.readAsText(file); 
   } else {
    fileDisplayArea.innerText = "File not supported!"
   }
  });
}

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
}

#page-wrapper {
  width: 600px;
  background: #FFF;
  padding: 1em;
  margin: 1em auto;
  min-height: 300px;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
 margin-top: 0;
}

img {
  max-width: 100%;
}

#fileDisplayArea {
  margin-top: 2em;
  width: 100%;
  overflow-x: auto;
}

<div id="page-wrapper">

  <h1>Text File Reader</h1>
  <div>
   Select a text file: 
   <input type="file" id="fileInput">
  </div>
  <pre id="fileDisplayArea"><pre>

 </div>