File Browser

New: File Browser to navigate to folders when choosing paths

src/NzbDrone.Api.Test/NzbDrone.Api.Test.csproj

@@ -69,7 +69,6 @@
   </ItemGroup>
   <ItemGroup>
     <Compile Include="ClientSchemaTests\SchemaBuilderFixture.cs" />
-    <Compile Include="DirectoryLookupServiceFixture.cs" />
     <Compile Include="MappingTests\ResourceMappingFixture.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>

src/NzbDrone.Api/Directories/DirectoryLookupService.cs

@@ -1,59 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using NzbDrone.Common.Disk;
-
-namespace NzbDrone.Api.Directories
-{
-    public interface IDirectoryLookupService
-    {
-        List<string> LookupSubDirectories(string query);
-    }
-
-    public class DirectoryLookupService : IDirectoryLookupService
-    {
-        private readonly IDiskProvider _diskProvider;
-        private readonly HashSet<string> _setToRemove = new HashSet<string> { "$Recycle.Bin", "System Volume Information" };
-
-        public DirectoryLookupService(IDiskProvider diskProvider)
-        {
-            _diskProvider = diskProvider;
-        }
-
-        public List<string> LookupSubDirectories(string query)
-        {
-            var dirs = new List<string>();
-            var lastSeparatorIndex = query.LastIndexOf(Path.DirectorySeparatorChar);
-            var path = query.Substring(0, lastSeparatorIndex + 1);
-
-            if (lastSeparatorIndex != -1)
-            {
-                dirs = GetSubDirectories(path);
-                dirs.RemoveAll(x => _setToRemove.Contains(new DirectoryInfo(x).Name));
-            }
-
-            return dirs;
-        }
-
-        private List<string> GetSubDirectories(string path)
-        {
-            try
-            {
-                return _diskProvider.GetDirectories(path).ToList();
-            }
-            catch (DirectoryNotFoundException)
-            {
-                return new List<string>();
-            }
-            catch (ArgumentException)
-            {
-                return new List<string>();
-            }
-            catch (IOException)
-            {
-                return new List<string>();
-            }
-        }
-    }
-}

src/NzbDrone.Api/Directories/DirectoryModule.cs

@@ -1,34 +0,0 @@
-using System.Collections.Generic;
-using System.Linq;
-using Nancy;
-using NzbDrone.Api.Extensions;
-using NzbDrone.Common.Extensions;
-
-namespace NzbDrone.Api.Directories
-{
-    public class DirectoryModule : NzbDroneApiModule
-    {
-        private readonly IDirectoryLookupService _directoryLookupService;
-
-        public DirectoryModule(IDirectoryLookupService directoryLookupService)
-            : base("/directories")
-        {
-            _directoryLookupService = directoryLookupService;
-            Get["/"] = x => GetDirectories();
-        }
-
-        private Response GetDirectories()
-        {
-            if (!Request.Query.query.HasValue)
-                return new List<string>().AsResponse();
-
-            string query = Request.Query.query.Value;
-
-            var dirs = _directoryLookupService.LookupSubDirectories(query)
-                .Select(p => p.GetActualCasing())
-                .ToList();
-
-            return dirs.AsResponse();
-        }
-    }
-}

src/NzbDrone.Api/FileSystem/FileSystemModule.cs

@@ -0,0 +1,33 @@
+using System;
+using Nancy;
+using NzbDrone.Api.Extensions;
+using NzbDrone.Common.Disk;
+
+namespace NzbDrone.Api.FileSystem
+{
+    public class FileSystemModule : NzbDroneApiModule
+    {
+        private readonly IFileSystemLookupService _fileSystemLookupService;
+
+        public FileSystemModule(IFileSystemLookupService fileSystemLookupService)
+            : base("/filesystem")
+        {
+            _fileSystemLookupService = fileSystemLookupService;
+            Get["/"] = x => GetContents();
+        }
+
+        private Response GetContents()
+        {
+            var pathQuery = Request.Query.path;
+            var includeFilesQuery = Request.Query.includeFiles;
+            bool includeFiles = false;
+
+            if (includeFilesQuery.HasValue)
+            {
+                includeFiles = Convert.ToBoolean(includeFilesQuery.Value);
+            }
+
+            return _fileSystemLookupService.LookupContents((string)pathQuery.Value, includeFiles).AsResponse();
+        }
+    }
+}

src/NzbDrone.Api/NzbDrone.Api.csproj

@@ -114,8 +114,7 @@
     <Compile Include="Config\NamingConfigResource.cs" />
     <Compile Include="Config\NamingSampleResource.cs" />
     <Compile Include="Config\NzbDroneConfigModule.cs" />
-    <Compile Include="Directories\DirectoryLookupService.cs" />
-    <Compile Include="Directories\DirectoryModule.cs" />
+    <Compile Include="FileSystem\FileSystemModule.cs" />
     <Compile Include="DiskSpace\DiskSpaceModule.cs" />
     <Compile Include="DiskSpace\DiskSpaceResource.cs" />
     <Compile Include="DownloadClient\DownloadClientModule.cs" />

src/NzbDrone.Common.Test/DiskTests/DirectoryLookupServiceFixture.cs

@@ -1,26 +1,26 @@
 using System;
 using System.Collections.Generic;
 using System.IO;
+using System.Linq;
 using FluentAssertions;
 using Moq;
 using NUnit.Framework;
-using NzbDrone.Api.Directories;
 using NzbDrone.Common.Disk;
 using NzbDrone.Test.Common;
 
