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

@namespace Oqtane.Modules.Controls
@inherits ModuleBase        
@attribute [OqtaneIgnore]
@inject IFolderService FolderService
@inject IFileService FileService
@inject IJSRuntime JsRuntime

@if (_folders != null)
{
    <div id="@Id" class="container-fluid px-0">
        <div class="row">
            <div class="col">
                <div>
                    <select class="form-control" @onchange="(e => FolderChanged(e))">
                        @if (string.IsNullOrEmpty(Folder))
                        {
                            <option value="-1">&lt;Select Folder&gt;</option>
                        }
                        @foreach (Folder folder in _folders)
                        {
                            if (folder.FolderId == _folderid)
                            {
                                <option value="@(folder.FolderId)" selected>@(new string('-', folder.Level * 2))@(folder.Name)</option>
                            }
                            else
                            {
                                <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
                            }
                        }
                    </select>
                </div>
                @if (_showfiles)
                {
                    <div>
                        <select class="form-control" @onchange="(e => FileChanged(e))">
                            <option value="-1">&lt;Select File&gt;</option>
                            @foreach (File file in _files)
                            {
                                if (file.FileId == _fileid)
                                {
                                    <option value="@(file.FileId)" selected>@(file.Name)</option>
                                }
                                else
                                {
                                    <option value="@(file.FileId)">@(file.Name)</option>
                                }
                            }
                        </select>
                    </div>
                }
                @if (_haseditpermission)
                {
                    <div>
                        @if (_uploadmultiple)
                        {
                            <input type="file" id="@_fileinputid" name="file" accept="@_filter" multiple />
                        }
                        else
                        {
                            <input type="file" id="@_fileinputid" name="file" accept="@_filter" />
                        }
                        <span id="@_progressinfoid"></span><progress id="@_progressbarid" style="width: 150px; visibility: hidden;"></progress>
                        <span class="float-right">
                        <button type="button" class="btn btn-success" @onclick="UploadFile">Upload</button>
                        @if (_showfiles && GetFileId() != -1)
                        {
                            <button type="button" class="btn btn-danger" @onclick="DeleteFile">Delete</button>
                        }
                        </span>
                    </div>
                    @((MarkupString)_message)
                }
            </div>
            @if (_image != string.Empty)
            {
                <div class="col-auto">
                    @((MarkupString)_image)
                </div>
            }
        </div>
    </div>
}

@code {
    private string _id;
    private List<Folder> _folders;
    private int _folderid = -1;
    private List<File> _files = new List<File>();
    private int _fileid = -1;
    private bool _showfiles = true;
    private string _fileinputid = string.Empty;
    private string _progressinfoid = string.Empty;
    private string _progressbarid = string.Empty;
    private string _filter = "*";
    private bool _uploadmultiple = false;
    private bool _haseditpermission = false;
    private string _message = string.Empty;
    private string _image = string.Empty;
    private string _guid;

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

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

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

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

    [Parameter]
    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"

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

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

        if (!string.IsNullOrEmpty(Folder))
        {
            _folders = new List<Folder> {new Folder {FolderId = -1, Name = Folder}};
            _folderid = -1;
        }
        else
        {
            _folders = await FolderService.GetFoldersAsync(ModuleState.SiteId);
            if (!string.IsNullOrEmpty(FolderId))
            {
                _folderid = int.Parse(FolderId);
            }
        }

        if (!string.IsNullOrEmpty(FileId))
        {
            _fileid = int.Parse(FileId);
            if (_fileid != -1)
            {
                File file = await FileService.GetFileAsync(int.Parse(FileId));
                if (file != null)
                {
                    _folderid = file.FolderId;
                }
                else
                {
                    _fileid = -1; // file does not exist
                }
            }
            await SetImage();
        }
        if (!string.IsNullOrEmpty(ShowFiles))
        {
            _showfiles = bool.Parse(ShowFiles);
        }

        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";

        if (!string.IsNullOrEmpty(UploadMultiple))
        {
            _uploadmultiple = bool.Parse(UploadMultiple);
        }
    }

    private async Task GetFiles()
    {
        _haseditpermission = false;
        if (!string.IsNullOrEmpty(Folder))
        {
            _haseditpermission = UserSecurity.IsAuthorized(PageState.User, Constants.HostRole);
            _files = await FileService.GetFilesAsync(Folder);
        }
        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;
            _image = string.Empty;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            await logger.LogError(ex, "Error Loading Files {Error}", ex.Message);
            _message = "<br /><div class=\"alert alert-danger\" role=\"alert\">Error Loading Files</div>";
        }
    }

    private async Task FileChanged(ChangeEventArgs e)
    {
        _message = string.Empty;
        _fileid = int.Parse((string)e.Value);

        await SetImage();
        StateHasChanged();
    }

    private async Task SetImage()
    {
        _image = string.Empty;
        if (_fileid != -1)
        {
            File file = await FileService.GetFileAsync(_fileid);
            if (file != null && 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=\"" + ContentUrl(_fileid) + "\" alt=\"" + file.Name +
                    "\" width=\"" + Convert.ToInt32(file.ImageWidth * ratio).ToString() +
                    "\" height=\"" + Convert.ToInt32(file.ImageHeight * ratio).ToString() + "\" />";
            }
        }
    }

    private async Task UploadFile()
    {
        var interop = new Interop(JsRuntime);
        var upload = await interop.GetFiles(_fileinputid);
        if (upload.Length > 0)
        {
            try
            {
                string result;
                if (!string.IsNullOrEmpty(Folder))
                {
                    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);
                    _message = "<br /><div class=\"alert alert-success\" role=\"alert\">File Upload Succeeded</div>";
                    await GetFiles();

                    if (upload.Length == 1)
                    {
                        var file = _files.Where(item => item.Name == upload[0]).FirstOrDefault();
                        if (file != null)
                        {
                            _fileid = file.FileId;
                            await SetImage();
                        }
                    }
                    StateHasChanged();
                }
                else
                {
                    await logger.LogError("File Upload Failed For {Files}", result.Replace(",", ", "));
                    _message = "<br /><div class=\"alert alert-danger\" role=\"alert\">File Upload Failed</div>";
                }
            }
            catch (Exception ex)
            {
                await logger.LogError(ex, "File Upload Failed {Error}", ex.Message);
                _message = "<br /><div class=\"alert alert-danger\" role=\"alert\">File Upload Failed</div>";
            }
        }
        else
        {
            _message = "<br /><div class=\"alert alert-warning\" role=\"alert\">You Have Not Selected A File To Upload</div>";
        }
    }

    private async Task DeleteFile()
    {
        _message = string.Empty;

        try
        {
            await FileService.DeleteFileAsync(_fileid);
            await logger.LogInformation("File Deleted {File}", _fileid);
            _message = "<br /><div class=\"alert alert-success\" role=\"alert\">File Deleted</div>";
            await GetFiles();
            _fileid = -1;
            await SetImage();
            StateHasChanged();
        }
        catch (Exception ex)
        {
            await logger.LogError(ex, "Error Deleting File {File} {Error}", _fileid, ex.Message);
            _message = "<br /><div class=\"alert alert-danger\" role=\"alert\">Error Deleting File</div>";
        }
    }

    public int GetFileId() => _fileid;

}