Cleaned up Uploader UI

Teknik/Areas/Upload/Controllers/UploadController.cs

@@ -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);
+            model.Encrypt = false;
-            if (user != null)
+            model.ExpirationLength = 1;
+            model.ExpirationUnit = ExpirationUnit.Days;
+            model.MaxUploadSize = _config.UploadConfig.MaxUploadSize;
+            if (User.Identity.IsAuthenticated)
             {
-                model.Encrypt = user.UploadSettings.Encrypt;
+                User user = UserHelper.GetUser(_dbContext, User.Identity.Name);
-                model.ExpirationLength = user.UploadSettings.ExpirationLength;
+                if (user != null)
-                model.ExpirationUnit = user.UploadSettings.ExpirationUnit;
+                {
-                model.Vaults = user.Vaults.ToList();
+                    model.Encrypt = user.UploadSettings.Encrypt;
-            }
+                    model.ExpirationLength = user.UploadSettings.ExpirationLength;
-            else
+                    model.ExpirationUnit = user.UploadSettings.ExpirationUnit;
-            {
+                    model.Vaults = user.Vaults.ToList();
-                model.Encrypt = false;
+
+                    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);
         }

Teknik/Areas/Upload/ViewModels/UploadViewModel.cs

@@ -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;
         }
     }
 }

Teknik/Areas/Upload/Views/Upload/Index.cshtml

@@ -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 &amp; 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">
+        <div class="col-sm-1 upload__help-icon">
-            <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#uploadSettings"><i class="fa fa-gear"></i></button>
+            <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>&nbsp;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">

Teknik/Content/Upload/Upload.css

@@ -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;
+}

Teknik/Scripts/Upload/Upload.js

@@ -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 encrypt = $('#encrypt').is(':checked');
-        var expireUnit = $('#uploadSettings').find("#expireunit").val();
+        var expireUnit = $("#expireunit").val();
-        var expireLength = $('#uploadSettings').find("#expirelength").val();
+        var expireLength = $("#expirelength").val();
 
         var options = {
             encrypt: encrypt,

Teknik/bundleconfig.json

@@ -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"
         ]
     },
     {