Upload File On EditForm submit

[Werner]

Good day,

Firstly, thank you for an awesome set of components.

Secondly, could you please give an example of using fileupload in a editform (single and multiple files) and to only upload the selected files on validsubmit. The files should be sent to api.

Thank you in advance

[Berly Christopher]

Hi Werner, 

Greetings from Syncfusion support.  

We have created the sample based on the requested requirement and attached it below also we need to call the Upload method manually when we placed Uploader component inside the EditForm. We can save the uploaded file using the Upload method and handling the save actions in the change event as mentioned below. 

@using Syncfusion.Blazor.Inputs  

@using System.IO;  

@using System.ComponentModel.DataAnnotations  

@inject IJSRuntime JsRuntime;  

  

    <EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">  

        <DataAnnotationsValidator />  

        <div class="form-group">  

           <SfTextBox @bind-Value="@employee.EmpID"></SfTextBox>  

        </div>  

        <div class="form-group">  

            <SfUploader @ref="UploadObj" ID="UploadFiles">  

                <UploaderEvents ValueChange="OnChange"></UploaderEvents>  

            </SfUploader>  

        </div>  

        <button type="submit" class="btn btn-primary">Register</button>  

    </EditForm>  

  

@code{  

    SfUploader UploadObj;  

     

    public void OnChange(UploadChangeEventArgs args)  

    {  

        foreach (var file in args.Files)  

        {  

            var path = @"D:\" + file.FileInfo.Name;  

            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);  

            file.Stream.WriteTo(filestream);  

            filestream.Close();  

            file.Stream.Close();  

        }  

    }  

  

    public Employee employee = new Employee();  

  

    public async Task HandleValidSubmit()  

    {  

        await this.UploadObj.Upload(); // Upload the selected file manually  

    }  

    }  

 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/152913/ze/Uploader_1529131809748923  

 

Else, you want to do the same action in the API controller means, we need to done using through JS interop file and call the corresponding controller action in the AJAX call. Kindly refer the below code example. 

 

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit"> 

    <DataAnnotationsValidator /> 

    <div class="form-group"> 

        <SfTextBox @bind-Value="@employee.EmpID"></SfTextBox> 

    </div> 

    <div class="form-group"> 

        <SfUploader @ref="UploadObj" ID="UploadFiles" > 

        </SfUploader> 

    </div> 

    <button type="submit" class="btn btn-primary">Register</button> 

</EditForm> 

@code{ 

    SfUploader UploadObj; 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

 

    public Employee employee = new Employee(); 

 

    public async Task HandleValidSubmit() 

    { 

        await JsRuntime.InvokeVoidAsync("onUpload", "UploadFiles"); 

    } 

    public void HandleInvalidSubmit() 

    { 

 

    } 

 

    public class Employee 

    { 

        [Required(ErrorMessage = "Employee ID is required")] 

        public string EmpID { get; set; } 

 

    } 

} 

[filesend.js] 

window.onUpload = (id) => {  

    var fileUpload = $("#UploadFiles").get(0); 

    var files = fileUpload.files; 

    var data = new FormData(); 

    for (var i = 0; i < files.length; i++) { 

        data.append(files[i].name, files[i]); 

    } 

    $.ajax({ 

        type: "POST", 

        url: "/api/SampleData/Save", 

        contentType: false, 

        processData: false, 

        data: data, 

        success: function (message) { 

        }, 

        error: function () { 

        } 

    }); 

    return true; 

 

}; 

[SampleDataController.cs] 

namespace BlazorApp1.Data 

{ 

    [Route("api/[controller]")] 

    public class SampleDataController : Controller 

    { 

        private IHostingEnvironment hostingEnv; 

        public IActionResult Index() 

        { 

            return View(); 

        } 

 

        public SampleDataController(IHostingEnvironment env) 

        { 

            this.hostingEnv = env; 

        } 

 

         

        [HttpPost("[action]")] 

