NetcodeHub.Packages.Components.FileUpload 1.0.8

Introduction to the package Usage.

 This package has two folds <FileModel>
1. It returns IBrowser file / List<IBrowser file> => which is the actual file.
2. It returns Dictionary<string, string> BaseFiles => which is file name and converted Base64String.
Use the File name to locate spacifc Bse64String image file you are looking for when dealing with List.

Install the package

        NetcodeHub.Packages.Components.FileUpload

Add the package namespace to the project

         @using NetcodeHub.Packages.Components.FileUpload

Use the component

             @*Get image(s) in base64 string(s)*@
           <NetcodeHubFileUpload @ref="FileUploadComponent" 
                            Notify="RetrieveBase64String" 
                            Multiple=false  
                            RequiredExtensions="RequiredEx"
                            ShowDisplay ="false"
                            Id = "MyFile"/>

            @*Get original file(s)*@
            <NetcodeHubFileUpload @ref="FileUploadComponent" 
                            Notify="RetrieveFiles" 
                            Multiple=false  
                            RequiredExtensions="RequiredEx"
                            ShowDisplay ="false"
                            Id = "MyFile"/>
          <h1>@Errors</h1>

     @code {
     List<string> RequiredEx = [".jpg", ".png", ".jpeg", ".gif"];
        
        NetcodeHubFileUpload? FileUploadComponent;

Grabing only Single Image (Multiple Section = false) in Base64String.

        string? Errors;
        string Base64String = string.Empty;
        void RetrieveBase64String(NetcodeHubUploadModel incomingFiles)
        {
            if(incomingFiles is not null)
            {
                 foreach (var item in incomingFiles.FileModel.IBrowserFiles!)
                 {
                     // This is for single.
                     var getFileNameAndBase64String = incomingFiles.FileModel.BaseFiles!.FirstOrDefault(_ => _.Key.Equals(item.Name, StringComparison.OrdinalIgnoreCase));

                     if (getFileNameAndBase64String.Key != null)
                         Base64String = getFileNameAndBase64String.Value;
                 }
            }
            Errors = incomingFiles.Message;
        }
    
       

If you need the original file, then :

void RetrieveFiles(NetcodeHubUploadModel incomingFiles)
        {
            if(incomingFiles.FileModel is not null)
            {
                foreach (var item in incomingFiles.FileModel!.IBrowserFiles!)
                {
                    // This is for single.
                    var originalFile = item;
                }
            }
            Errors = incomingFiles.Message;
        }
    }

How to Reset the form to Original State

Add this JavaScript

function resetInputFile(element) {
   element.value = null;
}

Make a Call to the javascript

private async Task Reset()
{
   await js.InvokeVoidAsync("resetInputFile", await js.InvokeAsync<IJSObjectReference>("document.getElementById", "fileInput"));
}