diff --git a/static/files/js/utils.js b/static/files/js/utils.js
index c4b4be50..35e8c7c1 100644
--- a/static/files/js/utils.js
+++ b/static/files/js/utils.js
@@ -198,6 +198,9 @@ app.filter("round", function () {
   };
 });
 
+app.filter("escape", function () {
+  return window.encodeURIComponent;
+});
 
 app.filter("ratioRound", function () {
   return function (n) {
diff --git a/static/files/template/download-tree.html b/static/files/template/download-tree.html
index 0a2b30ce..98059f37 100644
--- a/static/files/template/download-tree.html
+++ b/static/files/template/download-tree.html
@@ -7,7 +7,7 @@
 
 <div class="content">
   <div class="header">
-    <a ng-if="!isdownloading(node.Name)" ng-href="download/{{ node.$path }}">{{ node.Name }}</a>
+    <a ng-if="!isdownloading(node.Name)" ng-href="download/{{ node.$path | escape }}">{{ node.Name }}</a>
     <span ng-if="isfile() && isdownloading(node.Name)">{{ node.Name }}</span>
     <span ng-if="!isdownloading(node.Name)" class="controls">
       <i ng-show="!confirm" ng-click="preremove()" class="red trash icon"></i>
@@ -22,9 +22,9 @@
     <audio ng-if="audioPreview" controls>
       <source ng-src="{{ showPreview ? ('download/'+node.$path) : '' }}">
     </audio>
-    <img ng-if="imagePreview" ng-src="{{ showPreview ? ('download/'+node.$path) : '' }}">
+    <img ng-if="imagePreview" ng-src="{{ showPreview ? ('download/'+(node.$path | escape)) : '' }}">
     <video controls autoplay ng-if="videoPreview">
-      <source ng-src="{{ showPreview ? ('download/'+node.$path) : '' }}">
+      <source ng-src="{{ showPreview ? ('download/'+(node.$path|escape)) : '' }}">
     </video>
   </div>
   <div class="list" ng-if="isdir() && !closed()">