        public async void Save(IList<IFormFile> UploadFiles) 

        { 

            var files = Request.Form.Files; 

            try 

            { 

                foreach (var file in files) 

                { 

                    if (files != null) 

                    { 

                        var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); 

                        filename = hostingEnv.WebRootPath + $@"\{filename}"; 

                        if (!System.IO.File.Exists(filename)) 

                        { 

                            using (FileStream fs = System.IO.File.Create(filename)) 

                            { 

                                file.CopyTo(fs); 

                                fs.Flush(); 

                            } 

                        } 

                        else 

                        { 

                            Response.Clear(); 

                            Response.StatusCode = 204; 

                            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File already exists."; 

                        } 

                    } 

                } 

                Response.Headers.Add("ID", "Failure"); // Assign the custom data in the response header. 

            } 

            catch (Exception e) 

            { 

                Response.Clear(); 

                Response.ContentType = "application/json; charset=utf-8"; 

                Response.StatusCode = 204; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload"; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 

            } 

             

        } 

        } 

      } 

 

Please find the sample from the below link. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/153253/ze/Uploader_153253_form-1817565151  

 

Regards, 

Berly B.C

[Werner]

Wow, Thank you very much for the detailed reply.

Just one question, the path "D:/" that you use in the sample, is that an arbitrary value, or should it be a valid path on clients PC?

[Berly Christopher]

Hi Werner, 

 

We need to provide the correct path in the defined path variable that is the valid value and the path obtained from the server where uploaded files are stored. Uploaded files will be saved, based on the path given. Kindly refer the below code example. 

 

public void OnChange(UploadChangeEventArgs args) 

    { 

        foreach (var file in args.Files) 

        { 

            var path = @"D:\UploadFiles\" + file.FileInfo.Name; // file will be saved in the UploadFiles folder in the D directory. 

            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); 

            file.Stream.WriteTo(filestream); 

            filestream.Close(); 

            file.Stream.Close(); 

        } 

    } 

 

 

  

Regards, 

Berly B.C 

[Ahmed]

Good day,

@Berly Christopher, 

How Can i take empID or any another data with the file Uploaded on API controller?

another question,

Can I take EditForm data to API controller without using javaScript?

Thank you in advice

[Berly Christopher]

Hi Ahmed, 

  

We can get the EmpID in the Save controller in the backend without using JS with help of PostAsync method from the HttpClient as mentioned in the below code example. 

  

@using Syncfusion.Blazor.Inputs 

@using System.IO; 

@inject HttpClient Http 

@using System.ComponentModel.DataAnnotations 

@inject IJSRuntime JsRuntime; 

@using Newtonsoft.Json 

@using System.Text 

 

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit"> 

    <DataAnnotationsValidator /> 

    <div class="form-group"> 

        <SfTextBox ID="EmpID" @bind-Value="@employee.EmpID"></SfTextBox> 

    </div> 

    <div class="form-group"> 

        <SfUploader @ref="UploadObj" ID="UploadFiles">             

            <UploaderEvents ValueChange="OnChange"></UploaderEvents> 

        </SfUploader> 

    </div> 

    <button type="submit" class="btn btn-primary">Register</button> 

</EditForm> 

 

@code{ 

    SfUploader UploadObj; 

    public Employee employee = new Employee(); 

 

    public async Task HandleValidSubmit() 

    { 

        this.UploadObj.Upload(); 

        await Http.PostAsync("https://localhost:44356/api/SampleData/Save", getStringContentFromObject(employee)); 

    } 

    public class Employee 

    { 

        [Required(ErrorMessage = "Employee ID is required")] 

        public string EmpID { get; set; } 

 

    } 

    private StringContent getStringContentFromObject(object obj) { 

        var serialized = JsonConvert.SerializeObject(obj); 

        var stringContent = new StringContent(serialized, Encoding.UTF8, "application/json"); 

        return stringContent; 

    } 

} 

 

  public async void Save(IList<IFormFile> UploadFiles, [FromBody] Employee employee) 

        { 

} 

  

