Improved file uploader, added attributes to Input component

Author: Bukk94

src/Blazor.AdminLte.Site/FilesController.cs

@@ -16,7 +16,7 @@ public FilesController()
 
 
         [HttpPost("UploadFileChunk")]
-        public Task<bool> UploadFileChunk([FromBody] ChunkedDataRequestDto chunkedDataRequestDto)
+        public Task<bool> UploadFileChunkAsync([FromBody] ChunkedDataRequestDto chunkedDataRequestDto)
         {
             try
             {
@@ -46,7 +46,7 @@ public Task<bool> UploadFileChunk([FromBody] ChunkedDataRequestDto chunkedDataRe
 
 
         [HttpGet("GetFiles")]
-        public Task<List<string>> GetFileNames()
+        public Task<List<string>> GetFileNamesAsync()
         {
             var result = new List<string>();
             var files = Directory.GetFiles(Environment.CurrentDirectory + "\\StaticFiles", "*.*");

src/Blazor.AdminLte.Wasm/WasmFilesManager.cs

@@ -16,7 +16,7 @@ public WasmFilesManager(HttpClient http)
         } //FilesManager
 
 
-        public async Task<bool> UploadFileChunk(ChunkedDataRequestDto fileChunkDto)
+        public async Task<bool> UploadFileChunkAsync(ChunkedDataRequestDto fileChunkDto)
         {
             try
             {
@@ -32,7 +32,7 @@ public async Task<bool> UploadFileChunk(ChunkedDataRequestDto fileChunkDto)
         } //UploadFileChunk
 
 
-        public async Task<List<string>> GetFileNames()
+        public async Task<List<string>> GetFileNamesAsync()
         {
             try
             {

src/Blazor.AdminLte/Files/FileChunkDto.cs

@@ -1,10 +1,13 @@
-namespace Blazor.AdminLte
+using System;
+
+namespace Blazor.AdminLte
 {
     public class ChunkedDataRequestDto
     {
         public string FileName { get; set; } = "";
         public long Offset { get; set; }
-        public byte[]? Data { get; set; }
+        public byte[] Data { get; set; }
         public bool FirstChunk = false;
+        public Guid Uid { get; set; }
     }
 }

src/Blazor.AdminLte/Files/FileUploader.razor

@@ -23,7 +23,7 @@
     </div>
 </div>
 
-@if (filesQueue.Count > 0) { 
+@if (_filesQueue.Count > 0) { 
     <div class="card mb-4">
         <div class="card-header">Upload queue</div>
         <div class="card-body">
@@ -39,7 +39,7 @@
                     </tr>
                 </thead>
                 <tbody>            
-                    @foreach (var file in filesQueue.OrderByDescending(x => x.FileId))
+                    @foreach (var file in _filesQueue.OrderByDescending(x => x.FileId))
                     {
                         var size = Math.Round((file.Size / 1024.00));
                         var percentage = Math.Round(file.UploadedPercentage);

src/Blazor.AdminLte/Files/FileUploader.razor.cs

@@ -10,62 +10,120 @@ namespace Blazor.AdminLte
 {
     public partial class FileUploader
     {
-        [Inject] IFilesManager? FilesManager { get; set; }
+        [Inject] 
+        private IFilesManager FilesManager { get; set; }
+        
         private bool isUploading = false;
         private string ErrorMessage = string.Empty;
         private string dropClass = string.Empty;
-        private int maxAllowedFiles = 25;
-        List<FileUploadProgress> filesQueue = new();
-
+        private List<FileUploadProgress> _filesQueue = new();
+
+        [Parameter]
+        public EventCallback<UploadResultDto> OnUploadFinished { get; set; }
+
+        [Parameter] 
+        public int MaxAllowedFiles { get; set; } = 25;
+        
+        [Parameter]
+        public long? MaximumFileSizeInBytes { get; set; }
+        
+        /// <summary>
+        ///     Allowed extensions to upload. Must be specified with dot
+        /// </summary>
+        /// <example>
+        ///     .json
+        /// </example>
+        [Parameter]
+        public string[] AllowedExtensions { get; set; }
 
         private void AddFilesToQueue(InputFileChangeEventArgs e)
         {
             dropClass = string.Empty;
             ErrorMessage = string.Empty;
 
-            if (e.FileCount > maxAllowedFiles)
+            if (e.FileCount > MaxAllowedFiles)
+            {
+                ErrorMessage = $"A maximum of {MaxAllowedFiles} is allowed, you have selected {e.FileCount} files!";
+                return;
+            }
+
+            if (_filesQueue.Count > MaxAllowedFiles)
             {
-                ErrorMessage = $"A maximum of {maxAllowedFiles} is allowed, you have selected {e.FileCount} files!";
+                ErrorMessage = $"Queue already contains maximum number of items ({MaxAllowedFiles})! Clear the queue to continue.";
+                return;
             }
-            else
+
+            var files = e.GetMultipleFiles(MaxAllowedFiles);
+            var fileCount = _filesQueue.Count;
+            
+            // Validate allowed extensions
+            if (AllowedExtensions?.Any() == true)
             {
-                var files = e.GetMultipleFiles(maxAllowedFiles);
-                var fileCount = filesQueue.Count;
+                var filesValid =
+                    files.All(x => AllowedExtensions.Any(
+                        ext => string.Equals(ext, Path.GetExtension(x.Name), StringComparison.InvariantCultureIgnoreCase)));
 
-                foreach (var file in files)
+                if (!filesValid)
                 {
-                    var progress = new FileUploadProgress(file, file.Name, file.Size, fileCount);
-                    filesQueue.Add(progress);
-                    fileCount++;
+                    ErrorMessage = $"Uploaded file(s) has invalid extension. Allowed extensions: {string.Join(", ", AllowedExtensions)}.";
+                    return;
                 }
             }
-        } //PlaceFilesInQue
 
+            if (MaximumFileSizeInBytes.HasValue &&
+                files.Any(x => x.Size > MaximumFileSizeInBytes))
+            {
+                ErrorMessage = $"Reached maximum file size! Please select file(s) smaller than {ToReadableUnits()}";
+                return;
+            }
+            
+            foreach (var file in files)
+            {
+                var progress = new FileUploadProgress(file, file.Name, file.Size, fileCount);
+                _filesQueue.Add(progress);
+                fileCount++;
+            }
+        }
+
+        private string ToReadableUnits()
+        {
+            var kb = Math.Round(MaximumFileSizeInBytes.Value / 1024.00);
+
+            // TODO: Convert to MB if too big
+            return $"{kb} kB";
+        }
 
         private async Task UploadFileQueue()
         {
             isUploading = true;
             await InvokeAsync(StateHasChanged);
 
-            foreach (var file in filesQueue.OrderByDescending(x => x.FileId))
+            foreach (var file in _filesQueue.OrderByDescending(x => x.FileId))
             {
                 if (!file.HasBeenUploaded)
                 {
                     await UploadChunks(file);
                     file.HasBeenUploaded = true;
+                    if (OnUploadFinished.HasDelegate)
+                    {
+                        await OnUploadFinished.InvokeAsync(new UploadResultDto
+                        {
+                            FileName = file.FileName,
+                            Uid = file.Uid
+                        });
+                    }
                 }
             }
 
             isUploading = false;
-        } //UploadFileQueue
-
+        }
 
         private async Task UploadChunks(FileUploadProgress file)
         {
-            var TotalBytes = file.Size;
+            var totalBytes = file.Size;
             long chunkSize = 400000;
-            long numChunks = TotalBytes / chunkSize;
-            long remainder = TotalBytes % chunkSize;
+            long numChunks = totalBytes / chunkSize;
+            long remainder = totalBytes % chunkSize;
 
             string nameOnly = Path.GetFileNameWithoutExtension(file.FileName);
             var extension = Path.GetExtension(file.FileName);
@@ -83,15 +141,16 @@ private async Task UploadChunks(FileUploadProgress file)
                     {
                         Data = buffer,
                         FileName = newFileNameWithoutPath,
-                        Offset = filesQueue[file.FileId].UploadedBytes,
-                        FirstChunk = firstChunk
+                        Offset = _filesQueue[file.FileId].UploadedBytes,
+                        FirstChunk = firstChunk,
+                        Uid = file.Uid
                     };
 
-                    await FilesManager.UploadFileChunk(chunk);
+                    await FilesManager.UploadFileChunkAsync(chunk);
                     firstChunk = false;
 
                     // Update our progress data and UI
-                    filesQueue[file.FileId].UploadedBytes += chunkSize;
+                    _filesQueue[file.FileId].UploadedBytes += chunkSize;
                     await InvokeAsync(StateHasChanged);
                 }
 
@@ -104,53 +163,53 @@ private async Task UploadChunks(FileUploadProgress file)
                     {
                         Data = buffer,
                         FileName = newFileNameWithoutPath,
-                        Offset = filesQueue[file.FileId].UploadedBytes,
-                        FirstChunk = firstChunk
+                        Offset = _filesQueue[file.FileId].UploadedBytes,
+                        FirstChunk = firstChunk,
+                        Uid = file.Uid
                     };
-                    await FilesManager.UploadFileChunk(chunk);
+                    
+                    await FilesManager.UploadFileChunkAsync(chunk);
 
                     // Update our progress data and UI
-                    filesQueue[file.FileId].UploadedBytes += remainder;
-                    //await ListFiles();
+                    _filesQueue[file.FileId].UploadedBytes += remainder;
                     await InvokeAsync(StateHasChanged);
                 }
             }
-        } //UploadChunks
-
+        }
 
         private void RemoveFromQueue(int fileId)
         {
-            var itemToRemove = filesQueue.SingleOrDefault(x => x.FileId == fileId);
+            var itemToRemove = _filesQueue.SingleOrDefault(x => x.FileId == fileId);
             if (itemToRemove != null)
-                filesQueue.Remove(itemToRemove);
-        } //RemoveFromQueue
-
+            {
+                _filesQueue.Remove(itemToRemove);
+            }
+        }
 
-        private void ClearFileQueue()
+        public void ClearFileQueue()
         {
-            filesQueue.Clear();
-        } //ClearFileQueue        
-
+            _filesQueue.Clear();
+        }       
 
-        record FileUploadProgress(IBrowserFile File, string FileName, long Size, int FileId)
+        public record FileUploadProgress(IBrowserFile File, string FileName, long Size, int FileId)
         {
             public IBrowserFile FileData { get; set; } = File;
             public int FileId { get; set; } = FileId;
             public long UploadedBytes { get; set; }
             public double UploadedPercentage => (double)UploadedBytes / (double)Size * 100d;
             public bool HasBeenUploaded { get; set; } = false;
-        } //FileUploadProgress
-
+            public Guid Uid { get; set; } = Guid.NewGuid();
+        }
 
-        void HandleDragEnter()
+        private void HandleDragEnter()
         {
             dropClass = "dropzone-active";
-        } //HandleDragEnter
-        void HandleDragLeave()
+        }
+        
+        private void HandleDragLeave()
         {
             dropClass = string.Empty;
-        } //HandleDragLeave
-
+        }
 
         /*
         protected override async Task OnInitializedAsync()
@@ -164,8 +223,5 @@ private async Task ListFiles()
             await InvokeAsync(StateHasChanged);
         }
         */
