How to upload Image in Server and displayed it into Image control

[KINS]

I have an below clarification on image upload in file server.

 I have an "Product Master" Entry form which contain four field

1.Product Code

2.Product Name

3.Price

4.Image FileName (it's just as Image file name not as Image bytes).

I would like to select Image and  displayed it into Image control.

When I click save button, the above (four field ) data should be update in sql table and after updating data in sql table the image should be upload in server 

   

[Sevvandhi Nagulan]

Hi Hassan, 

 

 

Greetings from Syncfusion support. 

 

 

We checked your query. We prepared the sample with mentioned requirement and attached it below for your reference. When submitting the form, you can get the entered values such as product code, product name and price from the model variable. Also, you can get the selected file details from the file’s property in the submit event. Refer the below code and sample. 

 

public Product products = new Product(); 

 

    List<fileInfo> files = new List<fileInfo>(); 

    public class fileInfo 

    { 

        public string Path { get; set; } 

        public string Name { get; set; } 

        public double Size { get; set; } 

    } 

    public void OnChangeUpload(UploadChangeEventArgs args) 

    { 

        foreach (var file in args.Files) 

        { 

            var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), "Images"); 

            var fullPath = Path.Combine(pathToSave, file.FileInfo.Name); 

            byte[] bytes = file.Stream.ToArray(); 

            string base64 = Convert.ToBase64String(bytes); 

            files.Add(new fileInfo() { Path = @"data:image/" + file.FileInfo.Type + ";base64," + base64, Name = file.FileInfo.Name, Size = file.FileInfo.Size }); 

        } 

    } 

 

 

Please find the sample below. 

 

 

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

 

 

Kindly get back to us for further assistance. 

 

 

Regards, 

Sevvandhi N 

 

[KINS]

Thanks for support...

I need to upload image to server when I press submit button .

[Berly Christopher]

Hi Hassan, 

  

As we mentioned earlier, we can get the selected file details (base64 string) from the file’s property in the submit event. Based on the information get it from the files property, you can upload in to the server. Kindly refer the below code example. 

  

 

public void HandleValidSubmit() 

    { 

        Console.WriteLine(files); 

    } 

 

  

Regards, 

Berly B.C 

[KINS]

Sorry will check again and let you know

[Boot Dat]

Trying to save file path to database through a service and controller

public async Task<int> CategoryInsert(string CategoryName, string CategoryImage)
{
    var response = await _httpClient.PostAsJsonAsync($"api/Category/categoryinsert/{CategoryName}/{CategoryImage}",  CategoryImage  );
 var contents = await response.Content.ReadAsStringAsync();
 return Convert.ToInt32(contents);
}

but I get an error "Unhandled exception rendering component: Invalid URI: The Uri string is too long."

saving the CategoryImage as any other string works but saving the base64 string gives the error

How do I resolve this?
Below is my  controller

// POST api/<CategoryController>
[HttpPost]
[Route("categoryinsert/{CategoryName}/{CategoryImage}")]
public async Task<int> CategoryInsert(string CategoryName, string CategoryImage)
{
    int Success = 0;
    var parameters = new DynamicParameters();
    parameters.Add("@CategoryName", CategoryName, DbType.String);
    parameters.Add("@CategoryImage", CategoryImage, DbType.String);
    parameters.Add("@ReturnValue", dbType: DbType.Int32, direction: ParameterDirection.ReturnValue);
    using IDbConnection conn = new SqlConnection(_configuration.GetConnectionString(connectionId));
    {
        // Stored procedure method
        await conn.ExecuteAsync("spCategory_Insert", parameters, commandType: CommandType.StoredProcedure);

        Success = parameters.Get<int>("@ReturnValue");
        
    }
   
    return Success;
}

[UdhayaKumar Duraisamy]

You can refer to the below public forums for your requirement.

• https://stackoverflow.com/questions/38440631/httpclient-the-uri-string-is-too-long 
• https://social.msdn.microsoft.com/Forums/vstudio/en-US/82094fda-00af-45d6-b1e2-8b18213da4cf/invalid-uri-the-uri-string-is-too-long?forum=wcf 
• https://www.sqlservercentral.com/forums/topic/ssrs-2012-error-invalid-uri-the-uri-string-is-too-long