Screenshot: 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PostAsync_153253994452645  

  

Regards, 

Berly B.C 

[Walter Martin]

Hi Ahmed, 

  

We can get the EmpID in the Save controller in the backend without using JS with help of PostAsync method from the HttpClient as mentioned in the below code example. 

  

@using Syncfusion.Blazor.Inputs 

@using System.IO; 

@inject HttpClient Http 

@using System.ComponentModel.DataAnnotations 

@inject IJSRuntime JsRuntime; 

@using Newtonsoft.Json 

@using System.Text 

 

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit"> 

    <DataAnnotationsValidator /> 

    <div class="form-group"> 

        <SfTextBox ID="EmpID" @bind-Value="@employee.EmpID"></SfTextBox> 

    </div> 

    <div class="form-group"> 

        <SfUploader @ref="UploadObj" ID="UploadFiles">             

            <UploaderEvents ValueChange="OnChange"></UploaderEvents> 

        </SfUploader> 

    </div> 

    <button type="submit" class="btn btn-primary">Register</button> 

</EditForm> 

 

@code{ 

    SfUploader UploadObj; 

    public Employee employee = new Employee(); 

 

    public async Task HandleValidSubmit() 

    { 

        this.UploadObj.Upload(); 

        await Http.PostAsync("https://localhost:44356/api/SampleData/Save", getStringContentFromObject(employee)); 

    } 

    public class Employee 

    { 

        [Required(ErrorMessage = "Employee ID is required")] 

        public string EmpID { get; set; } 

 

    } 

    private StringContent getStringContentFromObject(object obj) { 

        var serialized = JsonConvert.SerializeObject(obj); 

        var stringContent = new StringContent(serialized, Encoding.UTF8, "application/json"); 

        return stringContent; 

    } 

} 

 

  public async void Save(IList<IFormFile> UploadFiles, [FromBody] Employee employee) 

        { 

} 

  

Screenshot: 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PostAsync_153253994452645  

  

Regards, 

Berly B.C 

I'd like to save the file on ValidEdit Submit like in this sample, but the file is saved thanks to the ValueChange procedure and not by the Controller

Inside the Controller Save procedure, the UploadFiles is empty 

How can I use the controller to save the file and also receiving more parameters like in your sample ?

[Walter Martin]

I try to add here in attachment your sample a little bit changed to show the environment i'm working on

I need to use the controller to save the files on the server because it's the only way I found to get the root of my web hosting server using this line

hostingEnv.WebRootPath

I need to add a parameter to the Save function of the contoller because  I use it to change the filename depending on the source calling that function

I need to get the result in the Success event to handle the case when the file already exists in the server and request to the user if he wants to overwrite the file or not

In this project the file is saved by the OnChange function and not by the controller and also I don't know how to to call the controller again in case the user wants to overwrite it.

Is there a solution ?

Attachment: BlazorApp1_688d4189.zip

[Berly Christopher]

Hi Walter, 

 

Currently we are working on the requested requirement. So, we will check and update the further details in two business days (5^th March 2021).  

 

Regards, 

Berly B.C 

[Berly Christopher]

Hi Walter, 

 

As we mentioned earlier, while using the Uploader inside the EditForm , save and remove URL must be null and auto upload is in the disabled state. If you need to reach the server-end point, we need to send the form data through AJAX call with help of JS interop. Also, we can send the details from the controller and get it from the AJAX success handler since we have manually called the save action. Based on the details got in the arguments, you can implement further from your end. 

 

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">  

    <DataAnnotationsValidator />  

    <div class="form-group">  

        <SfUploader @ref="UploadObj" ID="UploadFiles" >  

        </SfUploader>  

    </div>  

    <button type="submit" class="btn btn-primary">Register</button>  

</EditForm>  

