From 00914208ba24c6b5eb9610321998e8a167050ba2 Mon Sep 17 00:00:00 2001 From: Shaun Walker Date: Sat, 22 Feb 2020 09:56:28 -0500 Subject: [PATCH] added image preview to the file manager component --- .../Modules/Admin/ModuleDefinitions/Add.razor | 2 +- Oqtane.Client/Modules/Admin/Themes/Add.razor | 2 +- .../Modules/Admin/Upgrade/Index.razor | 2 +- .../Modules/Controls/FileManager.razor | 147 +++++++++++------- .../Modules/Controls/RichTextEditor.razor | 16 +- Oqtane.Server/Controllers/FileController.cs | 54 +++++-- Oqtane.Server/Oqtane.Server.csproj | 1 + Oqtane.Server/Repository/SiteRepository.cs | 2 +- Oqtane.Server/Scripts/00.00.00.sql | 2 + Oqtane.Shared/Models/File.cs | 2 + Oqtane.Shared/Models/Site.cs | 19 --- Oqtane.Shared/Shared/Constants.cs | 3 + 12 files changed, 164 insertions(+), 88 deletions(-) diff --git a/Oqtane.Client/Modules/Admin/ModuleDefinitions/Add.razor b/Oqtane.Client/Modules/Admin/ModuleDefinitions/Add.razor index 4e534cc7..a051164f 100644 --- a/Oqtane.Client/Modules/Admin/ModuleDefinitions/Add.razor +++ b/Oqtane.Client/Modules/Admin/ModuleDefinitions/Add.razor @@ -11,7 +11,7 @@ - + diff --git a/Oqtane.Client/Modules/Admin/Themes/Add.razor b/Oqtane.Client/Modules/Admin/Themes/Add.razor index 5ea8f8c5..70e03747 100644 --- a/Oqtane.Client/Modules/Admin/Themes/Add.razor +++ b/Oqtane.Client/Modules/Admin/Themes/Add.razor @@ -11,7 +11,7 @@ - + diff --git a/Oqtane.Client/Modules/Admin/Upgrade/Index.razor b/Oqtane.Client/Modules/Admin/Upgrade/Index.razor index 7448f435..d5e4c8a4 100644 --- a/Oqtane.Client/Modules/Admin/Upgrade/Index.razor +++ b/Oqtane.Client/Modules/Admin/Upgrade/Index.razor @@ -11,7 +11,7 @@ - + diff --git a/Oqtane.Client/Modules/Controls/FileManager.razor b/Oqtane.Client/Modules/Controls/FileManager.razor index d61e05c2..2177f43e 100644 --- a/Oqtane.Client/Modules/Controls/FileManager.razor +++ b/Oqtane.Client/Modules/Controls/FileManager.razor @@ -6,60 +6,72 @@ @if (folders != null) { - - @if (showfiles) - { - + @if (string.IsNullOrEmpty(Folder)) + { + + } + @foreach (Folder folder in folders) + { + if (folder.FolderId == folderid) + { + + } + else + { + + } + } + + @if (showfiles) { - + } - else + @if (haseditpermission) { - +
+ @if (uploadmultiple) + { + + } + else + { + + } + + @if (showfiles && GetFileId() != -1) + { + + } + +
+ @((MarkupString)@message) } - } - - } - @if (haseditpermission) - { -
- @if (uploadmultiple) - { - - } - else - { - - } - - @if (showfiles && GetFileId() != -1) - { - - } - +
+
+ @if (@image != "") + { + @((MarkupString)@image) + } +
- @((MarkupString)@message) - } + } @code { @@ -76,11 +88,12 @@ public string FileId { get; set; } // optional - for setting a specific file by default [Parameter] - public string Filter { get; set; } // optional - comma delimited list of file types that can be selected or uploaded ie. ".jpg,.gif" + public string Filter { get; set; } // optional - comma delimited list of file types that can be selected or uploaded ie. "jpg,gif" [Parameter] public string UploadMultiple { get; set; } // optional - enable multiple file uploads - default false + string id; List folders; int folderid = -1; @@ -94,6 +107,7 @@ bool uploadmultiple = false; bool haseditpermission = false; string message = ""; + string image = ""; protected override async Task OnInitializedAsync() { @@ -115,6 +129,7 @@ if (!string.IsNullOrEmpty(FileId)) { fileid = int.Parse(FileId); + await SetImage(); if (fileid != -1) { File file = await FileService.GetFileAsync(int.Parse(FileId)); @@ -131,7 +146,7 @@ if (!string.IsNullOrEmpty(Filter)) { - filter = Filter; + filter = "." + Filter.Replace(",",",."); } await GetFiles(); @@ -184,7 +199,7 @@ } } - private async void FolderChanged(ChangeEventArgs e) + private async Task FolderChanged(ChangeEventArgs e) { message = ""; try @@ -192,6 +207,7 @@ folderid = int.Parse((string)e.Value); await GetFiles(); fileid = -1; + image = ""; StateHasChanged(); } catch (Exception ex) @@ -201,13 +217,36 @@ } } - private void FileChanged(ChangeEventArgs e) + private async Task FileChanged(ChangeEventArgs e) { message = ""; fileid = int.Parse((string)e.Value); + await SetImage(); StateHasChanged(); } + private async Task SetImage() + { + image = ""; + if (fileid != -1) + { + File file = await FileService.GetFileAsync(fileid); + if (file.ImageHeight != 0 && file.ImageWidth != 0) + { + int maxwidth = 200; + int maxheight = 200; + + double ratioX = (double)maxwidth / (double)file.ImageWidth; + double ratioY = (double)maxheight / (double)file.ImageHeight; + double ratio = ratioX < ratioY ? ratioX : ratioY; + + image = "\"""; + } + } + } + private async Task UploadFile() { var interop = new Interop(jsRuntime); @@ -236,6 +275,7 @@ if (file != null) { fileid = file.FileId; + await SetImage(); } } StateHasChanged(); @@ -268,6 +308,7 @@ message = "
File Deleted
"; await GetFiles(); fileid = -1; + await SetImage(); StateHasChanged(); } catch (Exception ex) diff --git a/Oqtane.Client/Modules/Controls/RichTextEditor.razor b/Oqtane.Client/Modules/Controls/RichTextEditor.razor index 1f49e21d..affadeb7 100644 --- a/Oqtane.Client/Modules/Controls/RichTextEditor.razor +++ b/Oqtane.Client/Modules/Controls/RichTextEditor.razor @@ -4,11 +4,17 @@ @if (filemanagervisible) { - + @((MarkupString)@message) +
}
+ @if (filemanagervisible) + { + @((MarkupString)"  ") + + }

