MediaField-Attached.Edit.cshtml

@model OrchardCore.Media.ViewModels.EditMediaFieldViewModel
@using Microsoft.Extensions.Options
@using OrchardCore
@using OrchardCore.ContentManagement.Metadata.Models
@using OrchardCore.Media
@using OrchardCore.Media.Settings
@using OrchardCore.Mvc.Utilities

@inject IOptions<MediaOptions> MediaOptions

@{
    var settings = Model.PartFieldDefinition.GetSettings<MediaFieldSettings>();
    var mediaFieldId = Html.IdFor(m => m);
}

<style asp-name="media" at="Head"></style>

<div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Paths)_FieldWrapper">
    <label asp-for="Paths" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
    <div class="@Orchard.GetEndClasses()" id="@mediaFieldId" data-for="@Html.IdFor(m => m.Paths)">
        @if (!string.IsNullOrWhiteSpace(settings.Hint))
        {
            <div class="hint mt-lg-2">@settings.Hint</div>
        }

        <input asp-for="Paths" type="hidden" class="paths" :value="paths" data-init="@Model.Paths" />

        <div class="media-field-toolbar mb-1" v-cloak>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-secondary btn-sm" :disabled="mediaItems.length < 1" v-on:click="smallThumbs = !smallThumbs">
                    <span v-show="!smallThumbs" title="@T[" Small Thumbs"]"><i class="fa-solid fa-compress-alt" aria-hidden="true"></i></span>
                    <span v-show="smallThumbs" title="@T[" Large Thumbs"]"><i class="fa-solid fa-expand-alt" aria-hidden="true"></i></span>
                </button>
                <label v-show="canAddMedia" class="btn btn-sm btn-secondary fileinput-button">
                    <input id="@mediaFieldId-field-file-upload" type="file" name="files" multiple="multiple">
                    <i class="fa-solid fa-upload"></i>
                </label>
                <a href="javascript:;" v-show="allowMediaText" v-on:click="showMediaTextModal" class="btn btn-secondary btn-sm" v-bind:class="{ disabled : !selectedMedia }"><i class="far fa-comment" aria-hidden="true"></i></a>
                <a href="javascript:;" v-show="allowAnchors" v-on:click="showAnchorModal" class="btn btn-secondary btn-sm" v-bind:class="{ disabled : !selectedMedia }"><i class="fa-solid fa-crosshairs" aria-hidden="true"></i></a>
                <a href="javascript:;" v-on:click="removeSelected" class="btn btn-secondary btn-sm" v-bind:class="{ disabled : !selectedMedia }"><i class="fa-solid fa-trash-alt" aria-hidden="true"></i></a>
            </div>
            <label class="selected-media-name form-label">
                <code class="text-end" v-if="selectedMedia">@T["{{{{ selectedMedia.attachedFileName !== null && selectedMedia.attachedFileName !== '' ? selectedMedia.attachedFileName : selectedMedia.name }}}}{{{{ selectedMedia.mediaText === '' ? '' : ', ' + selectedMedia.mediaText }}}} ({{{{ isNaN(fileSize)? 0 : fileSize }}}} KB)"]</code>
            </label>
        </div>

        <upload-list upload-input-id="@mediaFieldId-field-file-upload"></upload-list>

        <media-field-thumbs-container :media-items="mediaItems" :thumb-size="thumbSize" :selected-media="selectedMedia" :id-prefix="idPrefix"></media-field-thumbs-container>

        <partial name="Shared/MediaFieldEditMediaTextModal.cshtml" />
        <partial name="Shared/MediaFieldEditAnchorModal.cshtml" />

        @*Localizable Strings for uploadComponent*@
        <input type="hidden" id="t-error" value="@T["This file exceeds the maximum upload size"]" />

        @*Localizable Strings for uploadListcomponent*@
        <input type="hidden" id="t-uploads" value="@T["Uploads"]" />
        <input type="hidden" id="t-errors" value="@T["Errors"]" />
        <input type="hidden" id="t-clear-errors" value="@T["Clear Errors"]" />

    </div>

    <partial name="Shared/MediaFieldEditLocalization.cshtml" />

    <span asp-validation-for="Paths"></span>
</div>

<script asp-name="media" at="Foot"></script>
<script at="Foot">
    initializeAttachedMediaField(
        document.getElementById('@mediaFieldId'),
        '@mediaFieldId-field-file-upload',
        '@Url.Action("Upload", "Admin", new { area = "OrchardCore.Media" })',
        '@Url.Action("GetMediaItem", "Admin", new { area = "OrchardCore.Media" })',
    @(settings.Multiple ? "true" : "false"),
    @(settings.AllowMediaText ? "true" : "false"),
    @(settings.AllowAnchors ? "true" : "false"),
        '@Model.TempUploadFolder',
    @MediaOptions.Value.MaxUploadChunkSize);
</script>