Blazor app intermittently not receiving all submitted file attachments

Question

When I run the page off my computer, or users inside the office try to submit a package, attachments go through just fine. From outside the office, and on tablets, there's issues where all of the data makes it in just fine, but the attachments (sent as a byte array to a varbinary(max) column) don't always make it through Sometimes none, sometimes 2 out of 5, sometimes all. Is it timing out before all of the data is received? Or is there something else?

C# code (Blazor Server):

<Microsoft.AspNetCore.Components.Forms.InputFile multiple OnChange="OnChange" />

List<PkgAttachments> SelectedFiles = new List<PkgAttachments>();        
async Task OnChange(InputFileChangeEventArgs e)
{
    var files = e.GetMultipleFiles();
    foreach(var file in files)
    {
        string fileExt = file.Name.Substring(file.Name.LastIndexOf('.') + 1).ToUpper();
        if (fileExt.ToUpper() == "JPG" || fileExt.ToUpper() == "JPEG" || fileExt.ToUpper() == "BMP" || fileExt.ToUpper() == "PNG")
        {
            var resizedFile = await file.RequestImageFileAsync(file.ContentType, 830, 715);

            var buf = new byte[resizedFile.Size];
            using (var stream = resizedFile.OpenReadStream(maxAllowedSize:10000000))
            {
                await stream.ReadAsync(buf);
            }
            SelectedFiles.Add(new PkgAttachments { Data = buf, ContentType = file.ContentType, Name = file.Name });
        }
        else if (fileExt.ToUpper() == "PDF")
        {
            var buf = new byte[file.Size];
            using (var stream = file.OpenReadStream(maxAllowedSize:10000000))
            {
                await stream.ReadAsync(buf);
            }
            SelectedFiles.Add(new PkgAttachments { Data = buf, ContentType = file.ContentType, Name = file.Name });
        }
    }
}

When they click the submit button....

if (SelectedFiles != null)
        {
            if (SelectedFiles.Count() > 0)
            {
                using (DataTable dt = new DataTable())
                {
                    dt.Columns.Add("FileName", typeof(string));
                    dt.Columns.Add("ImageData", typeof(byte[]));
                    foreach (var file in SelectedFiles)
                    {
                        string fileExt = file.Name.Substring(file.Name.LastIndexOf('.') + 1).ToUpper();
                        if (fileExt.ToUpper() == "JPG" || fileExt.ToUpper() == "JPEG" || fileExt.ToUpper() == "BMP" || fileExt.ToUpper() == "PNG" || fileExt.ToUpper() == "PDF")
                        {
                            dt.Rows.Add(file.Name, file.Data);
                        }
                    }
                    int test = dt.Rows.Count;
                    packageSubmission.attachments = dt;  //This is the datatable that matches the user defined type in the DB
                }
            }
        }
        string User = await oLocalStore.GetItemAsync<string>("User");            
        _claims.SubmitPackage(packageSubmission, User);

In the stored procedure, it has a field that counts the attachments that are sent through (to track in case someone submits a package without any attachments).. and also visible when we go to look at the attachments, and there's nothing there.

Answer 1

Given that you have an async OnChange method, which returns a Task (which completes in its own time) ... I'm wondering if you have a race condition going on. It would explain what you're seeing, and why it doesn't happen all the time, or for everybody.

It doesn't look like you're making submitting the files contingent on the OnChange Task already having completed, so (if, say, transmission speed of the files were slow, or your system were heavily loaded) it would be very possible for a user to submit the files before the OnChange method has completed processing.

One way to find out whether this were happening would be to write to a log when the Submit happens, and when the OnChange finishes. Then you could see whether the Submit is sometimes happening before the OnChange finishes.

There are multiple ways to address this (awaiting the Task, having the Task enable the Submit button as its last action, etc.).

Answer 2

Thank you to @AnnL for the suggestion about the files not processing fast enough. The working code was adjusted for to this:

On the UI:

<div>
    <h3>@Message</h3><br/>
    <Microsoft.AspNetCore.Components.Forms.InputFile multiple OnChange="OnChange" />
</div>
<div class="@HoldUp">
    <div class="col-3 offset-6">
        <input type="submit" value="Submit" @onclick="SubmitPkg" class="btn btn-primary" >
    </div>
</div>

And:

<style>
.AttNotProcessed {
    display: none;
}
</style>

And, in the code:

private string HoldUp = "AttNotProcessed";
List<PkgAttachments> SelectedFiles = new List<PkgAttachments>();        
async Task OnChange(InputFileChangeEventArgs e)
{
    HoldUp = "AttNotProcessed";
    var files = e.GetMultipleFiles();
    foreach(var file in files)
    {
        string fileExt = file.Name.Substring(file.Name.LastIndexOf('.') + 1).ToUpper();
        if (fileExt.ToUpper() == "JPG" || fileExt.ToUpper() == "JPEG" || fileExt.ToUpper() == "BMP" || fileExt.ToUpper() == "PNG")
        {
            var resizedFile = await file.RequestImageFileAsync(file.ContentType, 830, 715);

            var buf = new byte[resizedFile.Size];
            using (var stream = resizedFile.OpenReadStream(maxAllowedSize:10000000))
            {
                await stream.ReadAsync(buf);
            }
            SelectedFiles.Add(new PkgAttachments { Data = buf, ContentType = file.ContentType, Name = file.Name });
        }
        else if (fileExt.ToUpper() == "PDF")
        {
            var buf = new byte[file.Size];
            using (var stream = file.OpenReadStream(maxAllowedSize:10000000))
            {
                await stream.ReadAsync(buf);
            }
            SelectedFiles.Add(new PkgAttachments { Data = buf, ContentType = file.ContentType, Name = file.Name });
        }
    }
    Message = "Files done processing";
    HoldUp = "form-group row";
}