Questions on UI for Blazor Forum

1 answer

17 views

Is there a way to dynamically change the error message in the TelerikUpload component

I am using the TelerikUpload component.
Telerik.UI.for.Blazor version 9.0.0

Extra security checks (anti-virus etc.) are triggered in the Controller and depending on what caused an issue, I would like to change the default "File failed to upload" error message. Ideally this message would be set in the OnError handler, or maybe a ChildTemplate exists I am not aware of?

This post talks about changing the message through localization, but that does not allow me to change it at runtime:

Upload

answered on 04 Aug 2025

0 answers

10 views

While uploading [Note: Inporgress of uploading ] the file if i click remove next to file it remove from ui but it still present somewhere

so issue was when i uploading file that still in upload phase if i click the cancel button next upload progress bar the file is removes from ui but somewhere is still present

so i have used OnSelectHandler event to handle to duplicate uploading and some extra validation added in OnSelectHandler event but my issue is

when i am uploading file and immediately click [ Before upload process is done ] cancel then it remove from ui but somewhere is present after that remove click again try to add show my validation error that is duplicate message

Expected Result-

Clicking Cancel should stop the upload process entirely, and no file should be uploaded or stored.

Please Refer Below Attachment

Step 1 => Select file eg. dummy.pdf and select Note : AutoUpload is true and check below screenshot and i click cancel button

Step 2 => The file removed from UI see below screenshot

Step 3 => If i try to add again same file i.e dummy.pdf the my custom validation msg show that is file is already present see below screenshot

Below is My Code :

<TelerikUpload DropZoneId="dropzone-id" @ref="@UploadRef" Id="uploadFile"
SaveUrl="@UploadSaveUrlPath"
Class="@UploadClass"
OnSuccess="@OnUploadSuccess"
OnRemove="@OnUploadRemove"
OnError="@OnUploadError"
OnProgress="@OnUploadProgress"
Multiple="true"
OnSelect="@OnSelectHandler" >

</TelerikUpload>

private async void OnUploadSuccess(UploadSuccessEventArgs args)
{
if (args.Operation != UploadOperationType.Upload) return;

isUploadedSuccess = true;
uploadedInfoCache = await LoadUploadedFilesAsync();

foreach (var file in args.Files)
{
var match = uploadedInfoCache?.FirstOrDefault(f =>
f.FileName == file.Name &&
f.Size == file.Size);

if (match != null)
{
file.Id = match.FileId; // Set ID for later removal
}
}
}

private void OnUploadError(UploadErrorEventArgs e) => isUploadedSuccess = false;

private async Task OnSelectHandler(UploadSelectEventArgs e)
{
// Early exit if already full
if (selectedFiles.Count > MaxAttachmentFile)
return;

foreach (var file in e.Files.ToList())
{
// 1. Check max file size
if (file.Size > MaxFileSize * 1024 * 1024)
{
await DialogSvc.AlertAsync(Resources.Attachments,
string.Format(Resources.MaxAllowedFileSizeShould, MaxFileSize, Math.Ceiling((double)file.Size / 1024 / 1024)));

e.Files.Remove(file); // exclude large file
continue;
}

// 2. Check for duplicate name (uploaded or selected)
bool isDuplicate = Attachments.Any(a => a.FileName.Equals(file.Name, StringComparison.OrdinalIgnoreCase)) ||
selectedFiles.Any(a => a.Name.Equals(file.Name, StringComparison.OrdinalIgnoreCase));

if (isDuplicate)
{
await DialogSvc.AlertAsync(Resources.TitleDuplicateAttachment,
string.Format(Resources.DuplicateAttachmentMsg, file.Name));

e.Files.Remove(file); // exclude duplicate
}
}

// 3. File count check after all filtering
if (selectedFiles.Count + e.Files.Count > MaxAttachmentFile)
{
e.IsCancelled = true;
await DialogSvc.AlertAsync(Resources.MaxFileUploadedTitle, MaxFileErrorMsg);
return;
}

// 4. Add only valid files
selectedFiles.AddRange(e.Files);

// 5. Final file-level validations
isUploadedSuccess = e.Files.All(file =>
!file.InvalidExtension &&
!file.InvalidMinFileSize &&
!file.InvalidMaxFileSize);
}

