Trying to create a Blazor application with the MudBlazor framework that allows pdfs to be uploaded to an SQL database. This is a Server side application.
I have a model called Pdfs, using EntityFramework database first. I couldn’t get the MudFileUpload to work, or the suggested MudFileUploader, which can be seen on MudBlazor’s Component section.
I was using
With the @LoadFile storing the pointer to the file.
private async Task LoadFile(InputFileChangeEventArgs e)
{
file = e.File;
}
After this, when I submit and it’s valid, I use this to store the file inside the byte array that is on the server using the model above.
// Capture the file.
byte[] buffer;
using (MemoryStream memoryStream = new MemoryStream(maxFileSize))
{
await file.OpenReadStream(maxFileSize).CopyToAsync(memoryStream);
buffer = memoryStream.ToArray();
tempPdf.PdfData = buffer;
}
I’ve set maxFileSize above what EFC can typically take, the 512KB. There is an error if I don’t place it there, but without it, there isn’t an error, it just doesn’t load using method below:
<div>
<h3>Embedded PDF Viewer</h3>
<embed src="@(PdfDataUrl)" type="application/pdf" width="100%" height="1000px" />
</div>
@code
// Property to generate the data URL for embedding the PDF
string ConvertToBase64String(byte[] byteArray) =>
byteArray != null ? Convert.ToBase64String(byteArray) : "";
// Property to generate the data URL for embedding the PDF
string PdfDataUrl => $"data:application/pdf;base64,{ConvertToBase64String(pdfByteArray)}";
I’ve tried other methods for displaying it, which I originally thought was my problem, but if I save then display something below the threshold that EFC has, the 512KB, it is display perfectly fine.
One of the issues I’m assuming is happening is that the file isn’t actually being loaded completely into the server due to the restrictions, and I need to asynchronously achieve this, but I don’t know where to start at this. I’ve looked up some applications using loading bars, but none of them are storing directly to a database, or are using EFC.
MudBlazor has a “file upload”, but either the button is unresponsive or the components simply do not load. I default to InputFile since it was what was recommended.
Also, I do understand that storing files like this actually in the database isn’t typically the best idea since the size of the database can grow exponentially, and I’m already asking to increase the file size for each individual pdf. I understand why this isn’t an ideal situation, but the mobility of the database is part of the key factor in this. Storing everything in a single location is part of the takeaway.
Any help would be greatly appreciated.