From 60a183581381359bbb6beb6ced6077a98c0fea18 Mon Sep 17 00:00:00 2001
From: Thomas Piccirello <thomas@piccirello.com>
Date: Fri, 26 Jul 2019 02:06:45 -0700
Subject: [PATCH] Display files hierarchically in Web UI content tab

---
 src/webui/www/private/css/style.css           |  42 +-
 src/webui/www/private/index.html              |   4 +-
 src/webui/www/private/properties.html         |   3 +
 src/webui/www/private/scripts/client.js       |  13 +
 src/webui/www/private/scripts/dynamicTable.js | 293 +++++++++-
 src/webui/www/private/scripts/file-tree.js    | 176 ++++++
 src/webui/www/private/scripts/filesystem.js   |  61 +++
 src/webui/www/private/scripts/prop-files.js   | 503 ++++++++++++++----
 src/webui/www/webui.qrc                       |   2 +
 9 files changed, 979 insertions(+), 118 deletions(-)
 create mode 100644 src/webui/www/private/scripts/file-tree.js
 create mode 100644 src/webui/www/private/scripts/filesystem.js

diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index b625af7ab..ee027d3d1 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -352,7 +352,6 @@ a.propButton img {
 #torrentsFilterToolbar {
     float: right;
     margin-right: 30px;
-    margin-right: 30px;
 }
 
 #torrentsFilterInput {
@@ -364,6 +363,20 @@ a.propButton img {
     background-position: left;
 }
 
+#torrentFilesFilterToolbar {
+    float: right;
+    margin-right: 30px;
+}
+
+#torrentFilesFilterInput {
+    width: 160px;
+    padding-left: 2em;
+    background-image: url("../images/qbt-theme/edit-find.svg");
+    background-repeat: no-repeat;
+    background-size: 1.5em;
+    background-position: left;
+}
+
 /* Tri-state checkbox */
 
 label.tristate {
@@ -470,6 +483,19 @@ td.generalLabel {
     line-height: 25px;
 }
 
+.filesTableCollapseIcon {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    margin-bottom: -3px;
+    padding-right: 5px;
+}
+
+.filesTableCollapseIcon.rotate {
+    transform: rotate(270deg);
+    margin-bottom: -1px;
+}
+
 .unselectable {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -596,3 +622,17 @@ td.statusBarSeparator {
 .searchPluginsTableRow {
     cursor: pointer;
 }
+
+#torrentFilesTableDiv .dynamicTable tr.nonAlt {
+    background-color: #fff;
+}
+
+#torrentFilesTableDiv .dynamicTable tr.nonAlt.selected {
+    background-color: #354158;
+    color: #fff;
+}
+
+#torrentFilesTableDiv .dynamicTable tr.nonAlt:hover {
+    background-color: #ee6600;
+    color: #fff;
+}
diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
index 89fc2c68e..fe430ec1d 100644
--- a/src/webui/www/private/index.html
+++ b/src/webui/www/private/index.html
@@ -21,8 +21,10 @@
     <script src="scripts/lib/mocha-0.9.6-yc.js"></script>
     <script src="scripts/mocha-init.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/lib/clipboard-2.0.0.min.js"></script>
+    <script src="scripts/filesystem.js?v=${CACHEID}"></script>
     <script src="scripts/misc.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/progressbar.js?v=${CACHEID}"></script>
+    <script src="scripts/file-tree.js?v=${CACHEID}"></script>
     <script src="scripts/dynamicTable.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/client.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/contextmenu.js?locale=${LANG}&v=${CACHEID}"></script>
@@ -189,7 +191,7 @@
         <li><a href="#CopyTrackerUrl" id="CopyTrackerUrl"><img src="images/qbt-theme/edit-copy.svg" alt="QBT_TR(Copy tracker URL)QBT_TR[CONTEXT=TrackerListWidget]"/> QBT_TR(Copy tracker URL)QBT_TR[CONTEXT=TrackerListWidget]</a></li>
     </ul>
     <ul id="torrentFilesMenu" class="contextMenu">
-        <li class="separator">
+        <li>
             <a href="#FilePrio" class="arrow-right"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Priority)QBT_TR[CONTEXT=PropertiesWidget]</a>
             <ul>
                 <li><a href="#FilePrioIgnore"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Do not download)QBT_TR[CONTEXT=PropListDelegate]</a></li>
diff --git a/src/webui/www/private/properties.html b/src/webui/www/private/properties.html
index 66486e917..789dc320e 100644
--- a/src/webui/www/private/properties.html
+++ b/src/webui/www/private/properties.html
@@ -1,4 +1,7 @@
 <div class="toolbarTabs">
+	<div id="torrentFilesFilterToolbar" class="invisible">
+	    <input type="text" id="torrentFilesFilterInput" placeholder="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" autocorrect="off" autocapitalize="none" />
+	</div>
     <ul id="propertiesTabs" class="tab-menu">
         <li id="PropGeneralLink" class="selected"><a>QBT_TR(General)QBT_TR[CONTEXT=PropTabBar]</a></li>
         <li id="PropTrackersLink"><a>QBT_TR(Trackers)QBT_TR[CONTEXT=PropTabBar]</a></li>
diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js
index f1dba3980..16ed90d05 100644
--- a/src/webui/www/private/scripts/client.js
+++ b/src/webui/www/private/scripts/client.js
@@ -887,6 +887,7 @@ window.addEvent('load', function() {
             $('PropGeneralLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_general').removeClass("invisible");
+                hideFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
@@ -894,6 +895,7 @@ window.addEvent('load', function() {
             $('PropTrackersLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_trackers').removeClass("invisible");
+                hideFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
@@ -901,6 +903,7 @@ window.addEvent('load', function() {
             $('PropPeersLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_peers').removeClass("invisible");
+                hideFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
@@ -908,6 +911,7 @@ window.addEvent('load', function() {
             $('PropWebSeedsLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_webseeds').removeClass("invisible");
+                hideFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
@@ -915,6 +919,7 @@ window.addEvent('load', function() {
             $('PropFilesLink').addEvent('click', function(e) {
                 $$('.propertiesTabContent').addClass('invisible');
                 $('prop_files').removeClass("invisible");
+                showFilesFilter();
                 updatePropertiesPanel();
                 localStorage.setItem('selected_tab', this.id);
             });
@@ -927,6 +932,14 @@ window.addEvent('load', function() {
         height: prop_h
     });
 
+    const showFilesFilter = function() {
+        $('torrentFilesFilterToolbar').removeClass("invisible");
+    };
+
+    const hideFilesFilter = function() {
+        $('torrentFilesFilterToolbar').addClass("invisible");
+    };
+
     let prevTorrentsFilterValue;
     let torrentsFilterInputTimer = null;
     // listen for changes to torrentsFilterInput
diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js
index e4faa17c2..78d0d5baf 100644
--- a/src/webui/www/private/scripts/dynamicTable.js
+++ b/src/webui/www/private/scripts/dynamicTable.js
@@ -468,7 +468,7 @@ const DynamicTable = new Class({
         }
         else {
             // Toggle sort order
-            this.reverseSort = this.reverseSort == '0' ? '1' : '0';
+            this.reverseSort = this.reverseSort === '0' ? '1' : '0';
             this.setSortedColumnIcon(column, null, (this.reverseSort === '1'));
         }
         localStorage.setItem('sorted_column_' + this.dynamicTableDivId, column);
@@ -627,7 +627,7 @@ const DynamicTable = new Class({
         filteredRows.sort(function(row1, row2) {
             const column = this.columns[this.sortedColumn];
             const res = column.compareRows(row1, row2);
-            if (this.reverseSort == '0')
+            if (this.reverseSort === '0')
                 return res;
             else
                 return -res;
@@ -883,19 +883,20 @@ const TorrentsTable = new Class({
 
             const img_path = 'images/skin/' + state + '.svg';
 
-            if (td.getChildren('img').length) {
+            if (td.getChildren('img').length > 0) {
                 const img = td.getChildren('img')[0];
                 if (img.src.indexOf(img_path) < 0) {
                     img.set('src', img_path);
                     img.set('title', state);
                 }
             }
-            else
+            else {
                 td.adopt(new Element('img', {
                     'src': img_path,
                     'class': 'stateIcon',
                     'title': state
                 }));
+            }
         };
 
         // status
@@ -1008,7 +1009,7 @@ const TorrentsTable = new Class({
             if (progressFormated == 100.0 && progress != 1.0)
                 progressFormated = 99.9;
 
-            if (td.getChildren('div').length) {
+            if (td.getChildren('div').length > 0) {
                 const div = td.getChildren('div')[0];
                 if (td.resized) {
                     td.resized = false;
@@ -1314,7 +1315,7 @@ const TorrentsTable = new Class({
         filteredRows.sort(function(row1, row2) {
             const column = this.columns[this.sortedColumn];
             const res = column.compareRows(row1, row2);
-            if (this.reverseSort == '0')
+            if (this.reverseSort === '0')
                 return res;
             else
                 return -res;
@@ -1379,14 +1380,14 @@ const TorrentPeersTable = new Class({
             const country_code = this.getRowValue(row, 1);
 
             if (!country_code) {
-                if (td.getChildren('img').length)
+                if (td.getChildren('img').length > 0)
                     td.getChildren('img')[0].dispose();
                 return;
             }
 
             const img_path = 'images/flags/' + country_code + '.svg';
 
-            if (td.getChildren('img').length) {
+            if (td.getChildren('img').length > 0) {
                 const img = td.getChildren('img')[0];
                 img.set('src', img_path);
                 img.set('class', 'flags');
@@ -1566,12 +1567,12 @@ const SearchResultsTable = new Class({
         const seedsFilters = getSeedsFilters();
         const searchInTorrentName = $('searchInTorrentName').get('value') === "names";
 
-        if (searchInTorrentName || filterTerms.length || (searchSizeFilter.min > 0.00) || (searchSizeFilter.max > 0.00)) {
+        if (searchInTorrentName || (filterTerms.length > 0) || (searchSizeFilter.min > 0.00) || (searchSizeFilter.max > 0.00)) {
             for (let i = 0; i < rows.length; ++i) {
                 const row = rows[i];
 
                 if (searchInTorrentName && !containsAll(row.full_data.fileName, searchTerms)) continue;
-                if (filterTerms.length && !containsAll(row.full_data.fileName, filterTerms)) continue;
+                if ((filterTerms.length > 0) && !containsAll(row.full_data.fileName, filterTerms)) continue;
                 if ((sizeFilters.min > 0.00) && (row.full_data.fileSize < sizeFilters.min)) continue;
                 if ((sizeFilters.max > 0.00) && (row.full_data.fileSize > sizeFilters.max)) continue;
                 if ((seedsFilters.min > 0) && (row.full_data.nbSeeders < seedsFilters.min)) continue;
@@ -1587,7 +1588,7 @@ const SearchResultsTable = new Class({
         filteredRows.sort(function(row1, row2) {
             const column = this.columns[this.sortedColumn];
             const res = column.compareRows(row1, row2);
-            if (this.reverseSort == '0')
+            if (this.reverseSort === '0')
                 return res;
             else
                 return -res;
@@ -1663,6 +1664,65 @@ const TorrentTrackersTable = new Class({
 const TorrentFilesTable = new Class({
     Extends: DynamicTable,
 
+    filterTerms: [],
+    prevFilterTerms: [],
+    prevRowsString: null,
+    prevFilteredRows: [],
+    prevSortedColumn: null,
+    prevReverseSort: null,
+    fileTree: new FileTree(),
+
+    populateTable: function(root) {
+        this.fileTree.setRoot(root);
+        root.children.each(function(node) {
+            this._addNodeToTable(node, 0);
+        }.bind(this));
+    },
+
+    _addNodeToTable: function(node, depth) {
+        node.depth = depth;
+
+        if (node.isFolder) {
+            const data = {
+                rowId: node.rowId,
+                size: node.size,
+                checked: node.checked,
+                remaining: node.remaining,
+                progress: node.progress,
+                priority: normalizePriority(node.priority),
+                availability: node.availability,
+                fileId: -1,
+                name: node.name
+            };
+
+            node.data = data;
+            node.full_data = data;
+            this.updateRowData(data);
+        }
+        else {
+            node.data.rowId = node.rowId;
+            node.full_data = node.data;
+            this.updateRowData(node.data);
+        }
+
+        node.children.each(function(child) {
+            this._addNodeToTable(child, depth + 1);
+        }.bind(this));
+    },
+
+    getRoot: function() {
+        return this.fileTree.getRoot();
+    },
+
+    getNode: function(rowId) {
+        return this.fileTree.getNode(rowId);
+    },
+
+    getRow: function(node) {
+        const rowId = this.fileTree.getRowId(node);
+        return this.rows.get(rowId);
+    },
+
     initColumns: function() {
         this.newColumn('checked', '', '', 50, true);
         this.newColumn('name', '', 'QBT_TR(Name)QBT_TR[CONTEXT=TrackerListWidget]', 300, true);
@@ -1676,6 +1736,7 @@ const TorrentFilesTable = new Class({
     },
 
     initColumnsFunctions: function() {
+        const that = this;
         const displaySize = function(td, row) {
             const size = friendlyUnit(this.getRowValue(row), false);
             td.set('html', size);
@@ -1687,6 +1748,60 @@ const TorrentFilesTable = new Class({
             td.set('title', value);
         };
 
+        this.columns['name'].updateTd = function(td, row) {
+            const id = row.rowId;
+            const fileNameId = 'filesTablefileName' + id;
+            const node = that.getNode(id);
+
+            if (node.isFolder) {
+                const value = this.getRowValue(row);
+                const collapseIconId = 'filesTableCollapseIcon' + id;
+                const dirImgId = 'filesTableDirImg' + id;
+                if ($(dirImgId)) {
+                    // just update file name
+                    $(fileNameId).textContent = escapeHtml(value);
+                }
+                else {
+                    const collapseIcon = new Element('img', {
+                        src: 'images/qbt-theme/go-down.svg',
+                        styles: {
+                            'margin-left': (node.depth * 20)
+                        },
+                        class: "filesTableCollapseIcon",
+                        id: collapseIconId,
+                        "data-id": id,
+                        onclick: "collapseIconClicked(this)"
+                    });
+                    const span = new Element('span', {
+                        text: escapeHtml(value),
+                        id: fileNameId
+                    });
+                    const dirImg = new Element('img', {
+                        src: 'images/qbt-theme/inode-directory.svg',
+                        styles: {
+                            'width': 15,
+                            'padding-right': 5,
+                            'margin-bottom': -3
+                        },
+                        id: dirImgId
+                    });
+                    const html = collapseIcon.outerHTML + dirImg.outerHTML + span.outerHTML;
+                    td.set('html', html);
+                }
+            }
+            else {
+                const value = this.getRowValue(row);
+                const span = new Element('span', {
+                    text: escapeHtml(value),
+                    id: fileNameId,
+                    styles: {
+                        'margin-left': ((node.depth + 1) * 20)
+                    }
+                });
+                td.set('html', span.outerHTML);
+            }
+        };
+
         this.columns['checked'].updateTd = function(td, row) {
             const id = row.rowId;
             const value = this.getRowValue(row);
@@ -1697,9 +1812,11 @@ const TorrentFilesTable = new Class({
             else {
                 const treeImg = new Element('img', {
                     src: 'images/L.gif',
-                    style: 'margin-bottom: -2px'
+                    styles: {
+                        'margin-bottom': -2
+                    }
                 });
-                td.adopt(treeImg, createDownloadCheckbox(row.rowId, value));
+                td.adopt(treeImg, createDownloadCheckbox(id, row.full_data.fileId, value));
             }
         };
 
@@ -1712,8 +1829,8 @@ const TorrentFilesTable = new Class({
             const progressBar = $('pbf_' + id);
             if (progressBar === null) {
                 td.adopt(new ProgressBar(value.toFloat(), {
-                    'id': 'pbf_' + id,
-                    'width': 80
+                    id: 'pbf_' + id,
+                    width: 80
                 }));
             }
             else {
@@ -1728,11 +1845,155 @@ const TorrentFilesTable = new Class({
             if (isPriorityComboExists(id))
                 updatePriorityCombo(id, value);
             else
-                td.adopt(createPriorityCombo(id, value));
+                td.adopt(createPriorityCombo(id, row.full_data.fileId, value));
         };
 
         this.columns['remaining'].updateTd = displaySize;
         this.columns['availability'].updateTd = displayPercentage;
+    },
+
+    altRow: function() {
+        let addClass = false;
+        const trs = this.tableBody.getElements('tr');
+        trs.each(function(tr) {
+            if (tr.hasClass("invisible"))
+                return;
+
+            if (addClass){
+                tr.addClass("alt");
+                tr.removeClass("nonAlt");
+            }
+            else {
+                tr.removeClass("alt");
+                tr.addClass("nonAlt");
+            }
+            addClass = !addClass;
+        }.bind(this));
+    },
+
+    _sortNodesByColumn: function(nodes, column) {
+        nodes.sort(function(row1, row2) {
+            // list folders before files when sorting by name
+            if (column.name === "name") {
+                const node1 = this.getNode(row1.data.rowId);
+                const node2 = this.getNode(row2.data.rowId);
+                if (node1.isFolder && !node2.isFolder)
+                    return -1;
+                if (node2.isFolder && !node1.isFolder)
+                    return 1;
+            }
+
+            const res = column.compareRows(row1, row2);
+            return (this.reverseSort === '0') ? res : -res;
+        }.bind(this));
+
+        nodes.each(function(node) {
+            if (node.children.length > 0)
+                this._sortNodesByColumn(node.children, column);
+        }.bind(this));
+    },
+
+    _filterNodes: function(node, filterTerms, filteredRows) {
+        if (node.isFolder) {
+            const childAdded = node.children.reduce(function (acc, child) {
+                // we must execute the function before ORing w/ acc or we'll stop checking child nodes after the first successful match
+                return (this._filterNodes(child, filterTerms, filteredRows) || acc);
+            }.bind(this), false);
+
+            if (childAdded) {
+                const row = this.getRow(node);
+                filteredRows.push(row);
+                return true;
+            }
+        }
+
+        const lowercaseName = node.name.toLowerCase();
+        const matchesFilter = filterTerms.every(function(term) {
+            return (lowercaseName.indexOf(term) !== -1);
+        });
+
+        if (matchesFilter) {
+            const row = this.getRow(node);
+            filteredRows.push(row);
+            return true;
+        }
+
+        return false;
+    },
+
+    setFilter: function(text) {
+        const filterTerms = text.trim().toLowerCase().split(' ');
+        if ((filterTerms.length === 1) && (filterTerms[0] === ''))
+            this.filterTerms = [];
+        else
+            this.filterTerms = filterTerms;
+    },
+
+    getFilteredAndSortedRows: function() {
+        if (this.getRoot() === null)
+            return [];
+
+        const generateRowsSignature = function(rows) {
+            const rowsData = rows.map(function(row) {
+                return row.full_data;
+            });
+            return JSON.stringify(rowsData);
+        };
+
+        const getFilteredRows = function() {
+            if (this.filterTerms.length === 0) {
+                const nodeArray = this.fileTree.toArray();
+                const filteredRows = nodeArray.map(function(node) {
+                    return this.getRow(node);
+                }.bind(this));
+                return filteredRows;
+            }
+
+            const filteredRows = [];
+            this.getRoot().children.each(function(child) {
+                this._filterNodes(child, this.filterTerms, filteredRows);
+            }.bind(this));
+            filteredRows.reverse();
+            return filteredRows;
+        }.bind(this);
+
+        const hasRowsChanged = function(rowsString, prevRowsStringString) {
+            const rowsChanged = (rowsString !== prevRowsStringString);
+            const isFilterTermsChanged = this.filterTerms.reduce(function(acc, term, index) {
+                return (acc || (term !== this.prevFilterTerms[index]));
+            }.bind(this), false);
+            const isFilterChanged = ((this.filterTerms.length !== this.prevFilterTerms.length)
+                || ((this.filterTerms.length > 0) && isFilterTermsChanged));
+            const isSortedColumnChanged = (this.prevSortedColumn !== this.sortedColumn);
+            const isReverseSortChanged = (this.prevReverseSort !== this.reverseSort);
+
+            return (rowsChanged || isFilterChanged || isSortedColumnChanged || isReverseSortChanged);
+        }.bind(this);
+
+        const rowsString = generateRowsSignature(this.rows);
+        if (!hasRowsChanged(rowsString, this.prevRowsString)) {
+            return this.prevFilteredRows;
+        }
+
+        // sort, then filter
+        const column = this.columns[this.sortedColumn];
+        this._sortNodesByColumn(this.getRoot().children, column);
+        const filteredRows = getFilteredRows();
+
+        this.prevFilterTerms = this.filterTerms;
+        this.prevRowsString = rowsString;
+        this.prevFilteredRows = filteredRows;
+        this.prevSortedColumn = this.sortedColumn;
+        this.prevReverseSort = this.reverseSort;
+        return filteredRows;
+    },
+
+    setIgnored: function(rowId, ignore) {
+        const row = this.rows.get(rowId);
+        if (ignore)
+            row.full_data.remaining = 0;
+        else
+            row.full_data.remaining = (row.full_data.size * (1.0 - (row.full_data.progress / 100)));
     }
 });
 
diff --git a/src/webui/www/private/scripts/file-tree.js b/src/webui/www/private/scripts/file-tree.js
new file mode 100644
index 000000000..c84738f29
--- /dev/null
+++ b/src/webui/www/private/scripts/file-tree.js
@@ -0,0 +1,176 @@
+/*
+ * Bittorrent Client using Qt and libtorrent.
+ * Copyright (C) 2019  Thomas Piccirello <thomas.piccirello@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * In addition, as a special exception, the copyright holders give permission to
+ * link this program with the OpenSSL project's "OpenSSL" library (or with
+ * modified versions of it that use the same license as the "OpenSSL" library),
+ * and distribute the linked executables. You must obey the GNU General Public
+ * License in all respects for all of the code used other than "OpenSSL".  If you
+ * modify file(s), you may extend this exception to your version of the file(s),
+ * but you are not obligated to do so. If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+'use strict';
+
+const FilePriority = {
+    "Ignored": 0,
+    "Normal": 1,
+    "High": 6,
+    "Maximum": 7,
+    "Mixed": -1
+};
+Object.freeze(FilePriority);
+
+const TriState = {
+    "Unchecked": 0,
+    "Checked": 1,
+    "Partial": 2
+};
+Object.freeze(TriState);
+
+const FileTree = new Class({
+    root: null,
+    nodeMap: {},
+
+    setRoot: function(root) {
+        this.root = root;
+        this.generateNodeMap(root);
+
+        if (this.root.isFolder)
+            this.root.calculateSize();
+    },
+
+    getRoot: function() {
+        return this.root;
+    },
+
+    generateNodeMap: function(node) {
+        // don't store root node in map
+        if (node.root !== null) {
+            this.nodeMap[node.rowId] = node;
+        }
+
+        node.children.each(function(child) {
+            this.generateNodeMap(child);
+        }.bind(this));
+    },
+
+    getNode: function(rowId) {
+        return (this.nodeMap[rowId] === undefined)
+            ? null
+            : this.nodeMap[rowId];
+    },
+
+    getRowId: function(node) {
+        return node.rowId;
+    },
+
+    /**
+     * Returns the nodes in dfs order
+     */
+    toArray: function() {
+        const nodes = [];
+        this.root.children.each(function(node) {
+            this._getArrayOfNodes(node, nodes);
+        }.bind(this));
+        return nodes;
+    },
+
+    _getArrayOfNodes: function(node, array) {
+        array.push(node);
+        node.children.each(function(child) {
+            this._getArrayOfNodes(child, array);
+        }.bind(this));
+    }
+});
+
+const FileNode = new Class({
+    name: "",
+    rowId: null,
+    size: 0,
+    checked: TriState.Unchecked,
+    remaining: 0,
+    progress: 0,
+    priority: FilePriority.Normal,
+    availability: 0,
+    depth: 0,
+    root: null,
+    data: null,
+    isFolder: false,
+    children: [],
+});
+
+const FolderNode = new Class({
+    Extends: FileNode,
+
+    initialize: function() {
+        this.isFolder = true;
+    },
+
+    addChild(node) {
+        this.children.push(node);
+    },
+
+    /**
+     * Recursively calculate size of node and its children
+     */
+    calculateSize: function() {
+        let size = 0;
+        let remaining = 0;
+        let progress = 0;
+        let availability = 0;
+        let checked = TriState.Unchecked;
+        let priority = FilePriority.Normal;
+
+        let isFirstFile = true;
+
+        this.children.each(function(node) {
+            if (node.isFolder)
+                node.calculateSize();
+
+            size += node.size;
+
+            if (isFirstFile) {
+                priority = node.priority;
+                checked = node.checked;
+                isFirstFile = false;
+            }
+            else {
+                if (priority !== node.priority)
+                    priority = FilePriority.Mixed;
+                if (checked !== node.checked)
+                    checked = TriState.Partial;
+            }
+
+            const isIgnored = (node.priority === FilePriority.Ignored);
+            if (!isIgnored) {
+                remaining += node.remaining;
+                progress += (node.progress * node.size);
+                availability += (node.availability * node.size);
+            }
+        }.bind(this));
+
+        this.size = size;
+        this.remaining = remaining;
+        this.checked = checked;
+        this.progress = (progress / size);
+        this.priority = priority;
+        this.availability = (availability / size);
+    }
+});
diff --git a/src/webui/www/private/scripts/filesystem.js b/src/webui/www/private/scripts/filesystem.js
new file mode 100644
index 000000000..5a9df7d8e
--- /dev/null
+++ b/src/webui/www/private/scripts/filesystem.js
@@ -0,0 +1,61 @@
+/*
+ * Bittorrent Client using Qt and libtorrent.
+ * Copyright (C) 2019  Thomas Piccirello <thomas.piccirello@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * In addition, as a special exception, the copyright holders give permission to
+ * link this program with the OpenSSL project's "OpenSSL" library (or with
+ * modified versions of it that use the same license as the "OpenSSL" library),
+ * and distribute the linked executables. You must obey the GNU General Public
+ * License in all respects for all of the code used other than "OpenSSL".  If you
+ * modify file(s), you may extend this exception to your version of the file(s),
+ * but you are not obligated to do so. If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+'use strict';
+
+// This file is the JavaScript implementation of base/utils/fs.cpp
+
+const QB_EXT = '.!qB';
+const PathSeparator = '/';
+
+/**
+ * Returns the file extension part of a file name.
+ */
+function fileExtension(filename) {
+    const name = filename.endsWith(QB_EXT)
+        ? filename.substring(0, filename.length - QB_EXT.length)
+        : filename;
+    const pointIndex = name.lastIndexOf('.');
+    if (pointIndex === -1)
+        return '';
+    return name.substring(pointIndex + 1);
+}
+
+function fileName(filepath) {
+    const slashIndex = filepath.lastIndexOf(PathSeparator);
+    if (slashIndex === -1)
+        return filepath;
+    return filepath.substring(slashIndex + 1);
+}
+
+function folderName(filepath) {
+    const slashIndex = filepath.lastIndexOf(PathSeparator);
+    if (slashIndex === -1)
+        return filepath;
+    return filepath.substring(0, slashIndex);
+}
diff --git a/src/webui/www/private/scripts/prop-files.js b/src/webui/www/private/scripts/prop-files.js
index b3b648967..485b54f2a 100644
--- a/src/webui/www/private/scripts/prop-files.js
+++ b/src/webui/www/private/scripts/prop-files.js
@@ -31,14 +31,6 @@
 let is_seed = true;
 this.current_hash = "";
 
-const FilePriority = {
-    "Ignored": 0,
-    "Normal": 1,
-    "High": 6,
-    "Maximum": 7,
-    "Mixed": -1
-};
-
 const normalizePriority = function(priority) {
     switch (priority) {
         case FilePriority.Ignored:
@@ -52,45 +44,102 @@ const normalizePriority = function(priority) {
     }
 };
 
-const fileCheckboxChanged = function(e) {
+const getAllChildren = function(id, fileId) {
+    const node = torrentFilesTable.getNode(id);
+    if (!node.isFolder) {
+        return {
+            rowIds: [id],
+            fileIds: [fileId]
+        };
+    }
+
+    const rowIds = [];
+    const fileIds = [];
+
+    const getChildFiles = function(node) {
+        if (node.isFolder) {
+            node.children.each(function(child) {
+                getChildFiles(child);
+            });
+        }
+        else {
+            rowIds.push(node.data.rowId);
+            fileIds.push(node.data.fileId);
+        }
+    };
+
+    node.children.each(function(child) {
+        getChildFiles(child);
+    });
+
+    return {
+        rowIds: rowIds,
+        fileIds: fileIds
+    };
+};
+
+const fileCheckboxClicked = function(e) {
+    e.stopPropagation();
+
     const checkbox = e.target;
     const priority = checkbox.checked ? FilePriority.Normal : FilePriority.Ignored;
     const id = checkbox.get('data-id');
+    const fileId = checkbox.get('data-file-id');
 
-    setFilePriority(id, priority);
-    setGlobalCheckboxState();
-    return true;
+    const rows = getAllChildren(id, fileId);
+
+    setFilePriority(rows.rowIds, rows.fileIds, priority);
+    updateGlobalCheckbox();
 };
 
 const fileComboboxChanged = function(e) {
     const combobox = e.target;
-    const newPriority = combobox.value;
+    const priority = combobox.value;
     const id = combobox.get('data-id');
+    const fileId = combobox.get('data-file-id');
+
+    const rows = getAllChildren(id, fileId);
 
-    setFilePriority(id, newPriority);
+    setFilePriority(rows.rowIds, rows.fileIds, priority);
+    updateGlobalCheckbox();
 };
 
 const isDownloadCheckboxExists = function(id) {
     return ($('cbPrio' + id) !== null);
 };
 
-const createDownloadCheckbox = function(id, download) {
+const createDownloadCheckbox = function(id, fileId, checked) {
     const checkbox = new Element('input');
     checkbox.set('type', 'checkbox');
-    if (download)
-        checkbox.set('checked', 'checked');
     checkbox.set('id', 'cbPrio' + id);
     checkbox.set('data-id', id);
+    checkbox.set('data-file-id', fileId);
     checkbox.set('class', 'DownloadedCB');
-    checkbox.addEvent('change', fileCheckboxChanged);
+    checkbox.addEvent('click', fileCheckboxClicked);
+
+    updateCheckbox(checkbox, checked);
     return checkbox;
 };
 
-const updateDownloadCheckbox = function(id, download) {
+const updateDownloadCheckbox = function(id, checked) {
     const checkbox = $('cbPrio' + id);
-    checkbox.checked = download;
+    updateCheckbox(checkbox, checked);
 };
 
+const updateCheckbox = function(checkbox, checked) {
+    switch (checked) {
+        case TriState.Checked:
+            setCheckboxChecked(checkbox);
+            break;
+        case TriState.Unchecked:
+            setCheckboxUnchecked(checkbox);
+            break;
+        case TriState.Partial:
+            setCheckboxPartial(checkbox);
+            break;
+    }
+}
+
 const isPriorityComboExists = function(id) {
     return ($('comboPrio' + id) !== null);
 };
@@ -104,10 +153,11 @@ const createPriorityOptionElement = function(priority, selected, html) {
     return elem;
 };
 
-const createPriorityCombo = function(id, selectedPriority) {
+const createPriorityCombo = function(id, fileId, selectedPriority) {
     const select = new Element('select');
     select.set('id', 'comboPrio' + id);
     select.set('data-id', id);
+    select.set('data-file-id', fileId);
     select.set('disabled', is_seed);
     select.addClass('combo_priority');
     select.addEvent('change', fileComboboxChanged);
@@ -117,6 +167,11 @@ const createPriorityCombo = function(id, selectedPriority) {
     createPriorityOptionElement(FilePriority.High, (FilePriority.High === selectedPriority), 'QBT_TR(High)QBT_TR[CONTEXT=PropListDelegate]').injectInside(select);
     createPriorityOptionElement(FilePriority.Maximum, (FilePriority.Maximum === selectedPriority), 'QBT_TR(Maximum)QBT_TR[CONTEXT=PropListDelegate]').injectInside(select);
 
+    // "Mixed" priority is for display only; it shouldn't be selectable
+    const mixedPriorityOption = createPriorityOptionElement(FilePriority.Mixed, (FilePriority.Mixed === selectedPriority), 'QBT_TR(Mixed)QBT_TR[CONTEXT=PropListDelegate]');
+    mixedPriorityOption.set('disabled', true);
+    mixedPriorityOption.injectInside(select);
+
     return select;
 };
 
@@ -143,56 +198,73 @@ const selectComboboxPriority = function(combobox, priority) {
     combobox.value = priority;
 };
 
-const switchCheckboxState = function() {
-    const rows = [];
+const switchCheckboxState = function(e) {
+    e.stopPropagation();
+
+    const rowIds = [];
+    const fileIds = [];
     let priority = FilePriority.Ignored;
+    const checkbox = $('tristate_cb');
 
-    if ($('tristate_cb').state === "checked") {
-        setGlobalCheckboxUnchecked();
+    if (checkbox.state === "checked") {
+        setCheckboxUnchecked(checkbox);
         // set file priority for all checked to Ignored
         torrentFilesTable.getFilteredAndSortedRows().forEach(function(row) {
-            if (row.full_data.checked)
-                rows.push(row.full_data.rowId);
+            const rowId = row.rowId;
+            const fileId = row.full_data.fileId;
+            const isChecked = (row.full_data.checked === TriState.Checked);
+            const isFolder = (fileId === -1);
+            if (!isFolder && isChecked) {
+                rowIds.push(rowId);
+                fileIds.push(fileId);
+            }
         });
     }
     else {
-        setGlobalCheckboxChecked();
+        setCheckboxChecked(checkbox);
         priority = FilePriority.Normal;
         // set file priority for all unchecked to Normal
         torrentFilesTable.getFilteredAndSortedRows().forEach(function(row) {
-            if (!row.full_data.checked)
-                rows.push(row.full_data.rowId);
+            const rowId = row.rowId;
+            const fileId = row.full_data.fileId;
+            const isUnchecked = (row.full_data.checked === TriState.Unchecked);
+            const isFolder = (fileId === -1);
+            if (!isFolder && isUnchecked) {
+                rowIds.push(rowId);
+                fileIds.push(fileId);
+            }
         });
     }
 
-    if (rows.length > 0)
-        setFilePriority(rows, priority);
+    if (rowIds.length > 0)
+        setFilePriority(rowIds, fileIds, priority);
 };
 
-const setGlobalCheckboxState = function() {
+const updateGlobalCheckbox = function() {
+    const checkbox = $('tristate_cb');
     if (isAllCheckboxesChecked())
-        setGlobalCheckboxChecked();
+        setCheckboxChecked(checkbox);
     else if (isAllCheckboxesUnchecked())
-        setGlobalCheckboxUnchecked();
+        setCheckboxUnchecked(checkbox);
     else
-        setGlobalCheckboxPartial();
+        setCheckboxPartial(checkbox);
 };
 
-const setGlobalCheckboxChecked = function() {
-    $('tristate_cb').state = "checked";
-    $('tristate_cb').indeterminate = false;
-    $('tristate_cb').checked = true;
+const setCheckboxChecked = function(checkbox) {
+    checkbox.state = "checked";
+    checkbox.indeterminate = false;
+    checkbox.checked = true;
 };
 
-const setGlobalCheckboxUnchecked = function() {
-    $('tristate_cb').state = "unchecked";
-    $('tristate_cb').indeterminate = false;
-    $('tristate_cb').checked = false;
+const setCheckboxUnchecked = function(checkbox) {
+    checkbox.state = "unchecked";
+    checkbox.indeterminate = false;
+    checkbox.checked = false;
 };
 
-const setGlobalCheckboxPartial = function() {
-    $('tristate_cb').state = "partial";
-    $('tristate_cb').indeterminate = true;
+const setCheckboxPartial = function(checkbox) {
+    checkbox.state = "partial";
+    checkbox.indeterminate = true;
 };
 
 const isAllCheckboxesChecked = function() {
@@ -213,9 +285,8 @@ const isAllCheckboxesUnchecked = function() {
     return true;
 };
 
-const setFilePriority = function(id, priority) {
+const setFilePriority = function(ids, fileIds, priority) {
     if (current_hash === "") return;
-    const ids = Array.isArray(id) ? id : [id];
 
     clearTimeout(loadTorrentFilesDataTimer);
     new Request({
@@ -223,7 +294,7 @@ const setFilePriority = function(id, priority) {
         method: 'post',
         data: {
             'hash': current_hash,
-            'id': ids.join('|'),
+            'id': fileIds.join('|'),
             'priority': priority
         },
         onComplete: function() {
@@ -231,11 +302,16 @@ const setFilePriority = function(id, priority) {
         }
     }).send();
 
+    const ignore = (priority === FilePriority.Ignored);
     ids.forEach(function(_id) {
+        torrentFilesTable.setIgnored(_id, ignore);
+
         const combobox = $('comboPrio' + _id);
         if (combobox !== null)
             selectComboboxPriority(combobox, priority);
     });
+
+    torrentFilesTable.updateTable(false);
 };
 
 let loadTorrentFilesDataTimer;
@@ -252,9 +328,11 @@ const loadTorrentFilesData = function() {
         loadTorrentFilesDataTimer = loadTorrentFilesData.delay(5000);
         return;
     }
+    let loadedNewTorrent = false;
     if (new_hash != current_hash) {
         torrentFilesTable.clear();
         current_hash = new_hash;
+        loadedNewTorrent = true;
     }
     const url = new URI('api/v2/torrents/files?hash=' + current_hash);
     new Request.JSON({
@@ -266,43 +344,16 @@ const loadTorrentFilesData = function() {
             loadTorrentFilesDataTimer = loadTorrentFilesData.delay(5000);
         },
         onSuccess: function(files) {
-            const selectedFiles = torrentFilesTable.selectedRowsIds();
+            clearTimeout(torrentFilesFilterInputTimer);
 
-            if (!files) {
+            if (files.length === 0) {
                 torrentFilesTable.clear();
-                return;
             }
-
-            let i = 0;
-            files.each(function(file) {
-                if (i === 0)
-                    is_seed = file.is_seed;
-
-                const row = {
-                    rowId: i,
-                    checked: (file.priority !== FilePriority.Ignored),
-                    name: escapeHtml(file.name),
-                    size: file.size,
-                    progress: (file.progress * 100).round(1),
-                    priority: normalizePriority(file.priority),
-                    remaining: (file.size * (1.0 - file.progress)),
-                    availability: file.availability
-                };
-
-                if ((row.progress === 100) && (file.progress < 1))
-                    row.progress = 99.9;
-
-                ++i;
-                torrentFilesTable.updateRowData(row);
-            }.bind(this));
-
-            torrentFilesTable.updateTable(false);
-            torrentFilesTable.altRow();
-
-            if (selectedFiles.length > 0)
-                torrentFilesTable.reselectRows(selectedFiles);
-
-            setGlobalCheckboxState();
+            else {
+                handleNewTorrentFiles(files);
+                if (loadedNewTorrent)
+                    collapseAllNodes();
+            }
         }
     }).send();
 };
@@ -312,33 +363,154 @@ updateTorrentFilesData = function() {
     loadTorrentFilesData();
 };
 
+const handleNewTorrentFiles = function(files) {
+    is_seed = (files.length > 0) ? files[0].is_seed : true;
+
+    const rows = files.map(function(file, index) {
+        let progress = (file.progress * 100).round(1);
+        if ((progress === 100) && (file.progress < 1))
+            progress = 99.9;
+
+        const name = escapeHtml(file.name);
+        const ignore = (file.priority === FilePriority.Ignored);
+        const checked = (ignore ? TriState.Unchecked : TriState.Checked);
+        const remaining = (ignore ? 0 : (file.size * (1.0 - file.progress)));
+        const row = {
+            fileId: index,
+            checked: checked,
+            fileName: name,
+            name: fileName(name),
+            size: file.size,
+            progress: progress,
+            priority: normalizePriority(file.priority),
+            remaining: remaining,
+            availability: file.availability
+        };
+
+        return row;
+    });
+
+    addRowsToTable(rows);
+    updateGlobalCheckbox();
+};
+
+const addRowsToTable = function(rows) {
+    const selectedFiles = torrentFilesTable.selectedRowsIds();
+    let rowId = 0;
+
+    const rootNode = new FolderNode();
+
+    rows.forEach(function(row) {
+        let parent = rootNode;
+        const pathFolders = row.fileName.split(PathSeparator);
+        pathFolders.pop();
+        pathFolders.forEach(function(folderName) {
+            if (folderName === '.unwanted')
+                return;
+
+            let parentNode = null;
+            if (parent.children !== null) {
+                for (let i = 0; i < parent.children.length; ++i) {
+                    const childFolder = parent.children[i];
+                    if (childFolder.name === folderName) {
+                        parentNode = childFolder;
+                        break;
+                    }
+                }
+            }
+            if (parentNode === null) {
+                parentNode = new FolderNode();
+                parentNode.name = folderName;
+                parentNode.rowId = rowId;
+                parentNode.root = parent;
+                parent.addChild(parentNode);
+
+                ++rowId;
+            }
+
+            parent = parentNode;
+        });
+
+        const isChecked = row.checked ? TriState.Checked : TriState.Unchecked;
+        const remaining = (row.priority === FilePriority.Ignored) ? 0 : row.remaining;
+        const childNode = new FileNode();
+        childNode.name = row.name;
+        childNode.rowId = rowId;
+        childNode.size = row.size;
+        childNode.checked = isChecked;
+        childNode.remaining = remaining;
+        childNode.progress = row.progress;
+        childNode.priority = row.priority;
+        childNode.availability = row.availability;
+        childNode.root = parent;
+        childNode.data = row;
+        parent.addChild(childNode);
+
+        ++rowId;
+    }.bind(this));
+
+    torrentFilesTable.populateTable(rootNode);
+    torrentFilesTable.updateTable(false);
+    torrentFilesTable.altRow();
+
+    if (selectedFiles.length > 0)
+        torrentFilesTable.reselectRows(selectedFiles);
+};
+
+const collapseIconClicked = function(event) {
+    const id = event.get("data-id");
+    const node = torrentFilesTable.getNode(id);
+    const isCollapsed = (event.parentElement.get("data-collapsed") === "true");
+
+    if (isCollapsed)
+        expandNode(node);
+    else
+        collapseNode(node);
+};
+
+const filesPriorityMenuClicked = function(priority) {
+    const selectedRows = torrentFilesTable.selectedRowsIds();
+    if (selectedRows.length === 0) return;
+
+    const rowIds = [];
+    const fileIds = [];
+    selectedRows.forEach(function(rowId) {
+        const elem = $('comboPrio' + rowId);
+        rowIds.push(rowId);
+        fileIds.push(elem.get("data-file-id"));
+    });
+
+    const uniqueRowIds = {};
+    const uniqueFileIds = {};
+    for (let i = 0; i < rowIds.length; ++i) {
+        const rows = getAllChildren(rowIds[i], fileIds[i]);
+        rows.rowIds.forEach(function(rowId) {
+            uniqueRowIds[rowId] = true;
+        });
+        rows.fileIds.forEach(function(fileId) {
+            uniqueFileIds[fileId] = true;
+        });
+    }
+
+    setFilePriority(Object.keys(uniqueRowIds), Object.keys(uniqueFileIds), priority);
+};
+
 const torrentFilesContextMenu = new ContextMenu({
     targets: '#torrentFilesTableDiv tr',
     menu: 'torrentFilesMenu',
     actions: {
-        FilePrioIgnore: function(element, ref) {
-            const selectedRows = torrentFilesTable.selectedRowsIds();
-            if (selectedRows.length === 0) return;
 
-            setFilePriority(selectedRows, FilePriority.Ignored);
+        FilePrioIgnore: function(element, ref) {
+            filesPriorityMenuClicked(FilePriority.Ignored);
         },
         FilePrioNormal: function(element, ref) {
-            const selectedRows = torrentFilesTable.selectedRowsIds();
-            if (selectedRows.length === 0) return;
-
-            setFilePriority(selectedRows, FilePriority.Normal);
+            filesPriorityMenuClicked(FilePriority.Normal);
         },
         FilePrioHigh: function(element, ref) {
-            const selectedRows = torrentFilesTable.selectedRowsIds();
-            if (selectedRows.length === 0) return;
-
-            setFilePriority(selectedRows, FilePriority.High);
+            filesPriorityMenuClicked(FilePriority.High);
         },
         FilePrioMaximum: function(element, ref) {
-            const selectedRows = torrentFilesTable.selectedRowsIds();
-            if (selectedRows.length === 0) return;
-
-            setFilePriority(selectedRows, FilePriority.Maximum);
+            filesPriorityMenuClicked(FilePriority.Maximum);
         }
     },
     offsets: {
@@ -369,3 +541,134 @@ if (tableHeaders.length > 0) {
 // default sort by name column
 if (torrentFilesTable.getSortedColumn() === null)
     torrentFilesTable.setSortedColumn('name');
+
+let prevTorrentFilesFilterValue;
+let torrentFilesFilterInputTimer = null;
+// listen for changes to torrentFilesFilterInput
+$('torrentFilesFilterInput').addEvent('input', function() {
+    const value = $('torrentFilesFilterInput').get("value");
+    if (value !== prevTorrentFilesFilterValue) {
+        prevTorrentFilesFilterValue = value;
+        torrentFilesTable.setFilter(value);
+        clearTimeout(torrentFilesFilterInputTimer);
+        torrentFilesFilterInputTimer = setTimeout(function() {
+            if (current_hash === "") return;
+            torrentFilesTable.updateTable(false);
+
+            if (value.trim() === "")
+                collapseAllNodes();
+            else
+                expandAllNodes();
+        }, 400);
+    }
+});
+
+/**
+ * Show/hide a node's row
+ */
+const _hideNode = function(node, shouldHide) {
+    const span = $('filesTablefileName' + node.rowId);
+    // span won't exist if row has been filtered out
+    if (span === null)
+        return;
+    const rowElem = span.parentElement.parentElement;
+    if (shouldHide)
+        rowElem.addClass("invisible");
+    else
+        rowElem.removeClass("invisible");
+}
+
+/**
+ * Update a node's collapsed state and icon
+ */
+const _updateNodeState = function(node, isCollapsed) {
+    const span = $('filesTablefileName' + node.rowId);
+    // span won't exist if row has been filtered out
+    if (span === null)
+        return;
+    const td = span.parentElement;
+    const rowElem = td.parentElement;
+
+    // store collapsed state
+    td.set("data-collapsed", isCollapsed);
+
+    // rotate the collapse icon
+    const collapseIcon = td.getElementsByClassName("filesTableCollapseIcon")[0];
+    if (isCollapsed)
+        collapseIcon.addClass("rotate");
+    else
+        collapseIcon.removeClass("rotate");
+}
+
+const _isCollapsed = function(node) {
+    const span = $('filesTablefileName' + node.rowId);
+    if (span === null)
+        return true;
+
+    const td = span.parentElement;
+    return (td.get("data-collapsed") === "true");
+};
+
+const expandNode = function(node) {
+    _collapseNode(node, false, false, false);
+    torrentFilesTable.altRow();
+};
+
+const collapseNode = function(node) {
+    _collapseNode(node, true, false, false);
+    torrentFilesTable.altRow();
+};
+
+const expandAllNodes = function() {
+    const root = torrentFilesTable.getRoot();
+    root.children.each(function(node) {
+        node.children.each(function(child) {
+            _collapseNode(child, false, true, false);
+        });
+    });
+    torrentFilesTable.altRow();
+};
+
+const collapseAllNodes = function() {
+    const root = torrentFilesTable.getRoot();
+    root.children.each(function(node) {
+        node.children.each(function(child) {
+            _collapseNode(child, true, true, false);
+        });
+    });
+    torrentFilesTable.altRow();
+}
+
+/**
+ * Collapses a folder node with the option to recursively collapse all children
+ * @param {FolderNode} node the node to collapse/expand
+ * @param {boolean} shouldCollapse true if the node should be collapsed, false if it should be expanded
+ * @param {boolean} applyToChildren true if the node's children should also be collapsed, recursively
+ * @param {boolean} isChildNode true if the current node is a child of the original node we collapsed/expanded
+ */
+const _collapseNode = function(node, shouldCollapse, applyToChildren, isChildNode) {
+    if (!node.isFolder)
+        return;
+
+    const shouldExpand = !shouldCollapse;
+    const isNodeCollapsed = _isCollapsed(node);
+    const nodeInCorrectState = ((shouldCollapse && isNodeCollapsed) || (shouldExpand && !isNodeCollapsed));
+    const canSkipNode = (isChildNode && (!applyToChildren || nodeInCorrectState));
+    if (!isChildNode || applyToChildren || !canSkipNode)
+        _updateNodeState(node, shouldCollapse);
+
+    node.children.each(function(child) {
+        _hideNode(child, shouldCollapse);
+
+        if (!child.isFolder)
+            return;
+
+        // don't expand children that have been independently collapsed, unless applyToChildren is true
+        const shouldExpandChildren = (shouldExpand && applyToChildren);
+        const isChildCollapsed = _isCollapsed(child);
+        if (!shouldExpandChildren && isChildCollapsed)
+            return;
+
+        _collapseNode(child, shouldCollapse, applyToChildren, true);
+    });
+};
diff --git a/src/webui/www/webui.qrc b/src/webui/www/webui.qrc
index 0e8270e93..5b8c2e211 100644
--- a/src/webui/www/webui.qrc
+++ b/src/webui/www/webui.qrc
@@ -30,6 +30,8 @@
         <file>private/scripts/contextmenu.js</file>
         <file>private/scripts/download.js</file>
         <file>private/scripts/dynamicTable.js</file>
+        <file>private/scripts/file-tree.js</file>
+        <file>private/scripts/filesystem.js</file>
         <file>private/scripts/lib/clipboard-2.0.0.min.js</file>
         <file>private/scripts/lib/mocha-0.9.6-yc.js</file>
         <file>private/scripts/lib/mootools-1.2-core-yc.js</file>