JavaScript – How to Add Files to HTML File Input Field Without Replacing

htmljavascript

I'm trying to create a Html file input field which can add multiple files to the form, instead of replacing existing chosen files.

This is the basic file input element for uploading multiple files:

<input type="file" id="fileupload" multiple>

But it replaces previously chosen files 🙁

I can't believe that html doesn't have a built-in functionality for adding multiple files, but all solutions i have seen so far involve adding some external library which is not ideal.

Best Answer

I think this is question for SO.

The file field, multiple or not, will always replace the previous selection. What you have to do is store the selection somewhere else each time user selects a file.

The file field has a property files, which contains a FileList object, which is basically a list of File objects, each one with some properties like name, type and size.

If you listen to the change event, you could just add the files just selected to your own variable and even present them to the user and allow him to remove a file. You could immediately start uploading the files via AJAX or submit all files when the form is submitted.

See:

https://www.w3.org/TR/FileAPI/#dfn-filelist

https://stackoverflow.com/questions/16742956/file-field-append-file-list

Related Solutions

Creating Static HTML Files with Sortable and Filterable Tables

You can't. You need one of three things to change HTML structure semantically

JavaScript, event handlers and dom manipulation
Forms, servers and postbacks to change the page and send a new one
CSS hackery, things like remodelling the CSS based on the :active state or manipulate checkboxes :checked state.

In theory it's possible to implement this with HTML and CSS alone but that's going to a be a nightmare.

Why don't you just add a link to a google document with a sortable table in it, in your email.

Of course using JavaScript to implement a sortable table isn't hard.

table.addEventListener("click", function (ev) {
  if (ev.target.tagName === "th") {
    sortTable(ev.target);
  }
});

form.addEventListener("change", function (ev) {
  applyFilters(ev);
});

Just implement sortTable and applyFilters

Why Not Embed Styles/Scripts in HTML Instead of Linking?

Because saving HTTP requests is of little use when you achieve it by breaking caching. If the stylesheets and scripts are served separately, they can be cached very well and amortized over many, many requests to wildly different pages. If they're mushed in the same HTML page, they have to be re-transmitted with every. Single. Request.

This page's HTML, for example is 13 KB right now. The 180 KB of CSS hit the cache, and so did the 360 KB of JS. Both cache hits took minuscle amounts of time and consumed practically no bandwidth. Whip out your browser's network profiler and try it on some other sites.

Best Answer

Related Solutions

Creating Static HTML Files with Sortable and Filterable Tables

Why Not Embed Styles/Scripts in HTML Instead of Linking?

Related Topic