-namespace NzbDrone.Api.Test
+namespace NzbDrone.Common.Test.DiskTests
 {
     [TestFixture]
-    public class DirectoryLookupServiceFixture : TestBase<DirectoryLookupService>
+    public class DirectoryLookupServiceFixture : TestBase<FileSystemLookupService>
     {
         private const string RECYCLING_BIN = "$Recycle.Bin";
         private const string SYSTEM_VOLUME_INFORMATION = "System Volume Information";
-        private List<String> _folders;
+        private const string WINDOWS = "Windows";
+        private List<DirectoryInfo> _folders;
 
-        [SetUp]
-        public void Setup()
+        private void SetupFolders(string root)
         {
-            _folders = new List<String>
+            var folders = new List<String>
             {
                 RECYCLING_BIN,
                 "Chocolatey",
@@ -34,17 +34,10 @@ namespace NzbDrone.Api.Test
                 SYSTEM_VOLUME_INFORMATION,
                 "Test",
                 "Users",
-                "Windows"
+                WINDOWS
             };
 
-        }
-
-        private void SetupFolders(string root)
-        {
-            _folders.ForEach(e =>
-            {
-                e = Path.Combine(root, e);
-            });
+            _folders = folders.Select(f => new DirectoryInfo(Path.Combine(root, f))).ToList();
         }
 
         [Test]
@@ -54,10 +47,10 @@ namespace NzbDrone.Api.Test
             SetupFolders(root);
 
             Mocker.GetMock<IDiskProvider>()
-                .Setup(s => s.GetDirectories(It.IsAny<String>()))
-                .Returns(_folders.ToArray());
+                .Setup(s => s.GetDirectoryInfos(It.IsAny<String>()))
+                .Returns(_folders);
 
-            Subject.LookupSubDirectories(root).Should().NotContain(Path.Combine(root, RECYCLING_BIN));
+            Subject.LookupContents(root, false).Directories.Should().NotContain(Path.Combine(root, RECYCLING_BIN));
         }
 
         [Test]
@@ -67,27 +60,29 @@ namespace NzbDrone.Api.Test
             SetupFolders(root);
 
             Mocker.GetMock<IDiskProvider>()
-                .Setup(s => s.GetDirectories(It.IsAny<String>()))
-                .Returns(_folders.ToArray());
+                .Setup(s => s.GetDirectoryInfos(It.IsAny<String>()))
+                .Returns(_folders);
 
-            Subject.LookupSubDirectories(root).Should().NotContain(Path.Combine(root, SYSTEM_VOLUME_INFORMATION));
+            Subject.LookupContents(root, false).Directories.Should().NotContain(Path.Combine(root, SYSTEM_VOLUME_INFORMATION));
         }
 
         [Test]
         public void should_not_contain_recycling_bin_or_system_volume_information_for_root_of_drive()
         {
-            string root = @"C:\";
+            string root = @"C:\".AsOsAgnostic();
             SetupFolders(root);
 
             Mocker.GetMock<IDiskProvider>()
-                .Setup(s => s.GetDirectories(It.IsAny<String>()))
-                .Returns(_folders.ToArray());
+                .Setup(s => s.GetDirectoryInfos(It.IsAny<String>()))
+                .Returns(_folders);
 
-            var result = Subject.LookupSubDirectories(root);
+            var result = Subject.LookupContents(root, false);
+            
+            result.Directories.Should().HaveCount(_folders.Count - 3);
 
-            result.Should().HaveCount(_folders.Count - 2);
-            result.Should().NotContain(RECYCLING_BIN);
-            result.Should().NotContain(SYSTEM_VOLUME_INFORMATION);
+            result.Directories.Should().NotContain(f => f.Name == RECYCLING_BIN);
+            result.Directories.Should().NotContain(f => f.Name == SYSTEM_VOLUME_INFORMATION);
+            result.Directories.Should().NotContain(f => f.Name == WINDOWS);
         }
     }
 }

src/NzbDrone.Common.Test/DiskTests/DiskProviderFixtureBase.cs

@@ -6,7 +6,7 @@ using NUnit.Framework;
 using NzbDrone.Common.Disk;
 using NzbDrone.Test.Common;
 