private async void OnUploadRemove(UploadEventArgs args)
{
foreach (var file in args.Files)
{
selectedFiles.RemoveAll(f => f.Id == file.Id);

var match = uploadedInfoCache.FirstOrDefault(f => f.FileName == file.Name && f.Size == file.Size);
if (match == null) continue;

var content = new FormUrlEncodedContent(new[]
{
new KeyValuePair<string, string>("fileId", match.FileId)
});

await HttpClient.PostAsync(ToAbsoluteUrl(RemoveFileUrlPath), content);
}

if (!selectedFiles.Any())
{
UploadRef.ClearFiles();
await HttpClient.GetAsync(ToAbsoluteUrl(CleanFilesUrlPath));
}
}

DropZone

FileSelect

Upload

asked on 01 Aug 2025

1 answer

9 views

When using chunked upload the success response body is always empty

I am using the TelerikUpload component with UploadChunkSettings defined.
Telerik.UI.for.Blazor version 9.0.0

When not using a chunked upload I can return a response body a read it in the success handler, however when code was changed to use chunks the response body is always empty.

Is this a bug when using chunked upload, or do I need to return a different response in the Controller?

Code from the save method in Api Controller:

string chunkMetaData = formData["chunkMetaData"].ToString();

ChunkMetaData chunkData = JsonConvert.DeserializeObject<ChunkMetaData>(chunkMetaData);

// Append chunks to file
// ...


if (chunkData.TotalChunks - 1 == chunkData.ChunkIndex)
{
     uploadComplete = true;
     fs.Flush();
}

// More code omitted ...

if (uploadComplete)
{
	Response.StatusCode = StatusCodes.Status200OK;
	await Response.WriteAsync(result.ResultId.ToString());

	return new EmptyResult();
}
else
{
	Response.StatusCode = StatusCodes.Status201Created;
	await Response.WriteAsync("Chunk upload successful.");
	
	return new EmptyResult();
}

OnSuccess handler:

protected async Task SuccessHandler(UploadSuccessEventArgs args)
{
	int resultid = 0;

	if (int.TryParse(args.Request.ResponseText, out resultid))
	{
		//  do something with the resultid
		//  ...
		//  args.Request.ResponseText is always empty when using chunked upload
	}
}

Upload

answered on 01 Aug 2025

1 answer

16 views

After Removing item form uploaded item removes form ui but in backend it still there and even no item is present in ui it uploaded removed item also

i using Telerik upload for uloading multiple file and max upload file is 5 but time of working uplaod works well but when i remove uplaoded item it just remove from frontend but in my controller it has diffrent id and client side has diffrent id i got it when i debug the code tried multiple times but i got not clue i am giving my full razor component and controller in below
below is my models

public class FileMetadata
{
public string FileId { get; set; }
public long Size { get; set; }
public string FileName { get; set; }
public byte[] FileContent { get; set; }
public Guid? ProcessId { get; set; }
public Guid? StructureId { get; set; }
public Guid? BillingSiteId { get; set; }
}
public partial class Document
{
public Guid DocumentId { get; set; }

public Guid InvoiceId { get; set; }

public Guid? JobId { get; set; }

public int JobStep { get; set; }

private string _fileName;

public string FileName
{
get { return _fileName; }
set
{
_fileName = value;
this.DocumentFormat = GetDocumentFormatByFileExtension(value);
}
}

// Field is ignored in regard to DbContext load/save
public string FileData { get; set; }

public DateTime CreatedOn { get; set; }

public DocumentType DocumentType { get; set; }

public DocumentFormat DocumentFormat { get; set; }

public DocumentSource DocumentSource { get; set; }

public bool CanBeArchived { get; set; }

public List<Variable> Variables { get; set; }

[JsonIgnore]
public virtual Invoice Invoice { get; set; }

[JsonIgnore]
public virtual Job Job { get; set; }

private static DocumentFormat GetDocumentFormatByFileExtension(string fileName)
{
if (string.IsNullOrEmpty(fileName))
return DocumentFormat.Undefined;

try
{
string fileExtension = Path.GetExtension(fileName)?.ToLower();

return fileExtension switch
{
".pdf" => DocumentFormat.PDF,
".txt" => DocumentFormat.TXT,
".json" => DocumentFormat.JSON,
".xml" => DocumentFormat.XML,
".vars" => DocumentFormat.VARS,
_ => DocumentFormat.Undefined,
};
}
catch
{
return DocumentFormat.Undefined;
}
}
}

