Displaying the list of selected files

In this task we can populate the <div> we created in order to display the list of files that have been selected for upload. We'll build a table where each row in the table lists a single file with information such as the filename and type.

Engage Thrusters

Directly after the init() method in uploader.js, add the following code:

Up.prototype.handleFiles = function() {
  
    var widget = this,
          container = widget.el.find("div.up-selected"),
          row = $("<tr/>"),
          cell = $("<td/>"),
          remove = $("<a/>", {
             href: "#"
          }),
    table;

    if (!container.find("table").length) {
        table = $("<table/>");

        var header = row.clone().appendTo(table),
              strings = widget.config.strings.tableHeadings;

        $.each(strings, function(i, string) {
                var cs = string.toLowerCase().replace(/\s/g, "_"),
                      newCell = cell.clone()
 ...