-
-
-
     }
 }

src/Blazor.AdminLte/Files/IFilesManager.cs

@@ -1,13 +1,11 @@
-
-
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.Threading.Tasks;
 
 namespace Blazor.AdminLte
 {
     public interface IFilesManager
     {
-        Task<bool> UploadFileChunk(ChunkedDataRequestDto fileChunkDto);
-        Task<List<string>> GetFileNames();
+        Task<bool> UploadFileChunkAsync(ChunkedDataRequestDto fileChunkDto);
+        Task<List<string>> GetFileNamesAsync();
     }
 }

src/Blazor.AdminLte/Files/UploadResultDto.cs

@@ -0,0 +1,10 @@
+using System;
+
+namespace Blazor.AdminLte
+{
+    public class UploadResultDto
+    {
+        public Guid Uid { get; set; }
+        public string FileName { get; set; } = "";
+    }
+}

src/Blazor.AdminLte/Forms/Input.razor

@@ -3,8 +3,15 @@
 {
     <label for="@Value.Identifier">@((MarkupString)Value.Label)</label>
 }
+
 <div class="input-group mb-3">
-    <input class="form-control @borderColor" id="@Value.Identifier" placeholder="@Value.Placeholder" value="@Value.Value" @onchange="DoChange" type="@Value.Type">
+    <input class="form-control @borderColor" 
+           id="@Value.Identifier" 
+           placeholder="@Value.Placeholder" 
+           value="@Value.Value" 
+           @onchange="DoChange" 
+           type="@Value.Type"
+           @attributes="@GetAttributes()">
 
     @if (!string.IsNullOrEmpty(Value.Icon)) {
         <div class="input-group-append">