image Uploader in the Grid

[Ajay Mehta]

I want to have an image uploader while adding or editing a record either inline or dialog

[Mohammed Farook J]

Hi Ajay, 

 

Thanks for contacting Syncfusion support. 

 

 

We have achieved your requirement by using ‘edit template’ property of Grid.  The edit template is used to add a custom component for a particular column by invoking the following functions: 

• create - It is used to create the element at the time of initialization.
• write - It is used to create the custom component or assign default value at the time of editing.
• read - It is used to read the value from the component at the time of save.
• destroy - It is used to destroy the component.

 

Please find the code example. 

 

 

[cshtml] 

 

  @Html.EJS().Grid("Grid").DataSource((IEnumerable<Object>)ViewBag.dataSource).Columns(col => 

{ 

    col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); 

    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add(); 

    col.Field("UserImage").HeaderText("Image").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add(); 

}).AllowPaging(true). EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

 

 

 

To render Essential JS2 Uploader component in  grid edit template . please find the code example 

 

 

    function create(args) { 

// create target element 

        elem = document.createElement('input'); 

        return elem;  

    } 

   function write(args) { 

// EJ2 render Uploader component 

 

        uploadObj = new ej.inputs.Uploader({ 

// get the file through selected event of Uploader 

 

            selected: function (args) { 

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

                    getBase64(args.filesData[i].rawFile); 

                } 

            }, 

        }); 

        uploadObj.appendTo(elem); 

    } 

 

    function destroy() { 

// destroy the component after save 

 

        uploadObj.destroy(); 

    } 

    function read(args) { 

// read the custom component(uploader) value 

 

        return filt64String; // base64 string return  

 

    } 

 

We can get the uploading file from ‘selected’ event of Uploader .  please find the documentation  

 

selected- event:  https://ej2.syncfusion.com/16.1.37/documentation/uploader/api-uploader.html?lang=es5#selected  

 

Grid can’t send data request with image type file. So we have converted into base64 sting from uploading image file. Please find the code example 

 

// convert into base64 

function getBase64(file) { 

        var reader = new FileReader(); 

        reader.readAsDataURL(file); 

        filt64String = reader.result; 

    } 

 

 

 

Please find the documentation for your reference. 

 

EJ2Uploader-component – Demo : https://ej2.syncfusion.com/16.1.37/javascript/demos/#/material/uploader/default.html  

EJ2Uploaded-documenation :  https://ej2.syncfusion.com/16.1.37/documentation/uploader/getting-started.html?lang=es5#initialize-the-uploader  

 

Edit-template : https://ej2.syncfusion.com/16.1.37/documentation/grid/edit.html?lang=typescript#cell-edit-template  

 

 

Please let us know if you have any quarries. 

 

Regards, 

J Mohammed Farook 

 

[Ajay Mehta]

Thanks Mohammed for the code. Do you have any sample for accessing selected method in controller as i tried multiple times but no luck so far. Also how can i change the size of edit dialog, as it is appearing as a small window.  

[Mohammed Farook J]

Hi Ajay,  

 

Query 1 :  Do you have any sample for accessing selected method in controller 

 

We have understood from your update, you want to perform CRUD action in server side. So we can achieved your requirement by using “UrlAdaptor’ . Please find the sample and documentation for reference. 

 

Code example 

 

<div> 

    @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").UpdateUrl("/Home/Update").InsertUrl("Home/Add").RemoveUrl("Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col => 

    { 

        col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

        col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); 

        col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add(); 

        col.Field("Image").HeaderText("Image").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add(); 

    }).AllowPaging(true).ActionBegin("actionBegin").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

</div> 

 

. . . 

 

 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-1299361296.zip  

 

Documentation : https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/edit.html?syntax=razor#persisting-data-in-server  

 

 

Query 2:  how can i change the size of edit dialog, as it is appearing as a small window 

 

We can increase EJ2-dialog by using the css as follows. 

 

 

 

<style> 

    .e-dialog.e-edit-dialog{ 

        width: 800px !important; 

        height: 800px !important; 

    } 

    input, select, textarea { 

       max-width: 790px !important; 

    } 

</style> 

 

 

 

Please let us know if you have any concerns. 

 

Regards, 

J Mohammed Faook 

 

[Ajay Mehta]

Thanks J Mohammed Farook!

[Mohammed Farook J]

Hi Ajay, 

Thanks for your update. 

Please get back to us if you need further assistance. 