-namespace NzbDrone.Common.Test.DiskProviderTests
+namespace NzbDrone.Common.Test.DiskTests
 {
     public class DiskProviderFixtureBase<TSubject> : TestBase<TSubject> where TSubject : class, IDiskProvider
     {

src/NzbDrone.Common.Test/DiskTests/FreeSpaceFixtureBase.cs

@@ -5,7 +5,7 @@ using NUnit.Framework;
 using NzbDrone.Common.Disk;
 using NzbDrone.Test.Common;
 
-namespace NzbDrone.Common.Test.DiskProviderTests
+namespace NzbDrone.Common.Test.DiskTests
 {
     public abstract class FreeSpaceFixtureBase<TSubject> : TestBase<TSubject> where TSubject : class, IDiskProvider
     {

src/NzbDrone.Common.Test/DiskTests/IsParentFixtureBase.cs

@@ -1,6 +1,6 @@
 using NzbDrone.Test.Common;
 
-namespace NzbDrone.Common.Test.DiskProviderTests
+namespace NzbDrone.Common.Test.DiskTests
 {
     public class IsParentPathFixture : TestBase
     {

src/NzbDrone.Common.Test/NzbDrone.Common.Test.csproj

@@ -68,9 +68,10 @@
     <Compile Include="CacheTests\CachedFixture.cs" />
     <Compile Include="CacheTests\CachedManagerFixture.cs" />
     <Compile Include="ConfigFileProviderTest.cs" />
-    <Compile Include="DiskProviderTests\DiskProviderFixtureBase.cs" />
-    <Compile Include="DiskProviderTests\FreeSpaceFixtureBase.cs" />
-    <Compile Include="DiskProviderTests\IsParentFixtureBase.cs" />
+    <Compile Include="DiskTests\DirectoryLookupServiceFixture.cs" />
+    <Compile Include="DiskTests\DiskProviderFixtureBase.cs" />
+    <Compile Include="DiskTests\FreeSpaceFixtureBase.cs" />
+    <Compile Include="DiskTests\IsParentFixtureBase.cs" />
     <Compile Include="EnsureTest\PathExtensionFixture.cs" />
     <Compile Include="EnvironmentProviderTest.cs" />
     <Compile Include="EnvironmentTests\EnvironmentProviderTest.cs" />

src/NzbDrone.Common/Disk/DiskProviderBase.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.IO;
 using System.Linq;
 using System.Security.AccessControl;
@@ -21,7 +22,6 @@ namespace NzbDrone.Common.Disk
         public abstract void SetPermissions(string path, string mask, string user, string group);
         public abstract long? GetTotalSize(string path);
 
-
         public DateTime FolderGetCreationTime(string path)
         {
             CheckFolderExists(path);
@@ -430,5 +430,23 @@ namespace NzbDrone.Common.Disk
 
             return new FileStream(path, FileMode.Open, FileAccess.Read);
         }
+
+        public List<DirectoryInfo> GetDirectoryInfos(string path)
+        {
+            Ensure.That(path, () => path).IsValidPath();
+
+            var di = new DirectoryInfo(path);
+
+            return di.GetDirectories().ToList();
+        }
+
+        public List<FileInfo> GetFileInfos(string path)
+        {
+            Ensure.That(path, () => path).IsValidPath();
+
+            var di = new DirectoryInfo(path);
+
+            return di.GetFiles().ToList();
+        }
     }
 }

src/NzbDrone.Common/Disk/FileSystemLookupService.cs

@@ -0,0 +1,183 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using NLog;
+using NzbDrone.Common.EnvironmentInfo;
+using NzbDrone.Common.Extensions;
+
+namespace NzbDrone.Common.Disk
+{
+    public interface IFileSystemLookupService
+    {
+        FileSystemResult LookupContents(string query, bool includeFiles);
+    }
+
+    public class FileSystemLookupService : IFileSystemLookupService
+    {
+        private readonly IDiskProvider _diskProvider;
+        private readonly Logger _logger;
+
+        private readonly HashSet<string> _setToRemove = new HashSet<string>
+                                                        {
+                                                            //Windows
+                                                            "boot",
+                                                            "bootmgr",
+                                                            "cache",
+                                                            "msocache",
+                                                            "recovery",
+                                                            "$recycle.bin",
+                                                            "recycler",
+                                                            "system volume information",
+                                                            "temporary internet files",
+                                                            "windows",
+
+                                                            //OS X
+                                                            ".fseventd",
+                                                            ".spotlight",
+                                                            ".trashes",
+                                                            ".vol",
+                                                            "cachedmessages",
+                                                            "caches",
+                                                            "trash"
+                                                        };
+
+        public FileSystemLookupService(IDiskProvider diskProvider, Logger logger)
+        {
+            _diskProvider = diskProvider;
+            _logger = logger;
+        }
+
+        public FileSystemResult LookupContents(string query, bool includeFiles)
+        {
+            var result = new FileSystemResult();
+
+            if (query.IsNullOrWhiteSpace())
+            {
+                if (OsInfo.IsWindows)
+                {
+                    result.Directories = GetDrives();
+
+                    return result;
+                }
+
+                query = "/";
+            }
+
+            var lastSeparatorIndex = query.LastIndexOf(Path.DirectorySeparatorChar);
+            var path = query.Substring(0, lastSeparatorIndex + 1);
+
+            if (lastSeparatorIndex != -1)
+            {
+                try
+                {
+                    result.Parent = GetParent(path);
+                    result.Directories = GetDirectories(path);
+
+                    if (includeFiles)
+                    {
+                        result.Files = GetFiles(path);
+                    }
+                }
+
+                catch (DirectoryNotFoundException)
+                {
+                    return new FileSystemResult { Parent = GetParent(path) };
+                }
+                catch (ArgumentException)
+                {
+                    return new FileSystemResult();
+                }
+                catch (IOException)
+                {
+                    return new FileSystemResult { Parent = GetParent(path) };
+                }
+                catch (UnauthorizedAccessException)
+                {
+                    return new FileSystemResult { Parent = GetParent(path) };
+                }
+            }
+
+            return result;
+        }
+
+        private List<FileSystemModel> GetDrives()
+        {
+            return _diskProvider.GetFixedDrives()
+                                .Select(d => new FileSystemModel
+                                             {
+                                                 Type = FileSystemEntityType.Drive,
+                                                 Name = d,
+                                                 Path = d,
+                                                 LastModified = null
+                                             })
+                                .ToList();
+        }
+
+        private List<FileSystemModel> GetDirectories(string path)
+        {
+            var directories = _diskProvider.GetDirectoryInfos(path)
+                                           .Select(d => new FileSystemModel
+                                                        {
+                                                            Name = d.Name,
+                                                            Path = GetDirectoryPath(d.FullName.GetActualCasing()),
+                                                            LastModified = d.LastWriteTimeUtc,
+                                                            Type = FileSystemEntityType.Folder
+                                                        })
+                                           .ToList();
+
+            directories.RemoveAll(d => _setToRemove.Contains(d.Name.ToLowerInvariant()));
+
+            return directories;
+        }
+
+        private List<FileSystemModel> GetFiles(string path)
+        {
+            return _diskProvider.GetFileInfos(path)
+                                .Select(d => new FileSystemModel
+                                             {
+                                                 Name = d.Name,
+                                                 Path = d.FullName.GetActualCasing(),
+                                                 LastModified = d.LastWriteTimeUtc,
+                                                 Extension = d.Extension,
+                                                 Size = d.Length,
+                                                 Type = FileSystemEntityType.File
+                                             })
+                                .ToList();
+        }
+
+        private string GetDirectoryPath(string path)
+        {
+            if (path.Last() != Path.DirectorySeparatorChar)
+            {
+                path += Path.DirectorySeparatorChar;
+            }
+
+            return path;
+        }
+        
+        private string GetParent(string path)
+        {
+            var di = new DirectoryInfo(path);
+
+            if (di.Parent != null)
+            {
+                var parent = di.Parent.FullName;
+
+                if (parent.Last() != Path.DirectorySeparatorChar)
+                {
+                    parent += Path.DirectorySeparatorChar;
+                }
+
+                return parent;
+            }
+
+            if (!path.Equals("/"))
+            {
+                return String.Empty;
+            }
+
+            return null;
+        }
+    }
+}

src/NzbDrone.Common/Disk/FileSystemModel.cs

@@ -0,0 +1,22 @@
+using System;
+
+namespace NzbDrone.Common.Disk
+{
+    public class FileSystemModel
+    {
+        public FileSystemEntityType Type { get; set; }
+        public string Name { get; set; }
+        public string Path { get; set; }
+        public string Extension { get; set; }
+        public long Size { get; set; }
+        public DateTime? LastModified { get; set; }
+    }
+
+    public enum FileSystemEntityType
+    {
+        Parent,
+        Drive,
+        Folder,
+        File
+    }
+}

src/NzbDrone.Common/Disk/FileSystemResult.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+
+namespace NzbDrone.Common.Disk
+{
+    public class FileSystemResult
+    {
+        public String Parent { get; set; }
+        public List<FileSystemModel> Directories { get; set; }
+        public List<FileSystemModel> Files { get; set; }
+
+        public FileSystemResult()
+        {
+            Directories = new List<FileSystemModel>();
+            Files = new List<FileSystemModel>();
+        }
+    }
+}

src/NzbDrone.Common/Disk/IDiskProvider.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.IO;
 using System.Security.AccessControl;
 using System.Security.Principal;
@@ -45,5 +46,7 @@ namespace NzbDrone.Common.Disk
         string[] GetFixedDrives();
         string GetVolumeLabel(string path);
         FileStream StreamFile(string path);
+        List<DirectoryInfo> GetDirectoryInfos(string path);
+        List<FileInfo> GetFileInfos(string path);
     }
-}
+}

src/NzbDrone.Common/NzbDrone.Common.csproj

@@ -71,6 +71,9 @@
     <Compile Include="ConsoleService.cs" />
     <Compile Include="ConvertBase32.cs" />
     <Compile Include="Crypto\HashProvider.cs" />
+    <Compile Include="Disk\FileSystemLookupService.cs" />
+    <Compile Include="Disk\FileSystemModel.cs" />
+    <Compile Include="Disk\FileSystemResult.cs" />
     <Compile Include="Extensions\DictionaryExtensions.cs" />
     <Compile Include="Disk\OsPath.cs" />
     <Compile Include="Disk\DiskProviderBase.cs" />

src/NzbDrone.Core.Test/IndexerTests/KickassTorrentsTests/KickassTorrentsFixture.cs

@@ -39,7 +39,7 @@ namespace NzbDrone.Core.Test.IndexerTests.KickassTorrentsTests
             releases.Should().HaveCount(5);
             releases.First().Should().BeOfType<TorrentInfo>();
 
-            var torrentInfo = releases.First() as TorrentInfo;
+            var torrentInfo = (TorrentInfo) releases.First();
 
             torrentInfo.Title.Should().Be("Doctor Stranger.E03.140512.HDTV.H264.720p-iPOP.avi [CTRG]");
             torrentInfo.DownloadProtocol.Should().Be(DownloadProtocol.Torrent);
@@ -72,7 +72,7 @@ namespace NzbDrone.Core.Test.IndexerTests.KickassTorrentsTests
         [Test]
         public void should_not_return_unverified_releases_if_not_configured()
         {
-            (Subject.Definition.Settings as KickassTorrentsSettings).VerifiedOnly = true;
+            ((KickassTorrentsSettings) Subject.Definition.Settings).VerifiedOnly = true;
 
             var recentFeed = ReadAllText(@"Files/RSS/KickassTorrents.xml");
 
@@ -84,5 +84,6 @@ namespace NzbDrone.Core.Test.IndexerTests.KickassTorrentsTests
 
             releases.Should().HaveCount(4);
         }
+
     }
 }