below is my razor component code
<style>
/* to show custom message for Bug 51695: [Manual upload] Invalid success text */
.k-file-validation-message::before {
content: "@(isUploadedSuccess ? Resources.FileUploadMsg : "")";
visibility: @(isUploadedSuccess ? "visible" : "hidden");
}

/* to hide the predefined message when file is uploaded */
.k-file-validation-message {
visibility: @(isUploadedSuccess ? "hidden" : "visible");
}

/* display error message for invalid file in red */
.k-file-validation-message.k-text-error {
color: red;
}
</style>

<div style="width: 400px;">


<div class="dropzone-section">

<TelerikDropZone Id="dropzone-id"
DragOverClass="dropzone-over"
NoteText="@DropZoneHintText">
</TelerikDropZone>

@if (UseDropZoneOverStyles)
{
<style>
.dropzone-over .k-dropzone-inner {
border: 2px dashed;
}
</style>
}
</div>


<div class="upload-section divstyling">
<TelerikUpload DropZoneId="dropzone-id" @ref="@UploadRef" Id="uploadFile"
SaveUrl="@UploadSaveUrl"
MaxFileSize="@(16 * 1024 * 1024)"
Class="@UploadClass"
OnSuccess="@OnUploadSuccess"
OnRemove="@OnUploadRemove"
OnError="@OnUploadError"
Multiple="true"
AllowedExtensions="@AllowedFileExtensions"
Accept=".pdf,.xml"
OnSelect="@OnSelectHandler" />
</div>


<div class="notification-section">
<TelerikNotification @ref="@NotificationRef" Class="MyTelerikNotification" HorizontalPosition="NotificationHorizontalPosition.Center" />
</div>


<div class="button-section d-md-flex justify-content-md-end">
<button id="btnUpload"
type="button"
class="btn btn-sm btnAction btn-action-filled-blue mr-1 mt10"
@onclick="@Upload"
disabled="@(isUploadInProgress || !selectedFiles.Any())">
@if (isUploadInProgress)
{
<span class="spinner-border spinner-border-sm mr-1"></span>
}
@(isUploadInProgress ? Resources.Uploading : Resources.AddAttachment)
</button>
</div>
</div>

<style>
/* Drop Zone */
.dropzone-section {
width: 100%;
max-width: 600px;
text-align: center;
margin-bottom: 20px;
}

/* Upload Section */
.upload-section {
width: 100%;
max-width: 600px;
margin-bottom: 20px;
}

/* Notification Section */
.notification-section {
width: 100%;
max-width: 600px;
margin-bottom: 20px;
}

/* Buttons */
#btnUpload {
border: 2px solid;
border-radius: 20px;
opacity: 1;
margin-right: 0px;
font-weight: bold;
/*font-size: 0.85rem !important;*/
padding-left: 20px !important;
padding-right: 20px !important;
max-width: fit-content;
}

#btnUpload:focus {
outline: none !important;
box-shadow: none !important;
}
/* Other Styles */
.dropzone-over .k-dropzone-inner {
border: 2px dashed;
}

.no-dropzone .k-dropzone-hint {
display: none;
}

.divstyling {
padding-bottom: 10px;
}
/* Error Notification caption */
/* .MyTelerikNotification .k-notification-container .k-notification {
width: 300px;
height: 50px;
font-size: 1.5em;
text-align: center;
align-items: center;
}
.divstyling > .k-upload .k-upload-files{
max-height : 250px;
}*/
</style>

