djordje.djoric
/
secure-sharing


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using SecureSharing.Business.Infrastructure
@model MessageModel
<body>
<h1>Share files</h1>
    <form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="CreateMessage" class="share-files-form">
        <div class="mb-3">
            <label class="label-text">Sharing link avaliability</label>
            <div class="button-box row">
                <div class="single-button-input col-4">
                    <input id="OneTime" checked="checked" 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 d-none">
                    <input id="OneHour" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_HOUR"/> <label for="OneHour" class="label-available">1 hour</label>
                </div>
                <div class="single-button-input col-4">
                    <input id="OneDay" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_DAY"/> <label for="OneDay" class="label-available">1 day</label>
                </div>
                <div class="single-button-input col-4">
                    <input id="SevenDays" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_WEEK"/> <label for="SevenDays" class="label-available">7 days</label>
                </div>
            </div>
        </div>
        <div class="mb-3">
            <label class="label-text">Message (optional)</label>
            <textarea asp-for="Text" class="input-message"></textarea>
        </div>
        <div class="mb-3">
            <label class="label-text">Upload files</label>
            <div 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"/>
                    <input asp-for="FilesAsText" id="fileInputAsText" type="text" style="display:none" value="978682e8-3ce7-4258-b731-d027b5b213aa"/>
                </div>
            </div>
        </div>

        <div class="mb-3">
            <div class="label-text">
                Your files
            </div>
            <div id="filesUploaded">
            </div>
        </div>

        <div class="button-box row">
            <div class="mb-3">
                <label class="label-text">Anonymous share</label>
                <div class="tooltip-div">
                    <i class="fas fa-info"></i>
                    <span class="tooltip-label">This indicates that this message will be visible to people outside diligent network.</span>
                </div>
                <label class="switch">
                    <input id="Anonymous" type="checkbox" asp-for="Anonymous" value="true">
                    <span class="slider round"></span>
                </label>
            </div>
            <div class="mb-3">
                <label class="label-text">Allow editing</label>
                <div class="tooltip-div">
                    <i class="fas fa-info"></i>
                    <span class="tooltip-label">This indicates that this message can be edited by everyone.</span>
                </div>
                <label class="switch">
                    <input id="AllowEditing" type="checkbox" asp-for="AllowEditing" value="true">
                    <span class="slider round"></span>
                </label>
            </div>
        </div>

        <button class=" btn btn-light share-button" type="submit">Share</button>
    </form>
</body>
<script src="~/plugins/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
let filesUploaded = document.getElementById("filesUploaded");
$('#fileInput').change(function() {
  let files = $('#fileInput')[0].files

  for (let i = 0; i < files.length; i++){
    filesUploaded.innerHTML +='<p>' +  files[i].name + '</p>';
  }
});

document.getElementById("AllowEditing").onchange = () => {
    if (document.getElementById("AllowEditing").checked === true){
        document.getElementById("Anonymous").checked = true;
    }
};

document.getElementById("Anonymous").onchange = () => {
    if (document.getElementById("AllowEditing").checked === true){
        document.getElementById("Anonymous").checked = true;
    }
};

let selectedFiles;

$(document).ready(() => {
  let box;
  box = document.body;
  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();
  let selectedFiles = e.dataTransfer.files;
  let formData = new FormData();
  let fileInput = document.getElementById("fileInputAsText");
  
  for (let i = 0; i < selectedFiles.length; i++){
    formData.append(selectedFiles[i].name, selectedFiles[i]);
  }
  
  $.ajax({  
    url: '/Home/UploadTemporaryFile',  
    type: "POST",  
    contentType: false,
    processData: false, 
    data: formData,  
    success: function (result) {  
        for (let i = 0; i < selectedFiles.length; i++){
            fileInput.value += result + ':' + selectedFiles[i].name + ';';
            filesUploaded.innerHTML += '<p>' +  selectedFiles[i].name + '</p>';
        }        
    },  
    error: function (err) {  
        console.log(err)
    }  
  });  
}
</script>