Regards, 

J Mohammed Farook 

[Ajay Mehta]

The image after insert or update is not refreshing. Is there any way to refresh the image or grid data.

[Mohammed Farook J]

Hi Ajay, 

In previous response, we have sent image in base64 string format to server when add/update the record for you can store in your database. If you want to view the base64 in your DOM after save operation, you need to convert base64 to image tag.  We have achieved you requirement by using ‘QueryCellInfo’ event of Grid 

Please find the code example for your reference. 

<div> 

    @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").UpdateUrl("/Home/Update").InsertUrl("Home/Add").RemoveUrl("Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col => 

    { 

        col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

        . . . 

        col.Field("Image").HeaderText("Image").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add(); 

    }).AllowPaging(true).QueryCellInfo("queryCellInfo").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

function queryCellInfo(args) { 

        if (args.column.field === "Image") { 

            args.cell.setAttribute('aria-label', 'image') 

            args.cell.innerText = ''; 

            var img = new Image(); 

            img.src = args.data.Image; 

            args.cell.appendChild(img); 

        } 

    } 

 

Note : Please use code snippet for render  Essential JS2 Uploader and converting base64 from the previous response. 

 

queryCellInfo – event :  https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#querycellinfo  

 

Still if the issue persist then please provide the code example of your procedure to display the image after save operation. 

 

Regards, 

J Mohammed Farook 

 

[Arsenio]

Could we configure the uploader and the grid cell to save and show the image from Azure Blob.

Regards,

Arsenio

[Madhu Sudhanan P]

Hi Arsenio,  

 

We have checked your requirement to configure the uploader in the grid cell to save and show the image from Azure Blob. In File upload component, we have provided support to save file into particular location, you can use the service and get the file to store the file into Azure. Please find the code snippet for your reference.  

 

[AcceptVerbs("Post")]  

public void Save()  

{  

    var fileStream = HttpContext.Current.Request.Files["UploadFiles"];  

    var fileName = fileStream.FileName;  

    StorageCredentials storageCredentials = new StorageCredentials(_storageConfig.AccountName, _storageConfig.AccountKey);  

    CloudStorageAccount storageAccount = new CloudStorageAccount(storageCredentials, true);  

    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();  

    CloudBlobContainer container = blobClient.GetContainerReference(_storageConfig.ImageContainer);  

    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);  

    await blockBlob.UploadFromStreamAsync(fileStream);  

}  

 

Please find the reference document: https://docs.microsoft.com/en-us/azure/storage/blobs/storage-upload-process-images?tabs=dotnet   

 

UG link: https://ej2.syncfusion.com/aspnetmvc/documentation/uploader/file-source/#server-side-configuration-for-save-the-paste-file   

 

By using edit template property of Grid. We can add a custom component for a particular column by invoking the following functions:  

 

create - It is used to create the element at the time of initialization.  

write - It is used to create the custom component or assign default value at the time of editing.  

read - It is used to read the value from the component at the time of save.  

destroy - It is used to destroy the component.  

 

Please find the code example below  

 

[cshtml]  

@Html.EJS().Grid("Grid").DataSource((IEnumerable<Object>)ViewBag.dataSource).Columns(col => { col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add(); col.Field("UserImage").HeaderText("Image").Edit(new { create = "create", read = "read", destroy ="destroy", write = "write" }).Width("150").Add(); }).AllowPaging(true).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>  

    () { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()  

 

To render Essential JS2 Uploader component in grid edit template. Kindly refer to the following code.  

 

<script>  

    function create(args) { // create target element   

        elem = document.createElement('input'); return elem;  

    }  

    function write(args) { // EJ2 render Uploader component   

        uploadObj = new ej.inputs.Uploader({ // get the file through selected event of Uploader   

            selected: function (args) {  

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

                    getBase64(args.filesData[i].rawFile);  

                }  

            },  

        }); uploadObj.appendTo(elem);  

    }  

    function destroy() { // destroy the component after save   

        uploadObj.destroy();  

    }  

    function read(args) { // read the custom component(uploader) value   

        return filt64String; // base64 string return   

    }  

</script>  

 

We can get the uploading file from selected event of Uploader. Kindly refer to the following API reference: https://ej2.syncfusion.com/16.1.37/documentation/uploader/api-uploader.html?lang=es5#selected  

 

Please let us know if you need any further assistance on this.  

 

Regards,  

Madhu Sudhanan P