and here is code behind code
using Blazored.Modal;
using Blazored.Modal.Services;
using CmpInvoicePlatform.Client.Services.Dialog;
using CmpInvoicePlatform.Client.Services.Request;
using CmpInvoicePlatform.Shared.Models;
using CmpInvoicePlatform.Shared.Resources;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Json;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;
using Telerik.Blazor;
using Telerik.Blazor.Components;
using Telerik.Blazor.Components.Notification;

namespace CmpInvoicePlatform.Client.Pages.Invoices
{
public partial class MutlipleAttachmentAdd : ComponentBase
{

[CascadingParameter]
BlazoredModalInstance ModalInstance { get; set; }

[Inject]
private IRequestService RequestSvc { get; set; }
[Inject]
private IDialogService DialogSvc { get; set; }

[Inject]
private NavigationManager NavigationManager { get; set; }

[Parameter]
public InvoiceModelViewModel InvoiceMVM { get; set; }

private string DropZoneHintText => UploadVisible ? Resources.ManualUploadDrop : string.Empty;

private bool UseDropZoneOverStyles { get; set; } = true;

private bool UploadVisible { get; set; } = true;

private string UploadClass => $"no-dropzone {(!UploadVisible ? "k-hidden" : string.Empty)}";

private string UploadSaveUrl => ToAbsoluteUrl("api/MultipleFileUpload/save");

private HttpClient _httpClient;

public List<string> AllowedFileExtensions = new List<string> { ".pdf", ".xml" };

//mainly used to check the file uploaded is successful or not so according to it disabled the upload button
private bool isUploadedSuccess { get; set; }
private bool isUploadInProgress { get; set; }
private TelerikUpload UploadRef { get; set; }

private List<UploadFileInfo> selectedFiles = new();

private List<FileMetadata> fileMetadataList = new();

private static int MaxAttachmentFile = 5;

private static string MaxFileErrorMsg = string.Format(Resources.MaxUploadedFileErrorMsg, MaxAttachmentFile);
private string ToAbsoluteUrl(string url)
{
return $"{NavigationManager.BaseUri}{url}";
}

private TelerikNotification NotificationRef { get; set; }

private void OnUploadSuccess(UploadSuccessEventArgs args)
{
isUploadedSuccess = (args.Operation == UploadOperationType.Upload) ? true : false;
}

private void OnUploadError(UploadErrorEventArgs e) => isUploadedSuccess = false;

// Check if the extensions of all selected files are present in the allowed extensions list.
private async Task OnSelectHandler(UploadSelectEventArgs e)
{
var currentFileUploadedCount = selectedFiles.Count + e.Files.Count();
// Prevent selecting more than 5 files total
if (currentFileUploadedCount > MaxAttachmentFile)
{
e.IsCancelled = true;
await DialogSvc.AlertAsync(Resources.MaxFileUploadedTitle, MaxFileErrorMsg);
return;
}

selectedFiles.AddRange(e.Files);

isUploadedSuccess = e.Files.All(file =>
AllowedFileExtensions.Contains(file.Extension) &&
!(file.InvalidMinFileSize || file.InvalidMaxFileSize || file.InvalidExtension)
);
}

private async Task Upload()
{
try
{
isUploadInProgress = true;
var documentIds = new List<Guid>();
// Get all files by using UploadController
_httpClient = new HttpClient();

using var response = await _httpClient.GetAsync(new Uri($"{NavigationManager.BaseUri}api/MultipleFileUpload/GetAllFiles"));

if (response.IsSuccessStatusCode)
{
var uploadedFiles = await response.Content.ReadFromJsonAsync<List<Document>>();

// Process the files list as needed
foreach (var file in uploadedFiles)
{
var newDocument = new Document
{
DocumentId = Guid.NewGuid(),
InvoiceId = InvoiceMVM.InvoiceId,
DocumentSource = DocumentSource.External,
DocumentType = DocumentType.Support,
FileName = file.FileName,
FileData = file.FileData,
};

await RequestSvc.InvoiceAttachmentAddAsync(newDocument);
documentIds.Add(newDocument.DocumentId);
}

await DialogSvc.AlertAsync(Resources.AddAttachment, Resources.MultipleAttachmentUploadSuccessMsg);

UploadRef.ClearFiles();
selectedFiles.Clear();
isUploadedSuccess = false;

//Return the list of uploaded document IDs to the calling component
await ModalInstance.CloseAsync(ModalResult.Ok(documentIds));

}

await _httpClient.GetAsync(ToAbsoluteUrl("api/MultipleFileUpload/CleanFiles"));

}
catch (Exception ex)
{
await DialogSvc.AlertAsync(Resources.UploadInvoice, ex.Message);
}
finally
{
isUploadInProgress = false;
}
}

private async void OnUploadRemove(UploadEventArgs args)
{
_httpClient = new HttpClient();
foreach (var file in args.Files)
{
selectedFiles.RemoveAll(f => f.Id == file.Id);

await _httpClient.PostAsync(
ToAbsoluteUrl("api/MultipleFileUpload/remove"),
new FormUrlEncodedContent(new[]
{
new KeyValuePair<string, string>("fileId", file.Id)
}));
}

if (!selectedFiles.Any())
{
UploadRef.ClearFiles();
await _httpClient.GetAsync(ToAbsoluteUrl("api/MultipleFileUpload/CleanFiles"));
}
}

}

}