@code{  

    SfUploader UploadObj;  

    [Inject]  

    protected IJSRuntime JsRuntime { get; set; }  

  

    public async Task HandleValidSubmit()  

    {  

        await JsRuntime.InvokeVoidAsync("onUpload", "UploadFiles");  

    }  

}  

[filesend.js]  

window.onUpload = (id) => {   

    var fileUpload = $("#UploadFiles").get(0);  

    var files = fileUpload.files;  

    var data = new FormData();  

    for (var i = 0; i < files.length; i++) {  

        data.append(files[i].name, files[i]);  

    }  

    $.ajax({  

        type: "POST",  

        url: "/api/SampleData/Save",  

        contentType: false,  

        processData: false,  

        data: data,  

        success: function (message) {  

                     console.log(message); 

        },  

        error: function () {  

        }  

    });  

    return true;  

  

};  

[SampleDataController.cs]  

namespace BlazorApp1.Data  

{  

    [Route("api/[controller]")]  

    public class SampleDataController : Controller  

    {  

        private IHostingEnvironment hostingEnv;  

        public IActionResult Index()  

        {  

            return View();  

        }  

  

        public SampleDataController(IHostingEnvironment env)  

        {  

            this.hostingEnv = env;  

        }  

  

          

        [HttpPost("[action]")]  

        public ActionResult Save(IList<IFormFile> UploadFiles)  

        {  

            var files = Request.Form.Files;  

            try  

            {  

                foreach (var file in files)  

                {  

                    if (files != null)  

                    {  

                        var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');  

                        filename = hostingEnv.WebRootPath + $@"\{filename}";  

                        if (!System.IO.File.Exists(filename))  

                        {  

                            using (FileStream fs = System.IO.File.Create(filename))  

                            {  

                                file.CopyTo(fs);  

                                fs.Flush();  

                            }  

                        }  

                        else  

                        {  

                            Response.Clear();  

                            Response.StatusCode = 204;  

                            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File already exists.";  

                        }  

                    }  

                }  

                Response.Headers.Add("ID", "Failure"); // Assign the custom data in the response header.  

            }  

            catch (Exception e)  

            {  

                Response.Clear();  

                Response.ContentType = "application/json; charset=utf-8";  

                Response.StatusCode = 204;  

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";  

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;  

            }  

                         var successMessage = "Success"; 

                       return StatusCode(200, new { Message = $"{successMessage}" }); 

        }  

        }  

      }  

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploader653067616  

Regards, 

Berly B.C 

[Sarah]

Hi  Berly Christopher,

I saw the source code of the link below.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/PostAsync_153253994452645  

I have two classes as follows.

  public class Employee     { public string EmpID { get; set; }       public List< ClsFiles > Files{ get; set; }    }

  public class ClsFiles {  public int Id { get; set; }    public string Name { get; set; }  public int Size { get; set; }

                                                               public byte[] Content { get; set; } }

My Edit Form:

<EditForm Model="objEmployee" >

I want to add the images selected by the user to the  objEmploee.files and in the Action as follows.

    public async void create( Employee employee)

{

 //get uploaded file

}

public async void update( Employee employee)

{

//Detect files added by the user to be inserted in the database and identify files deleted by the user to be deleted from the database

}

Thank you

[Ponmani Murugaiyan]

Hi Sarah, 

Based on your provided information, we suspect that you need to get the uploaded files details in the Save controller in the backend in the PostAsync method using the model instance. While the file gets selected, you can add the files details to the model employee to maintain the uploaded files details. 

  <EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">   

        <DataAnnotationsValidator />   

        <div class="form-group">   

           <SfTextBox @bind-Value="@employee.EmpID"></SfTextBox>   

           <ValidationMessage For="() => employee.EmpID" />  

        </div>   

        <div class="form-group">   

            <SfUploader @ref="UploadObj" Multiple=false AutoUpload="false" ID="UploadFiles" Files="@employee.files">   

                <UploaderEvents ValueChange="OnChange" OnRemove="OnRemove" FileSelected="OnSelect"></UploaderEvents>   

            </SfUploader>   

            <ValidationMessage For="() => employee.files" />  

        </div>   

        <button type="submit" class="btn btn-primary">Register</button>   

    </EditForm>   

   

