secure-sharing/SecureSharing/Views/Home/Index.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using SecureSharing.Business.Infrastructure
@using System.Text.Json
@model MessageModel


<h1>Share files</h1>
<form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="CreateMessage" class="share-files-form">
    <label class="label-text">Sharing link avaliability</label>
    <div class="button-box col-lg-12">
        <div class="single-button-input">
            <input id="OneTime" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_TIME">
            <label for="OneTime" class="label-available"><span style="color:#FFA463">One</span> Time</label>
        </div>
        <div class="single-button-input">
            <input id="OneHour" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_HOUR"/> <label for="OneHour" class="label-available">1 <span style="color:#B9CFE4;">hour</span></label>
        </div>
        <div class="single-button-input">
            <input id="OneDay" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_DAY"/> <label for="OneDay" class="label-available">1 <span style="color:#B9CFE4;">day</span></label>
        </div>
        <div class="single-button-input">
            <input id="SevenDays" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_WEEK"/> <label for="SevenDays" class="label-available">7 <span style="color:#B9CFE4;">days</span></label>
        </div>
    </div>
    <label class="label-text">Message (optional)</label>
    <textarea asp-for="Text" class="input-message"></textarea>
    <label class="label-text">Upload files</label>
    <div id="dropContainer" class="drop-here">
        <img class="image-file-upload" src="~/img/file-upload-image.png" alt=""/>
        <div class="default-text text-files-upload">
            <label for="fileInput" class="btn browse-button">
                <span style="color:#0D1C52">Drag and drop files here or</span> browse
            </label>
            <input asp-for="Files" id="fileInput" type="file" multiple style="display: none"/>
        </div>
    </div>
    @{
        if (Model is not null  && Model.Files.Count > 0)
        {
            <div class="files hidden">
                <div class="label-text">Your files: </div>
                @foreach (var file in Model.Files)
                {
                    <div class="label-text">@file.Name</div>
                }
            </div>
        }
    }
    <button class=" btn btn-light share-button" type="submit">Share</button>
</form>

<script src="~/plugins/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var selectedFiles;

$(document).ready(() => {
  var box;
  box = document.getElementById("dropContainer");
  box.addEventListener("dragenter", OnDragEnter, false);
  box.addEventListener("dragover", OnDragOver, false);
  box.addEventListener("drop", OnDrop, false);
})

function OnDragEnter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function OnDragOver(e) {
  e.stopPropagation();
  e.preventDefault();
}

function OnDrop(e) {
  e.stopPropagation();
  e.preventDefault();
  selectedFiles = e.dataTransfer.files;
  //TODO: add Your files: with file uploading in it
  // $("#dropContainer").text(selectedFiles.length + " file(s) selected for uploading!");
}
</script>