oqtane.framework/Oqtane.Client/Modules/Controls/FileManager.razor

@namespace Oqtane.Modules.Controls
@inherits ModuleControlBase
@inject IFolderService FolderService
@inject IFileService FileService
@inject IStringLocalizer<FileManager> Localizer
@inject IStringLocalizer<SharedResources> SharedLocalizer

@if (_folders != null)
{
    <div id="@Id" class="container-fluid px-0">
        <div class="row">
            <div class="col">
                <div class="container-fluid px-0">
                    @if (ShowFolders)
                    {
                        <div class="row">
                            <div class="col">
                                <select class="form-select" value="@FolderId" @onchange="(e => FolderChanged(e))">
                                    <option value="-1">&lt;@Localizer["Folder.Select"]&gt;</option>
                                    @foreach (Folder folder in _folders)
                                    {
                                        <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
                                    }
                                </select>
                            </div>
                        </div>
                    }
                    @if (ShowFiles)
                    {
                        <div class="row mt-1">
                            <div class="col">
                                <select class="form-select" value="@FileId" @onchange="(e => FileChanged(e))">
                                    <option value="-1">&lt;@Localizer["File.Select"]&gt;</option>
                                    @foreach (File file in _files)
                                    {
                                        <option value="@(file.FileId)">@(file.Name)</option>
                                    }
                                </select>
                            </div>
                        </div>
                    }
                    @if (ShowUpload && _haseditpermission)
                    {
                        <div class="row">
                            <div class="col mt-2">
                                @if (UploadMultiple)
                                {
                                    <input type="file" id="@_fileinputid" name="file" accept="@_filter" multiple />
                                }
                                else
                                {
                                    <input type="file" id="@_fileinputid" name="file" accept="@_filter" />
                                }
                            </div>
                            <div class="col mt-2 text-center">
                                <button type="button" class="btn btn-success" @onclick="UploadFile">@SharedLocalizer["Upload"]</button>
                                @if (ShowFiles && GetFileId() != -1)
                                {
                                    <button type="button" class="btn btn-danger mx-1" @onclick="DeleteFile">@SharedLocalizer["Delete"]</button>
                                }
                            </div>
                        </div>
                        <div class="row">
                            <div class="col mt-1"><span id="@_progressinfoid" style="display: none;"></span></div>
                            <div class="col text-center mt-1"><progress id="@_progressbarid" class="mt-1" style="display: none;"></progress></div>
                        </div>
                    }
                </div>
            </div>
            @if (_image != string.Empty)
            {
                <div class="col-auto">
                    @((MarkupString) _image)
                </div>
            }
        </div>
        @if (!string.IsNullOrEmpty(_message))
        {
            <div class="row mt-1">
                <div class="col">
                    <ModuleMessage Message="@_message" Type="@_messagetype" />
                </div>
            </div>
        }
    </div>
}