@code{  

    SfUploader UploadObj;   

    public class Employee  

    {  

        [Required(ErrorMessage ="Please enter your name")]  

        public string EmpID { get; set; }  

  

        [Required(ErrorMessage = "Please upload a file")]  

        public List<UploaderUploadedFiles> files { get; set; }  

    }  

    public Employee employee = new Employee();   

  

    public void OnSelect(SelectedEventArgs args)  

    {    

            this.employee.files = new List<UploaderUploadedFiles>() { new UploaderUploadedFiles() { Name = args.FilesData[0].Name, Type = args.FilesData[0].Type, Size = args.FilesData[0].Size } };  

    }  

    public void OnChange(UploadChangeEventArgs args)   

    {   

        foreach (var file in args.Files)   

        {   

            var path = @"D:\" + file.FileInfo.Name;   

            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);   

            file.Stream.WriteTo(filestream);   

            filestream.Close();   

            file.Stream.Close();   

        }   

    }   

    public void OnRemove()  

    {  

        this.employee.files = null;  

    }  

  

    public async Task HandleValidSubmit()   

    {   

        await this.UploadObj.Upload(); // Upload the selected file manually   

  

    }    

    public async Task HandleInvalidSubmit()  

    {  

         await this.UploadObj.Upload(); // Upload the selected file manually   

    }   

    }   

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Server1728449534 

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Sarah]

Hi  Ponmani Murugaiyan,

Thank you for your help. As I explained, my filecontent is byte [] and you used UploaderUploadedFiles.

[Ponmani Murugaiyan]

Hi Sarah, 

The files property type is UploaderUploadedFiles, so if the type is byte[], you can convert it into files and assign the value to the model instance. For more information for converting the file type, please refer the below link. 

https://www.c-sharpcorner.com/UploadFile/1a81c5/convert-file-to-byte-array-and-byte-array-to-files/ 

Regards, 

Ponmani M  

[Sarah]

Hi   Ponmani Murugaiyan,

Thank you for your answer. An error is displayed when I send the path to the FileToByteArray() function.

var path = @"D:\" + file.FileInfo.Name;

Error:  Could not find file

There is an OpenFileDialog component in the Windows form application. The return of this component is the file path selected by the user, but why D: \ is used in Blazer?

Thank you

[Ponmani Murugaiyan]

Hi Sarah, 

Query: but why D: \ is used in Blazer? 

 

1.We have used static file path (D:\) to save the uploaded file in our local machine. You can use your own path or decide where to save the file. 

2.If your uploaded file is saved in your project. You can get your saved location using the below highlighted line and store the path in a variable (rootpath). Then pass the rootpath to the FileStream to process your customization. 

private async Task OnChange(UploadChangeEventArgs args)  

{  

    UploadFiles file = args.Files.SingleOrDefault();  

    var path = @"path" + singleFile.FileInfo.Name;  

    FileStream stream = new FileStream(path, FileMode.Create, FileAccess.Write);  

    singleFile.Stream.WriteTo(stream);  

    stream.Close();  

    singleFile.Stream.Close();  

 

    string rootpath = System.IO.Path.Combine(System.IO.Directory.GetCurrentDirectory(), path);  

    UploadFiles file = args.Files.SingleOrDefault();  

    FileStream filestream = new FileStream(rootpath, FileMode.Open, FileAccess.Read, FileShare.None);  

    ... 

} 

 

Regards, 

Ponmani M 

[Sarah]

Hi Ponmani Murugaiyan,

Thank you for your answer. What happens if we use D: \ and the user's computer does not have a D: \ drive? Or what happens if we use C: \ and the client operating system does not allow storage on the C: \ drive?