@@ -114,4 +120,12 @@ } StateHasChanged(); } + + public async Task CloseFileManager() + { + filemanagervisible = false; + message = ""; + StateHasChanged(); + } + } \ No newline at end of file diff --git a/Oqtane.Server/Controllers/FileController.cs b/Oqtane.Server/Controllers/FileController.cs index cf99306d..26a83c80 100644 --- a/Oqtane.Server/Controllers/FileController.cs +++ b/Oqtane.Server/Controllers/FileController.cs @@ -13,6 +13,7 @@ using System.Threading; using System.Threading.Tasks; using Oqtane.Security; using System.Linq; +using System.Drawing; namespace Oqtane.Controllers { @@ -25,7 +26,6 @@ namespace Oqtane.Controllers private readonly IUserPermissions UserPermissions; private readonly ITenantResolver Tenants; private readonly ILogManager logger; - private readonly string WhiteList = "jpg,jpeg,jpe,gif,bmp,png,mov,wmv,avi,mp4,mp3,doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,nupkg"; public FileController(IWebHostEnvironment environment, IFileRepository Files, IFolderRepository Folders, IUserPermissions UserPermissions, ITenantResolver Tenants, ILogManager logger) { @@ -139,16 +139,23 @@ namespace Oqtane.Controllers string folderpath = GetFolderPath(folder); CreateDirectory(folderpath); string filename = url.Substring(url.LastIndexOf("/") + 1); - try + // check for allowable file extensions + if (Constants.UploadableFiles.Contains(Path.GetExtension(filename).Replace(".", ""))) { - var client = new System.Net.WebClient(); - client.DownloadFile(url, folderpath + filename); - FileInfo fileinfo = new FileInfo(folderpath + filename); - file = Files.AddFile(new Models.File { Name = filename, FolderId = folder.FolderId, Extension = fileinfo.Extension.Replace(".",""), Size = (int)fileinfo.Length }); + try + { + var client = new System.Net.WebClient(); + client.DownloadFile(url, folderpath + filename); + Files.AddFile(CreateFile(filename, folder.FolderId, folderpath + filename)); + } + catch + { + logger.Log(LogLevel.Error, this, LogFunction.Create, "File Could Not Be Downloaded From Url {Url}", url); + } } - catch + else { - logger.Log(LogLevel.Error, this, LogFunction.Create, "File Could Not Be Downloaded From Url {Url}", url); + logger.Log(LogLevel.Error, this, LogFunction.Create, "File Could Not Be Downloaded From Url Due To Its File Extension {Url}", url); } } else @@ -193,8 +200,7 @@ namespace Oqtane.Controllers string upload = await MergeFile(folderpath, file.FileName); if (upload != "" && folderid != -1) { - FileInfo fileinfo = new FileInfo(folderpath + upload); - Files.AddFile(new Models.File { Name = upload, FolderId = folderid, Extension = fileinfo.Extension.Replace(".", ""), Size = (int)fileinfo.Length }); + Files.AddFile(CreateFile(upload, folderid, folderpath + upload)); } } else @@ -248,7 +254,7 @@ namespace Oqtane.Controllers } // check for allowable file extensions - if (!WhiteList.Contains(Path.GetExtension(filename).Replace(".", ""))) + if (!Constants.UploadableFiles.Contains(Path.GetExtension(filename).Replace(".", ""))) { System.IO.File.Delete(Path.Combine(folder, filename + ".tmp")); } @@ -357,5 +363,31 @@ namespace Oqtane.Controllers } } } + + private Models.File CreateFile(string filename, int folderid, string filepath) + { + Models.File file = new Models.File(); + file.Name = filename; + file.FolderId = folderid; + + FileInfo fileinfo = new FileInfo(filepath); + file.Extension = fileinfo.Extension.ToLower().Replace(".", ""); + file.Size = (int)fileinfo.Length; + file.ImageHeight = 0; + file.ImageWidth = 0; + + if (Constants.ImageFiles.Contains(file.Extension)) + { + FileStream stream = new FileStream(filepath, FileMode.Open, FileAccess.Read); + using (var image = Image.FromStream(stream)) + { + file.ImageHeight = image.Height; + file.ImageWidth = image.Width; + } + stream.Close(); + } + + return file; + } } } \ No newline at end of file diff --git a/Oqtane.Server/Oqtane.Server.csproj b/Oqtane.Server/Oqtane.Server.csproj index b9c304de..bdf1e2b9 100644 --- a/Oqtane.Server/Oqtane.Server.csproj +++ b/Oqtane.Server/Oqtane.Server.csproj @@ -44,6 +44,7 @@ + diff --git a/Oqtane.Server/Repository/SiteRepository.cs b/Oqtane.Server/Repository/SiteRepository.cs index d206c763..495930ba 100644 --- a/Oqtane.Server/Repository/SiteRepository.cs +++ b/Oqtane.Server/Repository/SiteRepository.cs @@ -176,7 +176,7 @@ namespace Oqtane.Repository FolderRepository.AddFolder(new Folder { SiteId = site.SiteId, ParentId = folder.FolderId, Name = "Users", Path = "Users\\", Order = 1, IsSystem = true, Permissions = "[{\"PermissionName\":\"Browse\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]" }); if (site.Name == "Default Site") { - File file = FileRepository.AddFile(new File { FolderId = folder.FolderId, Name = "logo.png", Extension = "png", Size = 8192 }); + File file = FileRepository.AddFile(new File { FolderId = folder.FolderId, Name = "logo.png", Extension = "png", Size = 8192, ImageHeight = 80, ImageWidth = 250 }); site.LogoFileId = file.FileId; UpdateSite(site); } diff --git a/Oqtane.Server/Scripts/00.00.00.sql b/Oqtane.Server/Scripts/00.00.00.sql index 29637d45..e43b1e76 100644 --- a/Oqtane.Server/Scripts/00.00.00.sql +++ b/Oqtane.Server/Scripts/00.00.00.sql @@ -285,6 +285,8 @@ CREATE TABLE [dbo].[File]( [Name] [nvarchar](250) NOT NULL, [Extension] [nvarchar](50) NOT NULL, [Size] [int] NOT NULL, + [ImageHeight] [int] NOT NULL, + [ImageWidth] [int] NOT NULL, [CreatedBy] [nvarchar](256) NOT NULL, [CreatedOn] [datetime] NOT NULL, [ModifiedBy] [nvarchar](256) NOT NULL, diff --git a/Oqtane.Shared/Models/File.cs b/Oqtane.Shared/Models/File.cs index 44acbcbd..ae20fa11 100644 --- a/Oqtane.Shared/Models/File.cs +++ b/Oqtane.Shared/Models/File.cs @@ -9,6 +9,8 @@ namespace Oqtane.Models public string Name { get; set; } public string Extension { get; set; } public int Size { get; set; } + public int ImageHeight { get; set; } + public int ImageWidth { get; set; } public string CreatedBy { get; set; } public DateTime CreatedOn { get; set; } diff --git a/Oqtane.Shared/Models/Site.cs b/Oqtane.Shared/Models/Site.cs index 439f5131..bcb358df 100644 --- a/Oqtane.Shared/Models/Site.cs +++ b/Oqtane.Shared/Models/Site.cs @@ -1,5 +1,4 @@ using System; -using System.ComponentModel.DataAnnotations.Schema; namespace Oqtane.Models { @@ -21,23 +20,5 @@ namespace Oqtane.Models public string DeletedBy { get; set; } public DateTime? DeletedOn { get; set; } public bool IsDeleted { get; set; } - - [NotMapped] - public string TenantRootPath - { - get - { - return "Tenants/" + TenantId.ToString() + "/"; - } - } - - [NotMapped] - public string SiteRootPath - { - get - { - return "Tenants/" + TenantId.ToString() + "/Sites/" + SiteId.ToString() + "/"; - } - } } } diff --git a/Oqtane.Shared/Shared/Constants.cs b/Oqtane.Shared/Shared/Constants.cs index e6c2fcca..fe4a12dd 100644 --- a/Oqtane.Shared/Shared/Constants.cs +++ b/Oqtane.Shared/Shared/Constants.cs @@ -31,5 +31,8 @@ public const string HostRole = "Host Users"; public const string AdminRole = "Administrators"; public const string RegisteredRole = "Registered Users"; + + public const string ImageFiles = "jpg,jpeg,jpe,gif,bmp,png"; + public const string UploadableFiles = "jpg,jpeg,jpe,gif,bmp,png,mov,wmv,avi,mp4,mp3,doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,nupkg"; } }