@code {
    private string _id;
    private List<Folder> _folders;
    private List<File> _files = new List<File>();
    private string _fileinputid = string.Empty;
    private string _progressinfoid = string.Empty;
    private string _progressbarid = string.Empty;
    private string _filter = "*";
    private bool _haseditpermission = false;
    private string _image = string.Empty;
    private File _file = null;
    private string _guid;
    private string _message = string.Empty;
    private MessageType _messagetype;

    [Parameter]
    public string Id { get; set; } // optional - for setting the id of the FileManager component for accessibility

    [Parameter]
    public int FolderId { get; set; } = -1; // optional - for setting a specific default folder by folderid 

    [Parameter]
    public string Folder { get; set; } = ""; // optional - for setting a specific default folder by folder path 

    [Parameter]
    public int FileId { get; set; } = -1; // optional - for selecting 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"

    [Parameter]
    public bool ShowFiles { get; set; } = true; // optional - for indicating whether a list of files should be displayed - default is true

    [Parameter]
    public bool ShowUpload { get; set; } = true; // optional - for indicating whether a Upload controls should be displayed - default is true

    [Parameter]
    public bool ShowFolders { get; set; } = true; // optional - for indicating whether a list of folders should be displayed - default is true

    [Parameter]
    public bool ShowImage { get; set; } = true; // optional - for indicating whether an image thumbnail should be displayed - default is true

    [Parameter]
    public bool ShowSuccess { get; set; } = false; // optional - for indicating whether a success message should be displayed upon successful upload - default is false

    [Parameter]
    public bool UploadMultiple { get; set; } = false; // optional - enable multiple file uploads - default false

    [Parameter]
    public EventCallback<int> OnUpload { get; set; } // optional - executes a method in the calling component when a file is uploaded

    [Parameter]
    public EventCallback<int> OnSelect { get; set; } // optional - executes a method in the calling component when a file is selected

    [Parameter]
    public EventCallback<int> OnDelete { get; set; } // optional - executes a method in the calling component when a file is deleted

    protected override async Task OnInitializedAsync()
    {
        if (!string.IsNullOrEmpty(Id))
        {
            _id = Id;
        }

        // packages folder is a framework folder for uploading installable nuget packages
        if (Folder == Constants.PackagesFolder)
        {
            ShowFiles = false;
            ShowFolders = false;
            Filter = "nupkg";
            ShowSuccess = true;
        }

        if (!ShowFiles)
        {
            ShowImage = false;
        }

        _folders = await FolderService.GetFoldersAsync(ModuleState.SiteId);

        if (!string.IsNullOrEmpty(Folder) && Folder != Constants.PackagesFolder)
        {
            Folder folder = await FolderService.GetFolderAsync(ModuleState.SiteId, Folder);
            if (folder != null)
            {
                FolderId = folder.FolderId;
            }
            else
            {
                FolderId = -1;
                _message = "Folder Path " + Folder + "Does Not Exist";
                _messagetype = MessageType.Error;
            }
        }

        if (FileId != -1)
        {
            File file = await FileService.GetFileAsync(FileId);
            if (file != null)
            {
                FolderId = file.FolderId;
                await OnSelect.InvokeAsync(FileId);
            }
            else
            {
                FileId = -1; // file does not exist
                _message = "FileId " + FileId.ToString() + "Does Not Exist";
                _messagetype = MessageType.Error;
            }
        }

        await SetImage();

        if (!string.IsNullOrEmpty(Filter))
        {
            _filter = "." + Filter.Replace(",", ",.");
        }

        await GetFiles();

        // create unique id for component
        _guid = Guid.NewGuid().ToString("N");
        _fileinputid = _guid + "FileInput";
        _progressinfoid = _guid + "ProgressInfo";
        _progressbarid = _guid + "ProgressBar";
    }

    private async Task GetFiles()
    {
        _haseditpermission = false;
        if (Folder == Constants.PackagesFolder)
        {
            _haseditpermission = UserSecurity.IsAuthorized(PageState.User, RoleNames.Host);
            _files = new List<File>();
        }
        else
        {
            Folder folder = _folders.FirstOrDefault(item => item.FolderId == FolderId);
            if (folder != null)
            {
                _haseditpermission = UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, folder.Permissions);
                _files = await FileService.GetFilesAsync(FolderId);
            }
            else
            {
                _haseditpermission = false;
                _files = new List<File>();
            }
        }
        if (_filter != "*")
        {
            List<File> filtered = new List<File>();
            foreach (File file in _files)
            {
                if (_filter.ToUpper().IndexOf("." + file.Extension.ToUpper()) != -1)
                {
                    filtered.Add(file);
                }
            }
            _files = filtered;
        }
    }

    private async Task FolderChanged(ChangeEventArgs e)
    {
        _message = string.Empty;
        try
        {
            FolderId = int.Parse((string)e.Value);
            await GetFiles();
            FileId = -1;
            _file = null;
            _image = string.Empty;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            await logger.LogError(ex, "Error Loading Files {Error}", ex.Message);
            _message = Localizer["Error.File.Load"];
            _messagetype = MessageType.Error;
        }
    }

    private async Task FileChanged(ChangeEventArgs e)
    {
        _message = string.Empty;
        FileId = int.Parse((string)e.Value);
        if (FileId != -1)
        {
            await OnSelect.InvokeAsync(FileId);
        }

        await SetImage();
        StateHasChanged();
    }

    private async Task SetImage()
    {
        _image = string.Empty;
        _file = null;
        if (FileId != -1)
        {
            _file = await FileService.GetFileAsync(FileId);
            if (_file != null && ShowImage && _file.ImageHeight != 0 && _file.ImageWidth != 0)
            {
                var maxwidth = 200;
                var maxheight = 200;

                var ratioX = (double)maxwidth / (double)_file.ImageWidth;
                var ratioY = (double)maxheight / (double)_file.ImageHeight;
                var ratio = ratioX < ratioY ? ratioX : ratioY;

                _image = "<img src=\"" + _file.Url + "\" alt=\"" + _file.Name +
                         "\" width=\"" + Convert.ToInt32(_file.ImageWidth * ratio).ToString() +
                         "\" height=\"" + Convert.ToInt32(_file.ImageHeight * ratio).ToString() + "\" />";
            }
        }
    }

    private async Task UploadFile()
    {
        _message = string.Empty;
        var interop = new Interop(JSRuntime);
        var upload = await interop.GetFiles(_fileinputid);
        if (upload.Length > 0)
        {
            try
            {
                string result;
                if (Folder == Constants.PackagesFolder)
                {
                    result = await FileService.UploadFilesAsync(Folder, upload, _guid);
                }
                else
                {
                    result = await FileService.UploadFilesAsync(FolderId, upload, _guid);
                }

                if (result == string.Empty)
                {
                    await logger.LogInformation("File Upload Succeeded {Files}", upload);
                    if (ShowSuccess)
                    {
                        _message = Localizer["Success.File.Upload"];
                        _messagetype = MessageType.Success;
                    }

                    // set FileId to first file in upload collection
                    await GetFiles();
                    var file = _files.Where(item => item.Name == upload[0]).FirstOrDefault();
                    if (file != null)
                    {
                        FileId = file.FileId;
                        await SetImage();
                        await OnUpload.InvokeAsync(FileId);
                    }
                    StateHasChanged();
                }
                else
                {
                    await logger.LogError("File Upload Failed For {Files}", result.Replace(",", ", "));

                    _message = Localizer["Error.File.Upload"];
                    _messagetype = MessageType.Error;
                }
            }
            catch (Exception ex)
            {
                await logger.LogError(ex, "File Upload Failed {Error}", ex.Message);

                _message = Localizer["Error.File.Upload"];
                _messagetype = MessageType.Error;
            }
        }
        else
        {
            _message = Localizer["Message.File.NotSelected"];
            _messagetype = MessageType.Warning;
        }
    }

    private async Task DeleteFile()
    {
        _message = string.Empty;
        try
        {
            await FileService.DeleteFileAsync(FileId);
            await logger.LogInformation("File Deleted {File}", FileId);
            await OnDelete.InvokeAsync(FileId);

            _message = Localizer["Success.File.Delete"];
            _messagetype = MessageType.Success;

            await GetFiles();
            FileId = -1;
            await SetImage();
            StateHasChanged();
        }
        catch (Exception ex)
        {
            await logger.LogError(ex, "Error Deleting File {File} {Error}", FileId, ex.Message);

            _message = Localizer["Error.File.Delete"];
            _messagetype = MessageType.Error;
        }
    }

    public int GetFileId() => FileId;

    public int GetFolderId() => FolderId;

    public File GetFile() => _file;
}