src/NzbDrone.Mono.Test/DiskProviderTests/DiskProviderFixture.cs

@@ -1,5 +1,5 @@
 using NUnit.Framework;
-using NzbDrone.Common.Test.DiskProviderTests;
+using NzbDrone.Common.Test.DiskTests;
 
 namespace NzbDrone.Mono.Test.DiskProviderTests
 {

src/NzbDrone.Mono.Test/DiskProviderTests/FreeSpaceFixture.cs

@@ -1,5 +1,5 @@
 using NUnit.Framework;
-using NzbDrone.Common.Test.DiskProviderTests;
+using NzbDrone.Common.Test.DiskTests;
 
 namespace NzbDrone.Mono.Test.DiskProviderTests
 {

src/NzbDrone.Windows.Test/DiskProviderTests/DiskProviderFixture.cs

@@ -1,5 +1,5 @@
 using NUnit.Framework;
-using NzbDrone.Common.Test.DiskProviderTests;
+using NzbDrone.Common.Test.DiskTests;
 
 namespace NzbDrone.Windows.Test.DiskProviderTests
 {

src/NzbDrone.Windows.Test/DiskProviderTests/FreeSpaceFixture.cs

@@ -1,5 +1,5 @@
 using NUnit.Framework;
-using NzbDrone.Common.Test.DiskProviderTests;
+using NzbDrone.Common.Test.DiskTests;
 
 namespace NzbDrone.Windows.Test.DiskProviderTests
 {

src/UI/AddSeries/RootFolders/RootFolderItemViewTemplate.hbs

@@ -4,7 +4,6 @@
 <td class="col-md-3 x-folder folder-free-space">
     <span>{{Bytes freeSpace}}</span>
 </td>
-<td class="col-md-1 nz-row-action">
-    <div class="btn btn-sm btn-icon-only  icon-nd-delete x-delete">
-    </div>
+<td class="col-md-1">
+    <i class="icon-nd-delete x-delete"></i>
 </td>

src/UI/AddSeries/RootFolders/RootFolderLayout.js

@@ -8,14 +8,14 @@ define(
         'AddSeries/RootFolders/RootFolderModel',
         'Shared/LoadingView',
         'Mixins/AsValidatedView',
-        'Mixins/AutoComplete'
+        'Mixins/FileBrowser'
     ], function (Marionette, RootFolderCollectionView, RootFolderCollection, RootFolderModel, LoadingView, AsValidatedView) {
 
         var layout = Marionette.Layout.extend({
             template: 'AddSeries/RootFolders/RootFolderLayoutTemplate',
 
             ui: {
-                pathInput: '.x-path input'
+                pathInput: '.x-path'
             },
 
             regions: {
@@ -42,7 +42,7 @@ define(
                     this._showCurrentDirs();
                 }
 
-                this.ui.pathInput.autoComplete('/directories');
+                this.ui.pathInput.fileBrowser({ showFiles: true, showLastModified: true });
             },
 
             _onFolderSelected: function (options) {

src/UI/AddSeries/RootFolders/RootFolderLayoutTemplate.hbs

@@ -7,22 +7,28 @@
         <div class="validation-errors"></div>
         <div class="alert alert-info">Enter the path that contains some or all of your TV series, you will be able to choose which series you want to import<button type="button" class="close" data-dismiss="alert">×</button></div>
 
-        <div class="form-group">
-            <div class="input-group x-path">
-                <span class="input-group-addon">&nbsp;<i class="icon-folder-open"></i></span>
-                <input class="col-md-9 form-control" type="text" validation-name="path" placeholder="Enter path to folder that contains your shows">
-                <span class="input-group-btn ">
-                    <button class="btn btn-success x-add">
-                        <i class="icon-ok"/>
-                    </button>
-                </span>
+        <div class="row">
+            <div class="form-group">
+
+                <div class="col-md-12">
+
+                    <div class="input-group">
+                        <span class="input-group-addon">&nbsp;<i class="icon-folder-open"></i></span>
+                        <input class="form-control x-path" type="text" validation-name="path" placeholder="Enter path to folder that contains your shows">
+                        <span class="input-group-btn"><button class="btn btn-success x-add"><i class="icon-ok"/></button></span>
+                    </div>
+                </div>
             </div>
         </div>
 
-        {{#if items}}
-            <h4>Recent Folders</h4>
-        {{/if}}
-        <div id="current-dirs" class="root-folders-list"></div>
+        <div class="row root-folders">
+            <div class="col-md-12">
+                {{#if items}}
+                    <h4>Recent Folders</h4>
+                {{/if}}
+                <div id="current-dirs" class="root-folders-list"></div>
+            </div>
+        </div>
     </div>
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal">close</button>

src/UI/AddSeries/addSeries.less

@@ -126,20 +126,28 @@ li.add-new:hover {
 }
 
 .root-folders-modal {
-  overflow: visible;
+  overflow : visible;
 
   .root-folders-list {
-    overflow: auto;
-    max-height: 300px;
+    overflow   : auto;
+    max-height : 300px;
+
+    i {
+      .clickable();
+    }
   }
 
   .validation-errors {
-    display: none;
+    display : none;
   }
 
   .input-group {
     .form-control {
-      background-color: white;
+      background-color : white;
     }
   }
+
+  .root-folders {
+    margin-top : 20px;
+  }
 }

src/UI/AppLayout.js

@@ -2,8 +2,9 @@
     [
         'marionette',
         'Shared/Modal/ModalRegion',
+        'Shared/FileBrowser/FileBrowserModalRegion',
         'Shared/ControlPanel/ControlPanelRegion'
-    ], function (Marionette, ModalRegion, ControlPanelRegion) {
+    ], function (Marionette, ModalRegion, FileBrowserModalRegion, ControlPanelRegion) {
         'use strict';
 
         var Layout = Marionette.Layout.extend({
@@ -15,8 +16,9 @@
 
             initialize: function () {
                 this.addRegions({
-                    modalRegion       : ModalRegion,
-                    controlPanelRegion: ControlPanelRegion
+                    modalRegion            : ModalRegion,
+                    fileBrowserModalRegion : FileBrowserModalRegion,
+                    controlPanelRegion     : ControlPanelRegion
                 });
             }
         });

src/UI/Content/theme.less

@@ -17,6 +17,7 @@
 @import "typeahead";
 @import "utilities";
 @import "../Hotkeys/hotkeys";
+@import "../Shared/FileBrowser/filebrowser";
 
 .main-region {
   @media (min-width : @screen-lg-min) {
@@ -281,4 +282,4 @@ dl.info {
   &.protocol-usenet {
     background-color : #17B1D9;
   }
-}
+}

src/UI/Mixins/AutoComplete.js

@@ -5,7 +5,19 @@ define(
         'typeahead'
     ], function ($) {
 
-    $.fn.autoComplete = function (resource) {
+    $.fn.autoComplete = function (options) {
+        if (!options) {
+            throw 'options are required';
+        }
+
+        if (!options.resource) {
+            throw 'resource is required';
+        }
+
+        if (!options.query) {
+            throw 'query is required';
+        }
+
         $(this).typeahead({
                 hint      : true,
                 highlight : true,
@@ -13,25 +25,34 @@ define(
                 items     : 20
             },
             {
-                name: resource.replace('/'),
+                name: options.resource.replace('/'),
                 displayKey: '',
                 source   : function (filter, callback) {
+                    var data = {};
+                    data[options.query] = filter;
+
                     $.ajax({
-                        url     : window.NzbDrone.ApiRoot + resource,
+                        url     : window.NzbDrone.ApiRoot + options.resource,
                         dataType: 'json',
                         type    : 'GET',
-                        data    : { query: filter },
-                        success : function (data) {
+                        data    : data,
+                        success : function (response) {
 
-                            var matches = [];
+                            if (options.filter) {
+                                options.filter.call(this, filter, response, callback);
+                            }
 
-                            $.each(data, function(i, d) {
-                                if (d.startsWith(filter)) {
-                                    matches.push({ value: d });
-                                }
-                            });
+                            else {
+                                var matches = [];
 
-                            callback(matches);
+                                $.each(response, function(i, d) {
+                                    if (d[options.query] && d[options.property].startsWith(filter)) {
+                                        matches.push({ value: d[options.property] });
+                                    }
+                                });
+
+                                callback(matches);
+                            }
                         }
                     });
                 }

src/UI/Mixins/DirectoryAutoComplete.js

@@ -0,0 +1,29 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'Mixins/AutoComplete'
+    ], function ($) {
+
+    $.fn.directoryAutoComplete = function () {
+
+        var query = 'path';
+
+        $(this).autoComplete({
+            resource : '/filesystem',
+            query    : query,
+            filter   : function (filter, response, callback) {
+
+                var matches = [];
+
+                $.each(response.directories, function(i, d) {
+                    if (d[query] && d[query].startsWith(filter)) {
+                        matches.push({ value: d[query] });
+                    }
+                });
+
+                callback(matches);
+            }
+        });
+    };
+});

src/UI/Mixins/FileBrowser.js

@@ -0,0 +1,38 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'vent',
+        'Shared/FileBrowser/FileBrowserLayout',
+        'Mixins/DirectoryAutoComplete'
+    ], function ($, vent) {
+
+    $.fn.fileBrowser = function (options) {
+        var inputs = $(this);
+
+        inputs.each(function () {
+            var input = $(this);
+            var inputOptions = $.extend({ input: input }, options);
+
+            var inputGroup = $('<div class="input-group"></div>');
+            var inputGroupButton = $('<span class="input-group-btn "></span>');
+            var button = $('<button class="btn btn-primary x-file-browser" title="Browse"><i class="icon-folder-open"/></button>');
+
+            if (input.parent('.input-group').length > 0) {
+                input.parent('.input-group').find('.input-group-btn').prepend(button);
+            }
+
+            else {
+                inputGroupButton.append(button);
+                input.wrap(inputGroup);
+                input.after(inputGroupButton);
+            }
+
+            button.on('click', function () {
+                vent.trigger(vent.Commands.ShowFileBrowser, inputOptions);
+            });
+        });
+
+        inputs.directoryAutoComplete();
+    };
+});

src/UI/Series/Edit/EditSeriesView.js

@@ -7,8 +7,8 @@ define(
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView',
         'Mixins/AsEditModalView',
-        'Mixins/AutoComplete',
-        'Mixins/TagInput'
+        'Mixins/TagInput',
+        'Mixins/FileBrowser'
     ], function (vent, Marionette, Profiles, AsModelBoundView, AsValidatedView, AsEditModalView) {
 
         var view = Marionette.ItemView.extend({
@@ -28,6 +28,15 @@ define(
                 this.model.set('profiles', Profiles);
             },
 
+            onRender: function () {
+                this.ui.path.fileBrowser();
+
+                this.ui.tags.tagInput({
+                    model    : this.model,
+                    property : 'tags'
+                });
+            },
+
             _onBeforeSave: function () {
                 var profileId = this.ui.profile.val();
                 this.model.set({ profileId: profileId});
@@ -38,14 +47,6 @@ define(
                 vent.trigger(vent.Commands.CloseModalCommand);
             },
 
-            onRender: function () {
-                this.ui.path.autoComplete('/directories');
-                this.ui.tags.tagInput({
-                    model    : this.model,
-                    property : 'tags'
-                });
-            },
-
             _removeSeries: function () {
                 vent.trigger(vent.Commands.DeleteSeriesCommand, {series:this.model});
             }

src/UI/Settings/DownloadClient/DroneFactory/DroneFactoryView.js

@@ -4,7 +4,7 @@ define(
         'marionette',
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView',
-        'Mixins/AutoComplete'
+        'Mixins/FileBrowser'
     ], function (Marionette, AsModelBoundView, AsValidatedView) {
 
         var view = Marionette.ItemView.extend({
@@ -15,7 +15,7 @@ define(
             },
 
             onShow: function () {
-                this.ui.droneFactory.autoComplete('/directories');
+                this.ui.droneFactory.fileBrowser();
             }
         });
 

src/UI/Settings/DownloadClient/Edit/DownloadClientEditView.js

@@ -11,7 +11,7 @@ define([
     'Mixins/AsValidatedView',
     'Mixins/AsEditModalView',
     'Form/FormBuilder',
-    'Mixins/AutoComplete',
+    'Mixins/FileBrowser',
     'bootstrap'
 ], function (_, vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, AsEditModalView) {
 
@@ -39,7 +39,7 @@ define([
                 this.ui.modalBody.addClass('modal-overflow');
             }
 
-            this.ui.path.autoComplete('/directories');
+            this.ui.path.fileBrowser({ showFiles: true });
         },
 
         _onAfterSave: function () {

src/UI/Settings/DownloadClient/RemotePathMapping/RemotePathMappingEditView.js

@@ -10,7 +10,7 @@ define([
     'Mixins/AsModelBoundView',
     'Mixins/AsValidatedView',
     'Mixins/AsEditModalView',
-    'Mixins/AutoComplete',
+    'Mixins/FileBrowser',
     'bootstrap'
 ], function (_, vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, AsEditModalView) {
 
@@ -34,7 +34,7 @@ define([
                 this.ui.modalBody.addClass('modal-overflow');
             }
 
-            this.ui.path.autoComplete('/directories');
+            this.ui.path.fileBrowser();
         },
 
         _onAfterSave : function () {

src/UI/Settings/MediaManagement/FileManagement/FileManagementView.js

@@ -1,11 +1,13 @@
 'use strict';
 define(
     [
+        'vent',
         'marionette',
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView',
-        'Mixins/AutoComplete'
-    ], function (Marionette, AsModelBoundView, AsValidatedView) {
+        'Mixins/DirectoryAutoComplete',
+        'Mixins/FileBrowser'
+    ], function (vent, Marionette, AsModelBoundView, AsValidatedView) {
 
         var view = Marionette.ItemView.extend({
             template: 'Settings/MediaManagement/FileManagement/FileManagementViewTemplate',
@@ -15,7 +17,7 @@ define(
             },
 
             onShow: function () {
-                this.ui.recyclingBin.autoComplete('/directories');
+                this.ui.recyclingBin.fileBrowser();
             }
         });
 

src/UI/Settings/MediaManagement/FileManagement/FileManagementViewTemplate.hbs

@@ -93,5 +93,6 @@
         <div class="col-sm-8 col-sm-pull-1">
             <input type="text" name="recycleBin" class="form-control x-path"/>
         </div>
+
     </div>
 </fieldset>

src/UI/Settings/MediaManagement/Permissions/PermissionsView.js

@@ -3,37 +3,11 @@ define(
     [
         'marionette',
         'Mixins/AsModelBoundView',
-        'Mixins/AsValidatedView',
-        'Mixins/AutoComplete'
+        'Mixins/AsValidatedView'
     ], function (Marionette, AsModelBoundView, AsValidatedView) {
 
         var view = Marionette.ItemView.extend({
-            template: 'Settings/MediaManagement/Permissions/PermissionsViewTemplate',
-
-            ui: {
-                recyclingBin                  : '.x-path',
-                failedDownloadHandlingCheckbox: '.x-failed-download-handling',
-                failedDownloadOptions         : '.x-failed-download-options'
-            },
-
-            events: {
-                'change .x-failed-download-handling': '_setFailedDownloadOptionsVisibility'
-            },
-
-            onShow: function () {
-                this.ui.recyclingBin.autoComplete('/directories');
-            },
-
-            _setFailedDownloadOptionsVisibility: function () {
-                var checked = this.ui.failedDownloadHandlingCheckbox.prop('checked');
-                if (checked) {
-                    this.ui.failedDownloadOptions.slideDown();
-                }
-
-                else {
-                    this.ui.failedDownloadOptions.slideUp();
-                }
-            }
+            template: 'Settings/MediaManagement/Permissions/PermissionsViewTemplate'
         });
 
         AsModelBoundView.call(view);

src/UI/Shared/FileBrowser/EmptyView.js

@@ -0,0 +1,11 @@
+'use strict';
+
+define(
+    [
+        'marionette'
+    ], function (Marionette) {
+
+        return Marionette.CompositeView.extend({
+            template: 'Shared/FileBrowser/EmptyViewTemplate'
+        });
+    });

src/UI/Shared/FileBrowser/EmptyViewTemplate.hbs

@@ -0,0 +1,3 @@
+<div class="text-center col-md-12 file-browser-empty">
+    <span>No files/folders were found, edit the path above, or clear to start again</span>
+</div>

src/UI/Shared/FileBrowser/FileBrowserCollection.js

@@ -0,0 +1,39 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'backbone',
+        'Shared/FileBrowser/FileBrowserModel'
+    ], function ($, Backbone, FileBrowserModel) {
+
+        return Backbone.Collection.extend({
+            model: FileBrowserModel,
+            url  : window.NzbDrone.ApiRoot + '/filesystem',
+
+            parse: function(response) {
+                var contents = [];
+
+                if (response.parent || response.parent === '') {
+
+                    var type = 'parent';
+                    var name = '...';
+
+                    if (response.parent === '') {
+                        type = 'computer';
+                        name = 'My Computer';
+                    }
+
+                    contents.push({
+                        type : type,
+                        name : name,
+                        path : response.parent
+                    });
+                }
+
+                $.merge(contents, response.directories);
+                $.merge(contents, response.files);
+
+                return contents;
+            }
+        });
+    });

src/UI/Shared/FileBrowser/FileBrowserLayout.js

@@ -0,0 +1,169 @@
+'use strict';
+define(
+    [
+        'underscore',
+        'vent',
+        'marionette',
+        'backgrid',
+        'Shared/FileBrowser/FileBrowserCollection',
+        'Shared/FileBrowser/EmptyView',
+        'Shared/FileBrowser/FileBrowserRow',
+        'Shared/FileBrowser/FileBrowserTypeCell',
+        'Shared/FileBrowser/FileBrowserNameCell',
+        'Cells/RelativeDateCell',
+        'Cells/FileSizeCell',
+        'Shared/LoadingView',
+        'Mixins/DirectoryAutoComplete'
+    ], function (_,
+                 vent,
+                 Marionette,
+                 Backgrid,
+                 FileBrowserCollection,
+                 EmptyView,
+                 FileBrowserRow,
+                 FileBrowserTypeCell,
+                 FileBrowserNameCell,
+                 RelativeDateCell,
+                 FileSizeCell,
+                 LoadingView) {
+
+        return Marionette.Layout.extend({
+            template: 'Shared/FileBrowser/FileBrowserLayoutTemplate',
+
+            regions: {
+                browser : '#x-browser'
+            },
+
+            ui: {
+                path: '.x-path'
+            },
+
+            events: {
+                'typeahead:selected .x-path'      : '_pathChanged',
+                'typeahead:autocompleted .x-path' : '_pathChanged',
+                'keyup .x-path'                   : '_inputChanged',
+                'click .x-ok'                     : '_selectPath'
+            },
+
+            initialize: function (options) {
+                this.collection = new FileBrowserCollection();
+                this.collection.showFiles = options.showFiles || false;
+                this.collection.showLastModified = options.showLastModified || false;
+
+                this.input = options.input;
+
+                this._setColumns();
+                this._fetchCollection(this.input.val());
+                this.listenTo(this.collection, 'sync', this._showGrid);
+                this.listenTo(this.collection, 'filebrowser:folderselected', this._rowSelected);
+            },
+
+            onRender: function () {
+                this.browser.show(new LoadingView());
+            },
+
+            onShow: function () {
+                this.ui.path.directoryAutoComplete();
+                this._updatePath(this.input.val());
+            },
+
+            _setColumns: function () {
+                this.columns = [
+                    {
+                        name      : 'type',
+                        label     : '',
+                        sortable  : false,
+                        cell      : FileBrowserTypeCell
+                    },
+                    {
+                        name      : 'name',
+                        label     : 'Name',
+                        sortable  : false,
+                        cell      : FileBrowserNameCell
+                    }
+                ];
+
+                if (this.collection.showLastModified) {
+                    this.columns.push({
+                        name      : 'lastModified',
+                        label     : 'Last Modified',
+                        sortable  : false,
+                        cell      : RelativeDateCell
+                    });
+                }
+
+                if (this.collection.showFiles) {
+                    this.columns.push({
+                        name      : 'size',
+                        label     : 'Size',
+                        sortable  : false,
+                        cell      : FileSizeCell
+                    });
+                }
+            },
+
+            _fetchCollection: function (path) {
+                var data = {
+                    includeFiles : this.collection.showFiles
+                };
+
+                if (path) {
+                    data.path = path;
+                }
+
+                this.collection.fetch({
+                    data: data
+                });
+            },
+
+            _showGrid: function () {
+
+                if (this.collection.models.length === 0) {
+                    this.browser.show(new EmptyView());
+                    return;
+                }
+
+                var grid = new Backgrid.Grid({
+                    row        : FileBrowserRow,
+                    collection : this.collection,
+                    columns    : this.columns,
+                    className  : 'table table-hover'
+                });
+
+                this.browser.show(grid);
+            },
+
+            _rowSelected: function (model) {
+                var path = model.get('path');
+
+                this._updatePath(path);
+                this._fetchCollection(path);
+            },
+
+            _pathChanged: function (e, path) {
+                this._fetchCollection(path.value);
+                this._updatePath(path.value);
+            },
+
+            _inputChanged: function () {
+                var path = this.ui.path.val();
+
+                if (path === '' || path.endsWith('\\') || path.endsWith('/')) {
+                    this._fetchCollection(path);
+                }
+            },
+
+            _updatePath: function (path) {
+                if (path !== undefined || path !== null) {
+                    this.ui.path.val(path);
+                }
+            },
+
+            _selectPath: function () {
+                this.input.val(this.ui.path.val());
+                this.input.trigger('change');
+
+                vent.trigger(vent.Commands.CloseFileBrowser);
+            }
+        });
+    });

src/UI/Shared/FileBrowser/FileBrowserLayoutTemplate.hbs

@@ -0,0 +1,26 @@
+<div class="modal-content">
+    <div class="modal-header">
+    <button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
+    <h3>File Browser</h3>
+</div>
+    <div class="modal-body">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="form-group">
+                    <input type="text" class="form-control x-path" placeholder="Start typing or select a path below"/>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-sm-12">
+                <div id="x-browser"></div>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
+        <button class="btn" data-dismiss="modal">close</button>
+        <button class="btn btn-primary x-ok">ok</button>
+    </div>
+</div>

src/UI/Shared/FileBrowser/FileBrowserModalRegion.js

@@ -0,0 +1,63 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'backbone',
+        'marionette',
+        'bootstrap'
+    ], function ($, Backbone, Marionette) {
+        var region = Marionette.Region.extend({
+            el: '#file-browser-modal-region',
+
+            constructor: function () {
+                Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
+                this.on('show', this.showModal, this);
+            },
+
+            getEl: function (selector) {
+                var $el = $(selector);
+                $el.on('hidden', this.close);
+                return $el;
+            },
+
+            showModal: function () {
+                this.$el.addClass('modal fade');
+
+                //need tab index so close on escape works
+                //https://github.com/twitter/bootstrap/issues/4663
+                this.$el.attr('tabindex', '-1');
+                this.$el.css('z-index', '1060');
+
+                this.$el.modal({
+                    show     : true,
+                    keyboard : true,
+                    backdrop : true
+                });
+
+                this.$el.on('hide.bs.modal', $.proxy(this._closing, this));
+
+                this.$el.on('shown.bs.modal', function () {
+                    $('.modal-backdrop:last').css('z-index', 1059);
+                });
+
+                this.currentView.$el.addClass('modal-dialog');
+            },
+
+            closeModal: function () {
+                $(this.el).modal('hide');
+                this.reset();
+            },
+
+            _closing: function () {
+
+                if (this.$el) {
+                    this.$el.off('hide.bs.modal');
+                    this.$el.off('shown.bs.modal');
+                }
+
+                this.reset();
+            }
+        });
+
+        return region;
+    });

src/UI/Shared/FileBrowser/FileBrowserModel.js

@@ -0,0 +1,10 @@
+'use strict';
+define(
+    [
+        'backbone'
+    ], function (Backbone) {
+        return  Backbone.Model.extend({
+
+        });
+    });
+

src/UI/Shared/FileBrowser/FileBrowserNameCell.js

@@ -0,0 +1,23 @@
+'use strict';
+
+define(
+    [
+        'vent',
+        'Cells/NzbDroneCell'
+    ], function (vent, NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className: 'file-browser-name-cell',
+
+            render: function () {
+                this.$el.empty();
+
+                var name = this.model.get(this.column.get('name'));
+
+                this.$el.html(name);
+
+                this.delegateEvents();
+                return this;
+            }
+        });
+    });

src/UI/Shared/FileBrowser/FileBrowserRow.js

@@ -0,0 +1,31 @@
+'use strict';
+define(
+    [
+        'underscore',
+        'backgrid'
+    ], function (_, Backgrid) {
+
+        return Backgrid.Row.extend({
+            className: 'file-browser-row',
+
+            events: {
+                'click': '_selectRow'
+            },
+
+            _originalInit: Backgrid.Row.prototype.initialize,
+
+            initialize: function () {
+                this._originalInit.apply(this, arguments);
+            },
+
+            _selectRow: function () {
+                if (this.model.get('type') === 'file') {
+                    this.model.collection.trigger('filebrowser:fileselected', this.model);
+                }
+
+                else {
+                    this.model.collection.trigger('filebrowser:folderselected', this.model);
+                }
+            }
+        });
+    });

src/UI/Shared/FileBrowser/FileBrowserTypeCell.js

@@ -0,0 +1,40 @@
+'use strict';
+
+define(
+    [
+        'vent',
+        'Cells/NzbDroneCell'
+    ], function (vent, NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className: 'file-browser-type-cell',
+
+            render: function () {
+                this.$el.empty();
+
+                var type = this.model.get(this.column.get('name'));
+                var icon = 'icon-hdd';
+
+                if (type === 'computer') {
+                    icon = 'icon-desktop';
+                }
+
+                else if (type === 'parent') {
+                    icon = 'icon-level-up';
+                }
+
+                else if (type === 'folder') {
+                    icon = 'icon-folder-close';
+                }
+
+                else if (type === 'file') {
+                    icon = 'icon-file';
+                }
+
+                this.$el.html('<i class="{0}"></i>'.format(icon));
+
+                this.delegateEvents();
+                return this;
+            }
+        });
+    });

src/UI/Shared/FileBrowser/filebrowser.less

@@ -0,0 +1,24 @@
+.file-browser-row {
+  cursor : pointer;
+
+  .file-size-cell {
+    white-space : nowrap;
+  }
+
+  .relative-date-cell {
+    width : 120px;
+    white-space : nowrap;
+  }
+}
+
+.file-browser-type-cell {
+  width : 16px;
+}
+
+.file-browser-name-cell {
+  word-break : break-all;
+}
+
+.file-browser-empty {
+  margin-top : 20px;
+}

src/UI/Shared/Modal/ModalController.js

@@ -9,8 +9,18 @@ define(
         'Episode/EpisodeDetailsLayout',
         'Activity/History/Details/HistoryDetailsLayout',
         'System/Logs/Table/Details/LogDetailsView',
-        'Rename/RenamePreviewLayout'
-    ], function (vent, AppLayout, Marionette, EditSeriesView, DeleteSeriesView, EpisodeDetailsLayout, HistoryDetailsLayout, LogDetailsView, RenamePreviewLayout) {
+        'Rename/RenamePreviewLayout',
+        'Shared/FileBrowser/FileBrowserLayout'
+    ], function (vent,
+                 AppLayout,
+                 Marionette,
+                 EditSeriesView,
+                 DeleteSeriesView,
+                 EpisodeDetailsLayout,
+                 HistoryDetailsLayout,
+                 LogDetailsView,
+                 RenamePreviewLayout,
+                 FileBrowserLayout) {
 
         return Marionette.AppRouter.extend({
 
@@ -23,6 +33,8 @@ define(
                 vent.on(vent.Commands.ShowHistoryDetails, this._showHistory, this);
                 vent.on(vent.Commands.ShowLogDetails, this._showLogDetails, this);
                 vent.on(vent.Commands.ShowRenamePreview, this._showRenamePreview, this);
+                vent.on(vent.Commands.ShowFileBrowser, this._showFileBrowser, this);
+                vent.on(vent.Commands.CloseFileBrowser, this._closeFileBrowser, this);
             },
 
             _openModal: function (view) {
@@ -61,6 +73,15 @@ define(
             _showRenamePreview: function (options) {
                 var view = new RenamePreviewLayout(options);
                 AppLayout.modalRegion.show(view);
+            },
+
+            _showFileBrowser: function (options) {
+                var view = new FileBrowserLayout(options);
+                AppLayout.fileBrowserModalRegion.show(view);
+            },
+
+            _closeFileBrowser: function () {
+                AppLayout.fileBrowserModalRegion.closeModal();
             }
         });
     });

src/UI/index.html

@@ -52,6 +52,7 @@
                 </div>
             </div>
             <div id="modal-region"></div>
+            <div id="file-browser-modal-region"></div>
         </div>
     </div>
     <a id="scroll-up" title="Back to the top!">

src/UI/vent.js

@@ -26,6 +26,8 @@ define(
             SaveSettings              : 'saveSettings',
             ShowLogFile               : 'showLogFile',
             ShowRenamePreview         : 'showRenamePreview',
+            ShowFileBrowser           : 'showFileBrowser',
+            CloseFileBrowser          : 'closeFileBrowser',
             OpenControlPanelCommand   : 'OpenControlPanelCommand',
             CloseControlPanelCommand  : 'CloseControlPanelCommand'
         };