please look at the screenshots and provide appropriate solution as soon as possible[High Priority]

Thanks in Advance

answered on 08 Jul 2025

1 answer

34 views

Get stream from UploadFileInfo

I can now list my files in the upload control. Now, how do I get the stream from the collection of files? I need to have the stream in order to upload to Azure.

                foreach (UploadFileInfo file in args.Files)
                {
                    var fileName = Path.GetFileName(file.Name);

                    //await using (var fileStream = new FileStream(fileName, FileMode.Create))

Upload

answered on 23 May 2025

1 answer

37 views

Upload: File extensions

Is there a way to filter which file extensions are allowed to be selected? I limit to PDF or PNG but it allows me to select XML.

                   <div>
                       <hr />
                       <h4 class="gsi-padding-tb0-lr12">Upload File to Session...</h4>

                       <TelerikUpload AllowedExtensions="@( new List<string>() { ".pdf", ".png" } )"
                                      OnSelect="@OnUploadSelect"
                                      OnCancel="@OnUploadCancel"
                                      OnRemove="@OnUploadRemove">
                       </TelerikUpload>

                       <div class="demo-hint gsi-padding-tb0-lr12">
                           <small>
                               Upload <strong>PDF</strong> or <strong>PNG</strong> files with a maximum size of <strong>6MB</strong>.
                           </small>
                       </div>
                   </div>

Upload

answered on 20 May 2025

1 answer

22 views

Is it possible to remove successfully uploaded files from the TelerikUpload component

Hi

I have my own logic in the TelerikUpload OnSuccess Event that does some things to the uploaded files and therefore keep my own list of them. So the "File successfully uploaded" entries in the lower part of the component are useless for me.

I tried to remove them somehow in the OnSuccess Event but the only thing I found was the ClearFiles method which removes all files, even those that are still uploading. Is there a way to remove specific files from the list or an option to remove them automatically?

Upload

answered on 16 May 2025

1 answer

77 views

Drag and Drop is not working in MAUI

I have a blazor hybrid app with a basic FileSelect component. When I start the Windows Native MAUI app, the drag-and-drop feature of the component does not work at all. The drag of any file into the MAUI window shows a stop/not possible sign as the mouse pointer. In the Web version everything works as expected.

There was also no note here that this might not work due to some restriction

FileSelect

Upload

answered on 03 Apr 2025

1 answer

149 views

Blazor Upload "File failed to upload error"

I have a Blazor server solution with separate projects for the UI and API. When the Upload component is configured to use a controller in the API project to handle the save function I get the error seen in the attached file 'Screenshot 2025-02-26 132709' but the file is successfully uploaded. If I copy the same controller to the UI project the error goes away see 'Screenshot 2025-02-26 132538'.

to get the save function to work with the API at all I had to add the below HTTP options section to the API program.cs

app.Use(async (context, next) =>
{
    if (context.Request.Method == HttpMethods.Options)
    {
        context.Response.Headers.Add("Allow", "GET, POST, PUT, OPTIONS");
        context.Response.Headers.Add("Access-Control-Allow-Origin", "https://localhost:7053");
        context.Response.StatusCode = (int)HttpStatusCode.OK;
        return;
    }
    await next.Invoke();
});

Upload component:

 <TelerikUpload SaveUrl="@saveURL"
                RemoveUrl="https://localhost:7121/api/DocumentUpload/remove"
                MaxFileSize="@MaxFileSize"
                />

Controller:

using DocumentFormat.OpenXml.Drawing;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace API.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class DocumentUploadController : ControllerBase
    {
        public IWebHostEnvironment HostingEnvironment { get; set; }

        public DocumentUploadController(IWebHostEnvironment hostingEnvironment)
        {
            HostingEnvironment = hostingEnvironment;
        }

        

        [HttpPost("save")]
        public async Task<IActionResult> Save(IFormFile files) // "files" matches the Upload SaveField value
        {
            if (files != null)
            {
                try
                {
                    // save to wwwroot - Blazor Server only
                    //var rootPath = HostingEnvironment.WebRootPath;
                    // save to Server project root - Blazor Server or WebAssembly
                    var rootPath = HostingEnvironment.ContentRootPath;
                    var newFolder = Guid.NewGuid().ToString();
                    System.IO.Directory.CreateDirectory(rootPath + newFolder);
                    var saveLocation = System.IO.Path.Combine(rootPath + newFolder, files.FileName);

                    using (var fileStream = new FileStream(saveLocation, FileMode.Create))
                    {
                        await files.CopyToAsync(fileStream);
                    }
                }
                catch (Exception ex)
                {
                    Response.StatusCode = 500;
                    await Response.WriteAsync($"Upload failed.");
                }
            }

            return new OkResult();
        }

        [HttpPost("remove")]
        public async Task<IActionResult> Remove([FromForm] string files) // "files" matches the Upload RemoveField value
        {
            if (files != null)
            {
                try
                {
                    // delete from wwwroot - Blazor Server only
                    var rootPath = HostingEnvironment.WebRootPath;
                    // delete from Server project root - Blazor Server or WebAssembly
                    //var rootPath = HostingEnvironment.ContentRootPath;
                    var fileLocation = System.IO.Path.Combine(rootPath, files);

                    if (System.IO.File.Exists(fileLocation))
                    {
                        System.IO.File.Delete(fileLocation);
                    }
                }
                catch (Exception ex)
                {
                    Response.StatusCode = 500;
                    await Response.WriteAsync($"Delete failed.");
                }
            }

            return new EmptyResult();
        }
    }
}

