JavaScript

using System.ComponentModel.DataAnnotations;
using FMH.Komponente.Basis.Ui.Validation.DataAnnotation;
using FMH.Komponente.FileUpload.Models;
using FMH.Komponente.Infrastruktur;

namespace FMH.Komponente.WebUI.Areas.FileUpload.Models
{
    /// <summary>
    /// Ausgangslage für «Dropzone sperren und freigeben». Die Schaltflächen des Beispiels sprechen
    /// das Feld über seinen Namen an, deshalb bleibt es ohne <c>[UniqueId]</c>: Der
    /// Eigenschaftsname entspricht damit 1:1 der Html-Id und ist im Skript vorhersagbar.
    /// </summary>
    public class DropzoneStatusBeispielViewModel
    {
        /// <summary>
        /// Die Dokumentliste, deren Ablagebereich das Beispiel schaltet.
        /// </summary>
        [UIHint(UiEditor.FileUpload.DokumentListe)]
        [Display(Name = "Kursbelege")]
        [AdditionalMetadata(UiMetadata.FileUpload.UploadUrl, "/FileUpload/DropzoneStatusBeispiel/Upload")]
        [AdditionalMetadata(UiMetadata.FileUpload.MaxFileSizeInMb, "1")]
        [AdditionalMetadata(UiMetadata.FileUpload.MaxFiles, "5")]
        [AdditionalMetadata(UiMetadata.FileUpload.DownloadActionName, "Download")]
        [AdditionalMetadata(UiMetadata.FileUpload.DownloadControllerName, "DropzoneStatusBeispiel")]
        public DokumentListeViewModel Kursbelege { get; set; } = new DokumentListeViewModel();
    }
}

using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using FMH.Komponente.Basis.Erweiterungen;
using FMH.Komponente.Basis.Ui.Feedback.Alert;
using FMH.Komponente.FileUpload.Models;
using FMH.Komponente.WebUI.Areas.FileUpload.Models;
using Microsoft.AspNetCore.Mvc;

namespace FMH.Komponente.WebUI.Areas.FileUpload.Controllers.Beispiele
{
    /// <summary>
    /// Serverseitig unterscheidet sich dieses Beispiel nicht vom Grundfall, der Lerninhalt steht
    /// im Skript des Partials, das die Dropzone zur Laufzeit sperrt und wieder freigibt. Der
    /// Controller liefert nur die Ausgangslage samt Endpunkten, damit sich die freigegebene
    /// Dropzone auch benutzen lässt.
    /// </summary>
    [Area("FileUpload")]
    public class DropzoneStatusBeispielController : Controller
    {
        private static readonly ConcurrentDictionary<int, string> Dokumente =
            new ConcurrentDictionary<int, string>(
                new Dictionary<int, string> { [11] = "Kursbestaetigung.pdf" });

        private static int letzteId = 300;

        /// <summary>
        /// Auch die Doku-Seite zeigt die gefüllte Liste, deshalb öffentlich.
        /// </summary>
        /// <returns>Das Modell mit der Ausgangslage des Beispiels.</returns>
        public static DropzoneStatusBeispielViewModel ErstelleModell()
        {
            var modell = new DropzoneStatusBeispielViewModel();

            modell.Kursbelege.Dokumente = Dokumente
                .OrderBy(eintrag => eintrag.Key)
                .Select(eintrag => new DokumentEintrag
                                   {
                                       DokumentEintragId = eintrag.Key,
                                       Name = eintrag.Value,
                                       Groesse = 40000 + (eintrag.Key * 100),
                                   })
                .ToList();

            return modell;
        }

        /// <summary>
        /// Zeigt das Beispiel.
        /// </summary>
        /// <returns>Die Ansicht mit der Ausgangslage.</returns>
        [HttpGet]
        public IActionResult Index()
        {
            return this.View(ErstelleModell());
        }