I have a web Api and I want the user to select the desired files and when the form is submitted, the files will be sent to the web APi. Thanks for telling me in OnChange() how to put the files selected by the user in Employee.Files.

Thank you

[Prince Oliver]

Hi Sarah, 

Most welcome 

Query: What happens if we use D: \ and the user's computer does not have a D: \ drive? Or what happens if we use C: \ and the client operating system does not allow storage on the C: \ drive? 

The static file path (D:\) to save the uploaded file, is obtained from System.IO.Directory.GetCurrentDirectory() which returns the local path of the application hosted machine (Server). The server machine path will not vary based on the clients or their operating system.  

Regards, 

Prince   

[Sarah]

Hi  Prince Oliver,

Great because I was worried about client access.

Thank you for answering the second question as well. I had this problem for about two weeks and I could not solve it myself. Thank you for your help.

I have a web Api and I want the user to select the desired files and when the form is submitted, the files will be sent to the web APi. Thanks for telling me in OnChange() how to put the files selected by the user in Employee.Files.

Thank you

[Deepak Ramakrishnan]

Hi Sarah, 

 

Thanks for your update. 

 

 

As mentioned in the previous update from our end (17^th,January 2022) , You can use select event to get the selected files and put it on respective property  . Also you can refer the below code for your reference. 

 

 public void OnSelect(SelectedEventArgs args)   

    {     

            this.employee.files = new List<UploaderUploadedFiles>() { new UploaderUploadedFiles() { Name = args.FilesData[0].Name, Type = args.FilesData[0].Type, Size = args.FilesData[0].Size } };   

    }   

 

 

Kindly revert us if you have any concerns in it. 

 

Thanks, 

Deepak R. 

[Sarah]

Hi  Prince Oliver,

on January 16, 2022 01:53 PM

 I asked a question. My general problem is that the content of the file is byte[]. How can I convert the contents of a user's selected file to bytes[]?

[Ponmani Murugaiyan]

Hi Sarah, 

We have processed using onUploadStart event. In this event, the file return as raw file from file data and converted to byte[] from base64 and returned as memory stream.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-212535475     

Regards, 

Ponmani M 

[Yonas Tesfaye]

Hi Ponmani,

I have a similar problem to what you have discussed in this thread. I have a web API that expects a model like the one below. My goal is to use the upload component on the frontend application (i.e. the Blazor Wasm application).

I tried looking into the documentation and forums, but I was unable to find an answer. The solutions I've seen so far involve Blazer Server apps or storing files in a separate endpoint that returns void.

Would it be possible to use an API that returns the fileUrl after saving? As I will be saving the fileUrl along with my other form elements on submission of the form.

public class FileUploadRequest
{
public string Name { get; set; } = default!;
    public string Extension { get; set; } = default!;
    public string Data { get; set; } = default!;
    public string Country { get; set; } = default!;

​    public string City { get; set; } = default!;

​    public string SubCity { get; set; } = default!;​
}

This is the model My web api expects for the file and extra informations (more attributes are there). Where the Data field is a base64string and other attributes in the model.

I have a working example using InputFile and handled the conversion to base64string on the OnChange event. 

IBrowserFile _file;

var buffer = new byte[_file.Size];
const string format = "application/octet-stream";
await _file.OpenReadStream(_file.Size).ReadAsync(buffer);
var data = $"data:{format};base64,{Convert.ToBase64String(buffer)}";

My problem is that I couldn't be able to easily manipulate the File information as I would do with IBrowserFile like converting it to base64string. Can you suggest me an approach or any resource you have.

Thank you,

Yonas

[UdhayaKumar Duraisamy]

you can refer to the below documentation to achieve your requirement about the uploader component using inside the editform and convert the uploaded file to base64 format.

Documentation link: https://www.syncfusion.com/blogs/post/how-to-preview-images-in-syncfusion-blazor-file-upload-component.aspx