Как интегрировать elFinder с ASP. NET Core как автономный? - PullRequest
Новая
       95

Как интегрировать elFinder с ASP. NET Core как автономный?

0 голосов
/ 17 марта 2020

Я использовал elFinder и tinymce с ASP. NET CORE 3 и работает отлично. Теперь я интегрирую elFinder автономно с ASP. NET Core, т.е. с помощью тега <input/>. Я хочу просмотреть файл из elFinder и сохранить URL-адрес файла в базе данных. Вот мой код Post Model: 

public class Post
    {
        public int Id
        public string Title { get; set; }
        public string Body { get; set; }
        public string FileURL{get;set;}
      }

У меня есть PostItemController, который сохраняет URL файла в базе данных. FileManagerController имеет действие просмотра для elFinder. browse.cs html views: 

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Browser</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/theme.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.50/css/elfinder.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.50/css/theme.min.css" />
    <link rel="stylesheet" href="~/css/elfinder/themes/material/css/theme-gray.css" />

</head>
<body>
    <div id="elfinder"></div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.50/js/elfinder.min.js"></script>

    <script type="text/javascript">

        $(function () {
            var myCommands = elFinder.prototype._options.commands;

            var disabled = ['extract', 'archive', 'resize', 'help', 'select']; // Not yet implemented commands in ElFinder.Net

            $.each(disabled, function (i, cmd) {
                (idx = $.inArray(cmd, myCommands)) !== -1 && myCommands.splice(idx, 1);
            });

            var options = {
                url: '/el-finder/file-system/connector', // Default (Local File System)
                //url: '/el-finder/azure-storage/connector', // Microsoft Azure Connector
                rememberLastDir: false, // Prevent elFinder saving in the Browser LocalStorage the last visited directory
                commands: myCommands,

                //lang: 'pt_BR', // elFinder supports UI and messages localization. Check the folder Content\elfinder\js\i18n for all available languages. Be sure to include the corresponding .js file(s) in the JavaScript bundle.
                uiOptions: { // UI buttons available to the user
                    toolbar: [
                        ['back', 'forward'],
                        ['reload'],
                        ['home', 'up'],
                        ['mkdir', 'mkfile', 'upload'],
                        ['open', 'download'],
                        ['undo', 'redo'],
                        ['info'],
                        ['quicklook'],
                        ['copy', 'cut', 'paste'],
                        ['rm'],
                        ['duplicate', 'rename', 'edit'],
                        ['selectall', 'selectnone', 'selectinvert'],
                        ['view', 'sort']
                    ]
                },
                getFileCallback : function(file) {
                        window.opener.processFile(file);
                        window.close();
                }

                //getFileCallback: function (file, elf) {
                //        // the magic is here, use function from "main.html" for update input value
                //        window.parent.opener.processSelectedFile(file.path, '{{ $input_id  }}');
                //        window.close();
                //    }
                //getFileCallback: function (file, fm) { // editor callback (see: https://github.com/Studio-42/elFinder/wiki/Integration-with-TinyMCE-4.x)
                //    // pass selected file data to TinyMCE
                //    parent.tinymce.activeEditor.windowManager.getParams().oninsert(file, fm);
                //    // close popup window
                //    parent.tinymce.activeEditor.windowManager.close();
                //}
            };
            $('#elfinder').elfinder(options).elfinder('instance');
        });
    </script>

</body>
</html>

Create.cs html view 

@model PostFormVM

@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";

}
<h1>
</h1><div class="card">
    <div class="card-body">
        <form asp-controller="PostItem" asp-action="New" method="POST">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Id" />

            <div class="row">
                <div class="col-8">
                    <div class="form-group">
                        <label asp-for="Title" class="control-label"></label>
                        <input asp-for="Title" class="form-control" />
                        <span asp-validation-for="Title" class="text-danger"></span>
                    </div>


                    <div class="form-group">
                        <label asp-for="Body" class="control-label"></label>
                        <textarea asp-for="Body" class="form-control"></textarea>

                        <span asp-validation-for="Body" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <div id="picture">
                            <span>No picture?Use the browse button to select one!</span>
                        </div>
                        <div class="button-group">
                            <input type="text" asp-for="FileURL" id="FileURL" placeholder="Profile Image Url" readonly name="featured_image" />
                            <button type="button" class="browse" id="imageUpload"> Browse </button>
                        </div>
                    </div> 
                   </div>
                </div>
<div class="form-group">
                <input type="submit" value="Save" class="btn btn-space btn-primary" />
                <a href="/postitem/index" class="btn btn-space btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>    

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/js/jquery.popupWindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#imageUpload').popupWindow({
                windowURL: '/filemanager/browse',
                windowName: 'File Manager',
                height: 490,
                width: 950,
                centerScreen: 1
            });
        });

        function processFile(file) {
            $('#picture').html('<img src="' + file + '" />');
            $('#FileURL').val(file);
        }
    </script>   
}

После нажатия кнопки обзора открывается elfinder, и выбор файла возвращает только [объект, объект ] в поле ввода. Как я могу получить точную ссылку на файл при выборе файла?

Click here for image view

...