ildar-shaymukhametov_grandnode-refactorings/Grand.Web/Areas/Admin/Views/Shared/EditorTemplates/Picture.cshtml
@model string
@using Grand.Core;
@using Grand.Framework.UI;
@inject Grand.Services.Media.IPictureService pictureService
@inject IPageHeadBuilder pagebuilder
@{
    //register CSS and JS
    pagebuilder.AddCssFileParts(ResourceLocation.Head, "~/scripts/fineuploader/fineuploader-4.2.2.min.css", excludeFromBundle: true);
    pagebuilder.AddScriptParts(ResourceLocation.Head, "~/scripts/fineuploader/jquery.fineuploader-4.2.2.min.js", excludeFromBundle: true);

    //other variables
    var random = CommonHelper.GenerateRandomInteger();
    var clientId = "picture" + random;
    var picture = await pictureService.GetPictureById(Model);
    var targetPictureSize = 100;

}
<div id="@(clientId + "value")">
    <input asp-for="@Model" type="hidden" />
</div>
<div id="@(clientId + "image")">
    <img src="@(await pictureService.GetPictureUrl(Model, targetSize: targetPictureSize, showDefaultPicture: true))" />
</div>
@if (picture != null)
{
    <span id="@(clientId + "remove")" class="btn red btn-outline margin-top-10">@T("Admin.Picture.RemovePicture")</span>
}
else
{
    <span id="@(clientId + "remove")" class="btn red btn-outline" style="display:none;">@T("Admin.Picture.RemovePicture")</span>
}
<br />
@*fine uploader container*@
<div id="@clientId">
    <noscript>
        <p>
            Please enable JavaScript to use file uploader.
        </p>
        <!-- or put a simple form for upload here -->
    </noscript>
</div>
@*fine uploader template (keep it synchronized to \Content\fineuploader\templates\default.html)*@
<script type="text/template" id="@(clientId)-qq-template">
    <div class="qq-uploader-selector qq-uploader">
        <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
            <span>@T("Common.FileUploader.DropFiles")</span>
        </div>
        <div class="qq-upload-button-selector qq-upload-button btn yellow" style="margin: 10px 0px 10px 0px;">
            <div>@T("Common.FileUploader.Upload")</div>
        </div>
        <span class="qq-drop-processing-selector qq-drop-processing">
            <span>@T("Common.FileUploader.Processing")</span>
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
        </span>
        <ul class="qq-upload-list-selector qq-upload-list">
            <li>
                <div class="qq-progress-bar-container-selector">
                    <div class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>
                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                <span class="qq-upload-size-selector qq-upload-size"></span>
                <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">@T("Common.FileUploader.Cancel")</a>
                <a class="qq-upload-retry-selector qq-upload-retry" href="#">@T("Common.FileUploader.Retry")</a>
                <a class="qq-upload-delete-selector qq-upload-delete" href="#">@T("Common.FileUploader.Delete")</a>
                <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
        </ul>
    </div>
</script>

<script>
    $(document).ready(function() {

        $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Action("AsyncUpload", "Picture"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false,
            validation: {
                itemLimit: 5,
                acceptFiles: 'image/*',
            }
        }).on("complete", function(event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                $("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
                $("#@(clientId + "value") input").val(responseJSON.pictureId);
                $("#@(clientId + "remove")").show();
            }
        });

        $("#@(clientId + "remove")").click(function(e) {
            $("#@(clientId + "image")").html("<img src='@await pictureService.GetDefaultPictureUrl(targetPictureSize)'/>");
            $("#@(clientId + "value") input").val('');
            $(".qq-upload-list").empty();
            $(this).hide();
        });
    });
</script>
