Upload image in grid

[Denis]

I've read (i think) all similar threads but nothing found, so...
I've a very simple grid with 3 txt fields and 1 image (16x16 png) stored as raw data a db field (data:image/png etc). I've no problems to display it as a template column with a <img src="@class.property" ..>.. but how can I edit it? I've tryied with an upload component but i dunno how I can made it...
I use a blazor WA Client (PWA) + WA Server called via webAPI  in .net core 6.0 visual studio 2021. The DB is a class created via FluentAPI with some fields (int ID etc and a VARCHAR(MAX) for image)

[Monisha Saravanan]

Hi Denis,

We have validated query and we suspect that you want to upload an image while editing the Grid column and trying to show that uploaded image in Grid. For editing an column we must define Field name. So we suggest you to achieve your requirement by using Column Template(for show image in Column) and EditTemplate feature(To render SfUploader for uploading the image while adding/editing) of the Grid.

Here, we have show the image in Grid columns using Column Template. For uploading the image, we have used EditTemplate. Find the below code snippets for your reference.

 

<SfGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

    <GridEvents OnActionBegin="BeginHandler" TValue="Order"></GridEvents>

    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Dialog"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" IsIdentity="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>

        . . .

        <GridColumn Field="Imagesrc" HeaderText="Customer Name" Width="200">

            <Template>    //for showing the image in Grid column

                @{

                    var imageUrl = (context as Order).Imagesrc;

                    <div class="image">

                        <img src="@imageUrl" />

                    </div>

                }

            </Template>

            <EditTemplate>    //for rendering SfUploader component in EditTemplate for uploading the image during Adding/Editing

                <SfUploader ID="uploadFiles" AllowedExtensions=".jpg,.png,.jpeg" Multiple="false">

                    <UploaderEvents FileSelected="Selected"></UploaderEvents>

                </SfUploader>

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

<style>

    .image img {

        height: 55px;

        width: 55px;

        border-radius: 50px;

        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);

    }

</style>

 

@code{

    public int? DefaultValue = 100;

    public string UploadedFile { get; set; }

    public void BeginHandler(ActionEventArgs<Order> Args)

    {

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save && Args.Action == "Add")

        {

            Args.Data.OrderID = DefaultValue++;    //set the default value while adding.

            //save the file name / url in grid datasource. You can generate the byte and store here.

            Args.Data.Imagesrc = "scripts/Images/Employees/"+UploadedFile;

        } else if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save && Args.Action == "Edit")

        {

            //save the file name / url in grid datasource. You can generate the byte and store here.

            Args.Data.Imagesrc = "scripts/Images/Employees/" + UploadedFile;

        }

 

    }

    public void Selected(SelectedEventArgs Args)

    {

        UploadedFile = Args.FilesData[0].Name;

    }

    public List<Order> Orders { get; set; }

    . . .

}

 

Reference:

https://blazor.syncfusion.com/documentation/datagrid/how-to/editing-with-template-column

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-type

https://blazor.syncfusion.com/documentation/file-upload/getting-started/

Please get back to us if you have further queries.

Regards,

Monisha

[Tyrone]

Hi Monisha,

Can you provide a code for  this?

 //You can generate the byte and store here. as you mentioned.. 

or some codes to copy and replace the current file if there is any.

Best Regards,

Tyrone  

[Monisha Saravanan]

Hi Tyrone,

We have provided the working sample of above query. Kindly check the attached sample for additional information.

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

Also please refer the below thread for additional information which shows byte to image conversion

Forum: https://www.syncfusion.com/forums/173053/blazor-syncfusion-grid-loading-image-from-database-saved-like-byte

Regards,

Monisha