        /// <summary>
        /// Nimmt das Formular entgegen und meldet zurück, wie viele Dokumente dazugekommen sind.
        /// </summary>
        /// <param name="modell">Das abgesendete Modell.</param>
        /// <returns>Weiterleitung auf die Ansicht (PRG).</returns>
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Index(DropzoneStatusBeispielViewModel modell)
        {
            var anzahlNeu = modell.Kursbelege.DokumentIds?.Length ?? 0;

            this.AddAlert(
                $"Formular übertragen – {anzahlNeu} neue(s) Dokument(e).",
                AlertType.Success,
                autoHide: true);

            return this.RedirectToAction(nameof(this.Index));
        }

        /// <summary>
        /// Der Upload-Endpunkt dieses Beispiels.
        /// </summary>
        /// <returns>Json mit der vergebenen Id.</returns>
        [HttpPost]
        public IActionResult Upload()
        {
            if (this.Request.Headers.ContainsKey("IsDropzoneRequest") == false || this.Request.Form.Files.Count == 0)
            {
                return this.Json(new { id = 0 });
            }

            var datei = this.Request.Form.Files[0];
            var bezeichnung = this.Request.Form["DateiBezeichnung"].ToString();
            var name = string.IsNullOrWhiteSpace(bezeichnung) ? datei.FileName : bezeichnung;

            var id = Interlocked.Increment(ref letzteId);
            Dokumente[id] = name;

            return this.Json(new { id });
        }

        /// <summary>
        /// Der Download-Endpunkt dieses Beispiels.
        /// </summary>
        /// <param name="id">Die Id des Dokuments aus der Tabellenzeile.</param>
        /// <returns>Die Datei zum Herunterladen.</returns>
        [HttpGet]
        public IActionResult Download(int id)
        {
            if (Dokumente.TryGetValue(id, out var name) == false)
            {
                return this.NotFound();
            }

            var inhalt = Encoding.UTF8.GetBytes($"Platzhalter-Inhalt für «{name}» (Id {id}).");

            return this.File(inhalt, "text/plain", name);
        }
    }
}

// Beispiel «Dropzone sperren und freigeben» (FileUpload).
//
// Die beiden Funktionen sind global und kommen aus jquery-fmh-fileupload.js der Komponente
// FileUpload. Sie erwarten den **Eigenschaftsnamen** des Feldes, nicht einen Selektor, ein
// führendes '#' wird zwar toleriert, gehört aber nicht hin.
//
// Gesperrt wird der Ablagebereich #dz-content-<Feldname>; an seine Stelle tritt der Hinweis
// #dz-content-inaktiv-<Feldname>, und die Schaltfläche für schmale Bildschirme wird deaktiviert.
var dropzoneFunktionen = {
    'sperren': disableDropzone,
    'freigeben': enableDropzone,
};

// Delegation an das document: Der Zeitpunkt des Renderns spielt damit keine Rolle.
document.addEventListener('click', function (ereignis) {
    var knopf = ereignis.target.closest('[data-dropzone]');

    if (knopf === null) {
        return;
    }

    var funktion = dropzoneFunktionen[knopf.dataset.dropzone];

    if (funktion) {
        funktion(knopf.dataset.dropzoneFeld);
    }
});

// Dieselbe Umsetzung mit jQuery. Diese Datei wird NICHT geladen, sie steht nur im Code-Tab
// «jQuery».
//
// Unterschied zur JavaScript-Fassung: die delegierte Bindung über $(document).on(...) statt
// addEventListener plus closest. Die beiden aufgerufenen Funktionen sind dieselben.
var dropzoneFunktionen = {
    'sperren': disableDropzone,
    'freigeben': enableDropzone,
};

$(document).on('click', '[data-dropzone]', function () {
    var funktion = dropzoneFunktionen[$(this).data('dropzone')];

    if (funktion) {
        funktion($(this).data('dropzone-feld'));
    }
});