Any ideas? Have I missed something I need to setup in the API program.cs?

Upload

answered on 28 Feb 2025

1 answer

69 views

Telerik GridToolBarTemplate GridCommandButton Add - Can we pass data to it?

I have a TelerikGrid that the first column will open a TelerikWindow with a TelerikUpload. This is so that the user can upload files to the server that will be associated with the object. The object being edited has values that depend on the file being uploaded. For example, the file being uploaded has a File Name. If the File Name already exists, I want to change the name of the file currently being uploaded to include the Revision number at the end of the file name. For example, we have a file on the server named TestFile.pdf, and I am uploading a file named TestFile.pdf. If TestFile.pdf exists, I want to check what the revision of the TestFile.pdf that's already uploaded is, and add it to the end of the file name (TestFile_rev0.pdf). That part is simple, because it's just manipulation of the saved file on the server. However, the new file being uploaded I want to then change the name of it to TestFile_rev1.pdf, and I can do that and save it to the server, but the object in the grid that's currently being added, I need to pass the data to that object being edited, however it will not pass the data. How can we do that?

@page "/SDS"

@using SafetySite.Models;
@using Helpers

@inject SDSModel SDSModel
@inject UserModel UserModel
@inject NavigationManager NavigationManager

<PageTitle>Safety Data Sheets</PageTitle>

