mirror of
https://git.teknik.io/Teknikode/Teknik.git
synced 2023-08-02 14:16:22 +02:00
Cleaned up Uploader UI
This commit is contained in:
parent
1c18526244
commit
73f30571f5
@ -33,22 +33,32 @@ namespace Teknik.Areas.Upload.Controllers
|
||||
|
||||
[HttpGet]
|
||||
[AllowAnonymous]
|
||||
public IActionResult Index()
|
||||
public async Task<IActionResult> Index()
|
||||
{
|
||||
ViewBag.Title = "Upload Files";
|
||||
UploadViewModel model = new UploadViewModel();
|
||||
model.CurrentSub = Subdomain;
|
||||
Users.Models.User user = UserHelper.GetUser(_dbContext, User.Identity.Name);
|
||||
if (user != null)
|
||||
model.Encrypt = false;
|
||||
model.ExpirationLength = 1;
|
||||
model.ExpirationUnit = ExpirationUnit.Days;
|
||||
model.MaxUploadSize = _config.UploadConfig.MaxUploadSize;
|
||||
if (User.Identity.IsAuthenticated)
|
||||
{
|
||||
model.Encrypt = user.UploadSettings.Encrypt;
|
||||
model.ExpirationLength = user.UploadSettings.ExpirationLength;
|
||||
model.ExpirationUnit = user.UploadSettings.ExpirationUnit;
|
||||
model.Vaults = user.Vaults.ToList();
|
||||
}
|
||||
else
|
||||
{
|
||||
model.Encrypt = false;
|
||||
User user = UserHelper.GetUser(_dbContext, User.Identity.Name);
|
||||
if (user != null)
|
||||
{
|
||||
model.Encrypt = user.UploadSettings.Encrypt;
|
||||
model.ExpirationLength = user.UploadSettings.ExpirationLength;
|
||||
model.ExpirationUnit = user.UploadSettings.ExpirationUnit;
|
||||
model.Vaults = user.Vaults.ToList();
|
||||
|
||||
model.MaxUploadSize = _config.UploadConfig.MaxUploadSizeBasic;
|
||||
IdentityUserInfo userInfo = await IdentityHelper.GetIdentityUserInfo(_config, User.Identity.Name);
|
||||
if (userInfo.AccountType == AccountType.Premium)
|
||||
{
|
||||
model.MaxUploadSize = _config.UploadConfig.MaxUploadSizePremium;
|
||||
}
|
||||
}
|
||||
}
|
||||
return View(model);
|
||||
}
|
||||
|
@ -19,6 +19,8 @@ namespace Teknik.Areas.Upload.ViewModels
|
||||
|
||||
public List<Vault.Models.Vault> Vaults { get; set; }
|
||||
|
||||
public long MaxUploadSize { get; set; }
|
||||
|
||||
public UploadViewModel()
|
||||
{
|
||||
CurrentSub = string.Empty;
|
||||
@ -26,6 +28,7 @@ namespace Teknik.Areas.Upload.ViewModels
|
||||
ExpirationLength = 1;
|
||||
ExpirationUnit = ExpirationUnit.Never;
|
||||
Vaults = new List<Vault.Models.Vault>();
|
||||
MaxUploadSize = 0;
|
||||
}
|
||||
}
|
||||
}
|
@ -2,23 +2,11 @@
|
||||
|
||||
@using Teknik.Areas.Vault.Models
|
||||
|
||||
@{
|
||||
long maxUploadSize = Config.UploadConfig.MaxUploadSize;
|
||||
if (User.Identity.IsAuthenticated)
|
||||
{
|
||||
maxUploadSize = Config.UploadConfig.MaxUploadSizeBasic;
|
||||
//if (User.Info.AccountType == AccountType.Premium)
|
||||
//{
|
||||
// maxUploadSize = Config.UploadConfig.MaxUploadSizePremium;
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
<script>
|
||||
var encScriptSrc = '@Url.FullURL("~/js/cryptoWorker.min.js")';
|
||||
var aesScriptSrc = '@Url.FullURL("~/js/crypto.min.js")';
|
||||
var uploadFileURL = '@Url.SubRouteUrl(Model.CurrentSub, "Upload.Action", new { action = "Upload" })';
|
||||
var maxUploadSize = @maxUploadSize;
|
||||
var maxUploadSize = @Model.MaxUploadSize;
|
||||
var chunkSize = @Config.UploadConfig.ChunkSize;
|
||||
var keySize = @Config.UploadConfig.KeySize;
|
||||
var blockSize = @Config.UploadConfig.BlockSize;
|
||||
@ -32,30 +20,66 @@
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-10 col-sm-offset-1">
|
||||
<div class="row text-center">
|
||||
<div class="well well-lg text-center" id="uploadButton" style="cursor: pointer">
|
||||
<div class="text-center upload__drop-container" id="uploadButton" style="cursor: pointer">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1>Drop your files here</h1>
|
||||
<h3 class="upload__drop-text"><span class="fa fa-cloud-upload fa-5x"></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>Or paste them</h2>
|
||||
<h2 class="upload__drop-text">DRAG & DROP</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h3>Or click</h3>
|
||||
<span class="upload__drop-text">Or select files from your system</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<small class="upload__drop-text text-muted">(Individual file size limit @StringHelper.GetBytesReadable(Model.MaxUploadSize))</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#uploadSettings"><i class="fa fa-gear"></i></button>
|
||||
<div class="col-sm-1 upload__help-icon">
|
||||
<a href="@Url.SubRouteUrl("help", "Help.Upload")"><i class="fa fa-question-circle-o"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="upload-action-buttons" style="display: none">
|
||||
|
||||
<div class="row form-horizontal">
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
<div class="form-group form-group-sm">
|
||||
<label for="encrypt" class="col-sm-6 control-label">Encrypt in Browser</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="checkbox" class="center-block" name="encrypt" id="encrypt" @(Model.Encrypt ? "checked" : string.Empty) />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5">
|
||||
<div class="form-group form-group-sm">
|
||||
<label class="col-sm-2 control-label">Expiration</label>
|
||||
<fieldset @(User.Identity.IsAuthenticated ? "" : "disabled")>
|
||||
<div class="col-sm-4 hidden" id="length-div">
|
||||
<input type="number" min="1" step="1" class="form-control" name="expirelength" id="expirelength" value="@Model.ExpirationLength" )>
|
||||
</div>
|
||||
<div class="col-sm-10" id="unit-div">
|
||||
<select class="form-control" name="expireunit" id="expireunit">
|
||||
@foreach (ExpirationUnit unit in Enum.GetValues(typeof(ExpirationUnit)))
|
||||
{
|
||||
<!option value="@unit" @(Model.ExpirationUnit == unit ? "selected" : string.Empty)>@unit.ToString()</!option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row upload__action-buttons" id="upload-action-buttons" style="display: none">
|
||||
<div class="col-sm-12">
|
||||
<div class="btn-group pull-right" role="group">
|
||||
<button type="button" class="btn btn-default btn-sm" id="copy-all" data-toggle="popover" data-trigger="manual" data-placement="top" data-content="Copied to Clipboard" data-container="body"><i class="fa fa-clipboard"></i> Copy All Links</button>
|
||||
@ -77,9 +101,6 @@
|
||||
</div>
|
||||
<br />
|
||||
<div class="well text-center">
|
||||
<p>
|
||||
The maximum file size per upload is <b>@StringHelper.GetBytesReadable(maxUploadSize)</b>
|
||||
</p>
|
||||
<p>
|
||||
Each file is encrypted after upload using an AES-256-CTR cipher. You can encrypt it within your browser for extra security by setting the option <strong>Encrypt in Browser</strong> in the options pane.
|
||||
</p>
|
||||
@ -89,52 +110,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="uploadSettings" tabindex="-1" role="dialog" aria-labelledby="uploadSettingsLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 text-center">
|
||||
<h4 class="text-center">Encrypt in Browser</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<input type="checkbox" class="center-block" name="encrypt" id="encrypt" @(Model.Encrypt ? "checked" : string.Empty) />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (User.Identity.IsAuthenticated)
|
||||
{
|
||||
<div class="col-sm-6">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 text-center">
|
||||
<h4 class="text-center">Expiration</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4 hidden" id="length-div">
|
||||
<input type="number" min="1" step="1" class="form-control" name="expirelength" id="expirelength" value="@Model.ExpirationLength">
|
||||
</div>
|
||||
<div class="col-sm-12" id="unit-div">
|
||||
<select class="form-control" name="expireunit" id="expireunit">
|
||||
@foreach (ExpirationUnit unit in Enum.GetValues(typeof(ExpirationUnit)))
|
||||
{
|
||||
<!option value="@unit" @(Model.ExpirationUnit == unit ? "selected" : string.Empty)>@unit.ToString()</!option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="templates" style="display: none">
|
||||
<div class="row" id="upload-template">
|
||||
<div class="col-sm-12">
|
||||
|
36
Teknik/Content/Upload/Upload.css
Normal file
36
Teknik/Content/Upload/Upload.css
Normal file
@ -0,0 +1,36 @@
|
||||
.upload__drop-container {
|
||||
border: 2px dashed #CACACA;
|
||||
background-color: #f5f5f5;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.upload__drop-container .upload__drop-text {
|
||||
opacity: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.upload__drop-container:hover {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
|
||||
.upload__drop-container:hover .upload__drop-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.upload__help-icon {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.upload__help-icon a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.upload__help-icon a i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 12px;
|
||||
}
|
@ -12,7 +12,12 @@ $(document).ready(function () {
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
$("[name='encrypt']").bootstrapSwitch();
|
||||
$("[name='encrypt']").bootstrapSwitch({ size: "small" });
|
||||
|
||||
// Initialize the widths
|
||||
setExpireWidth($("#expireunit").val());
|
||||
|
||||
linkExpireSelect($("#expireunit"));
|
||||
|
||||
linkCopyAll($('#copy-all'));
|
||||
linkCreateVault($('#create-vault'));
|
||||
@ -21,13 +26,6 @@ $(document).ready(function () {
|
||||
linkAddToVault($(this));
|
||||
});
|
||||
|
||||
$('#uploadSettings').on('shown.bs.modal', function () {
|
||||
// Initialize the widths
|
||||
setExpireWidth($('#uploadSettings').find("#expireunit").val());
|
||||
|
||||
linkExpireSelect($('#uploadSettings').find("#expireunit"));
|
||||
});
|
||||
|
||||
document.onpaste = function (event) {
|
||||
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
|
||||
for (var index in items) {
|
||||
@ -257,9 +255,9 @@ function processFile(fileBlob, fileName, contentType, contentSize, fileID, token
|
||||
var fileExt = getFileExtension(fileName);
|
||||
|
||||
// Get session settings
|
||||
var encrypt = $('#uploadSettings').find('#encrypt').is(':checked');
|
||||
var expireUnit = $('#uploadSettings').find("#expireunit").val();
|
||||
var expireLength = $('#uploadSettings').find("#expirelength").val();
|
||||
var encrypt = $('#encrypt').is(':checked');
|
||||
var expireUnit = $("#expireunit").val();
|
||||
var expireLength = $("#expirelength").val();
|
||||
|
||||
var options = {
|
||||
encrypt: encrypt,
|
||||
|
@ -193,7 +193,8 @@
|
||||
"outputFileName": "./wwwroot/css/upload.min.css",
|
||||
"inputFiles": [
|
||||
"./wwwroot/lib/dropzone/css/dropzone.css",
|
||||
"./wwwroot/lib/bootstrap/css/bootstrap-switch.css"
|
||||
"./wwwroot/lib/bootstrap/css/bootstrap-switch.css",
|
||||
"./wwwroot/css/app/Upload/Upload.css"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user