Enhance file upload and notification features

- Updated `Documents.razor` to change form submission handler to `UploadFile` and added `id` to `InputFile`.
- Implemented `UploadFile` method to handle file uploads and reset input after successful upload.
- Upgraded package references in `SqlDatabaseVectorSearch.csproj` for `Microsoft.SemanticKernel` and `Swashbuckle.AspNetCore.SwaggerUI`.
- Introduced `resetFileInput` function in `functions.js` to clear file input selections.
This commit is contained in:
Marco Minerva
2025-03-19 10:38:42 +01:00
parent d20b1395e0
commit a0d1126d15
4 changed files with 13 additions and 8 deletions
@@ -1,6 +1,4 @@
@using System.Runtime.InteropServices @inherits LayoutComponentBase
@inherits LayoutComponentBase
<Toasts class="p-3" AutoHide="true" Placement="ToastsPlacement.TopRight" /> <Toasts class="p-3" AutoHide="true" Placement="ToastsPlacement.TopRight" />
@@ -13,7 +13,7 @@
Upload new document Upload new document
</h4> </h4>
<EditForm Model="Model" Enhance OnValidSubmit="HandleValidSubmit"> <EditForm Model="Model" Enhance OnValidSubmit="UploadFile">
<DataAnnotationsValidator /> <DataAnnotationsValidator />
<div class="row"> <div class="row">
@@ -24,7 +24,7 @@
<Icon Class="d-flex text-body-secondary" Name="IconName.InfoCircle"></Icon> <Icon Class="d-flex text-body-secondary" Name="IconName.InfoCircle"></Icon>
</Tooltip> </Tooltip>
</span> </span>
<InputFile class="form-control" OnChange="@((e) => Model.File = e.File)" accept=".pdf,.docx,.txt,.md" /> <InputFile class="form-control" OnChange="@((e) => Model.File = e.File)" accept=".pdf,.docx,.txt,.md" id="fileInput" />
</div> </div>
</div> </div>
<div class="col-md-5 col-sm-5 col-5"> <div class="col-md-5 col-sm-5 col-5">
@@ -149,7 +149,7 @@ else
} }
} }
private async Task HandleValidSubmit() private async Task UploadFile()
{ {
if (Model.File is null) if (Model.File is null)
{ {
@@ -173,6 +173,9 @@ else
ToastService.Notify(await CreateToastMessageAsync(ToastType.Success, "Upload document", $"The document {fileName} has been successfully uploaded and indexed.")); ToastService.Notify(await CreateToastMessageAsync(ToastType.Success, "Upload document", $"The document {fileName} has been successfully uploaded and indexed."));
Model = new UploadDocument();
await JSRuntime.InvokeVoidAsync("resetFileInput", "fileInput");
await LoadDocumentsAsync(scope.ServiceProvider); await LoadDocumentsAsync(scope.ServiceProvider);
} }
catch (Exception ex) catch (Exception ex)
@@ -23,11 +23,11 @@
<PackageReference Include="Microsoft.ML.Tokenizers" Version="1.0.2" /> <PackageReference Include="Microsoft.ML.Tokenizers" Version="1.0.2" />
<PackageReference Include="Microsoft.ML.Tokenizers.Data.Cl100kBase" Version="1.0.2" /> <PackageReference Include="Microsoft.ML.Tokenizers.Data.Cl100kBase" Version="1.0.2" />
<PackageReference Include="Microsoft.ML.Tokenizers.Data.O200kBase" Version="1.0.2" /> <PackageReference Include="Microsoft.ML.Tokenizers.Data.O200kBase" Version="1.0.2" />
<PackageReference Include="Microsoft.SemanticKernel" Version="1.41.0" /> <PackageReference Include="Microsoft.SemanticKernel" Version="1.42.0" />
<PackageReference Include="MimeMapping" Version="3.1.0" /> <PackageReference Include="MimeMapping" Version="3.1.0" />
<PackageReference Include="MinimalHelpers.Routing.Analyzers" Version="1.1.3" /> <PackageReference Include="MinimalHelpers.Routing.Analyzers" Version="1.1.3" />
<PackageReference Include="PdfPig" Version="0.1.10" /> <PackageReference Include="PdfPig" Version="0.1.10" />
<PackageReference Include="Swashbuckle.AspNetCore.SwaggerUI" Version="7.3.1" /> <PackageReference Include="Swashbuckle.AspNetCore.SwaggerUI" Version="8.0.0" />
<PackageReference Include="TinyHelpers.AspNetCore" Version="4.0.21" /> <PackageReference Include="TinyHelpers.AspNetCore" Version="4.0.21" />
</ItemGroup> </ItemGroup>
@@ -10,6 +10,10 @@ window.scrollTo = (element) => {
} }
} }
window.resetFileInput = (elementId) => {
document.getElementById(elementId).value = '';
};
function getLocalTime(utcDateTime) { function getLocalTime(utcDateTime) {
return new Date(utcDateTime).toLocaleString(); return new Date(utcDateTime).toLocaleString();
} }