<TelerikGrid Data=@SDSItemsList
             FilterMode="GridFilterMode.FilterMenu"
             Sortable="true"
             EditMode="GridEditMode.Inline"
             Height="2000px">

    <GridToolBarTemplate>
        <GridCommandButton Command="Add"  Icon="@SvgIcon.Plus" Enabled="@UserModel.CanEdit()">Add SDS Sheet</GridCommandButton>
    </GridToolBarTemplate>

    <GridColumns>
        <GridColumn Field="@(nameof(SDSModel.FileExists))"  Title="File" Width="120px">

            <EditorTemplate>

                @{
                    var item = context as SDSModel;
                    if(item != null)
                    {
                        <TelerikButton OnClick="@(() => ToggleUploadWindow(item))"
                                       Icon="@SvgIcon.Upload"
                                       Class="btn btn-sm btn-primary">
                            Upload File
                        </TelerikButton>
                    }
                }

            </EditorTemplate>
            
            <Template>

                @{
                    var item = context as SDSModel;
                    if(item != null)
                    {
                        <div class="text-center">
                            <TelerikButton OnClick="@(() => NavigateToViewSDSFile(item.FileName!))"
                                           Class="navlinkgrow">

                                <div class="navlink-content">
                                    <span class="@(item.FileExists ? "text-success" : "text-danger")">
                                        <i class="fa-duotone fa-solid fa-file-pdf fa-2x"></i>
                                    </span>
                                </div>

                            </TelerikButton>
                        </div>

                    }
                }

            </Template>
        </GridColumn>


        <GridColumn Field="@nameof(SDSModel.Title)"
                    Title="Title"
                    Editable="true" />


        <GridColumn Field="@nameof(SDSModel.Revision)"
                    Title="Revision"
                    Editable="true" />


        <GridColumn Field="@nameof(SDSModel.CurrentVersion)"
                    Title="CurrentVersion"
                    Editable="true">

            <Template>
                @{
                    var item = context as SDSModel;
                    if (item != null)
                    {
                        <input type="checkbox" checked="@item.CurrentVersion" disabled />
                    }
                }
            </Template>

        </GridColumn>


        <GridColumn Field="@nameof(SDSModel.CreatedBy)"
                    Title="Created By"
                    Editable="false" />

        <GridColumn Field="@nameof(SDSModel.EditedBy)"
                    Title="Edited By"
                    Editable="false" />

        <GridColumn Field="@nameof(SDSModel.CreationDate)"
                    Title="Creation Date"
                    DisplayFormat="{0:yyyy-MM-dd}"
                    Editable="false" />

        <GridColumn Field="@nameof(SDSModel.EditedDate)"
                    Title="Edit Date"
                    DisplayFormat="{0:yyyy-MM-dd}"
                    Editable="false" />
        
        <GridCommandColumn>
            <GridCommandButton Command="Save"
                               Icon="@SvgIcon.Save"
                               ShowInEdit="true"
                               Enabled="@UserModel.CanEdit()"
                               OnClick="@OnUpdate">
                Update
            </GridCommandButton>

            <GridCommandButton Command="Edit"
                               Icon="@SvgIcon.Pencil"
                               Enabled="@UserModel.CanEdit()">
                Edit
            </GridCommandButton>

            <GridCommandButton Command="Delete"
                               Icon="@SvgIcon.Trash"
                               Enabled="@UserModel.CanEdit()"
                               OnClick="@OnDelete">
                Delete
            </GridCommandButton>

            <GridCommandButton Command="Cancel"
                               Icon="@SvgIcon.Cancel"
                               ShowInEdit="true"
                               Enabled="@UserModel.CanEdit()">
                Cancel
            </GridCommandButton>

        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>


@* THIS TELERIK WINDOW OPENS A POPUP OF A TELERIK FILE MANAGER THAT ALLOWS FOR THE INDIVIDUAL TO PLACE A PDF ASSOCIATED WITH THAT ITEM INTO THE FOLDER *@
<TelerikWindow Width="400px" Height="fit-content" Centered="true" @bind-Visible="@IsUploadFileWindowVisible">
    <WindowTitle>
        <strong>Upload SDS File</strong>
    </WindowTitle>

    <WindowActions>
        <WindowAction Name="Close" OnClick="@(() => IsUploadFileWindowVisible = !IsUploadFileWindowVisible)" />
    </WindowActions>

    <WindowContent>
        <TelerikUpload Multiple="false"
                       SaveUrl="@SaveUrl"
                       RemoveUrl="@RemoveUrl"
                       OnSuccess="@OnFileUploadSuccess"
                       AllowedExtensions="@AllowedExtensions"
                       MaxFileSize="10485760"/>

    </WindowContent>
</TelerikWindow>

@code {

    private bool IsUploadFileWindowVisible { get; set; } = false;
    private List<SDSModel> SDSItemsList = new();
    private SDSModel? CurrentItem { get; set; } = new SDSModel();
    private List<string> AllowedExtensions = new List<string> { ".pdf" };
    private bool CanSaveUpload { get; set; } = false;
    private string SaveUrl = String.Empty;
    private string RemoveUrl = String.Empty;

    public void ToggleUploadWindow(SDSModel item)
    {
        CurrentItem = item;
        SaveUrl = $"{NavigationManager.BaseUri}api/Upload/SavePdf?rev={item.Revision}";
        RemoveUrl = $"{NavigationManager.BaseUri}api/Upload/RemovePdf";
        IsUploadFileWindowVisible = !IsUploadFileWindowVisible;
    }

    private void NavigateToViewSDSFile(string fileName)
    {

        if (!string.IsNullOrEmpty(fileName))
        {
            string fileUrl = $"/SafetyDataSheets/{fileName}";
            NavigationManager.NavigateTo(fileUrl, forceLoad: true);
        }
        else
        {
            Console.WriteLine("No document found for the specified file name.");
        }
    }


    private async Task OnFileUploadSuccess(UploadSuccessEventArgs args)
    {
        if (CurrentItem != null && args.Files.Count > 0)
        {
            var uploadedFile = args.Files[0];
            string fileName = uploadedFile.Name;

            // Check if a file with the same name already exists in the database
            bool fileExists = await SDSModel.FileExistsAsync(fileName);

            if (fileExists)
            {
                var existingItem = await SDSModel.GetSDSItemByFileNameAsync(fileName);
                if(existingItem != null)
                {
                    existingItem.CurrentVersion = false;
                    await SDSModel.UpdateOldSDSItemAsync(existingItem.FileName, UserModel.EmployeeID);

                    CurrentItem.Revision = existingItem.Revision + 1;
                    fileName = $"{Path.GetFileNameWithoutExtension(uploadedFile.Name)}_rev{CurrentItem.Revision}{Path.GetExtension(uploadedFile.Name)}";
                }
            }

            CurrentItem.FileName = fileName;
            CurrentItem.FileExists = true;
            CurrentItem.CurrentVersion = true;
        }
    }

    private async Task OnUpdate(GridCommandEventArgs args)
    {
        var item = args.Item as SDSModel;
        if (item != null)
        {
            item.EditedBy = UserModel.EmployeeID;
            await SDSModel.SaveSDSItemAsync(item);
            SDSItemsList = await SDSModel.GetSDSItemsAsync();
        }
    }

    private async Task OnDelete(GridCommandEventArgs args)
    {
        var item = args.Item as SDSModel;
        if (item != null)
        {
            await SDSModel.DeleteSDSItemAsync(item);
            SDSItemsList = await SDSModel.GetSDSItemsAsync();
        }
    }


    protected override async Task OnInitializedAsync()
    {
        SDSItemsList = await SDSModel.GetSDSItemsAsync();
        await base.OnInitializedAsync();
    }

}

Grid

Upload

Window

answered on 23 Dec 2024