Grid: Image Upload within Grid (Inline Editing)

Question

Hi support,I want to add a column to my grid where I can display and upload an image.I know that this can be done with the Cell Edit Template, but I could not find any example with JavaScript.Can you please provide an example?I'm using the DataManager with the UrlAdaptor to make the CRUD Operations. This works very well.Thanks in advance.Regards,Stephan

Arshad · Answer

Refer this Linkhttps://ej2.syncfusion.com/javascript/demos/#/material/grid/row-template.html

Stephan Schrade · Answer

Hi support,thanks for your answer.But this only solves the task to display the image.I also need the possibility to upload a new image with the "inline editor".TIA,Stephan

Ajith Govarthan · Answer

Hi Stephan, 
 
Query:  need the possibility to upload a new image with the "inline editor". 
 
Based on your query we have prepared sample in that we have used upload component as edit template in the inline editing. Here the uploader component have save URL and uploader URL  using that you can save and remove the uploaded files by handling them at our end. We have attached the sample so please refer the sample for your reference. 
 
Code snippet:  




Index.js 
 
{ 
           headerText: 'Upload',width: 150, edit: { 
                create: function(){ 
                    elem = document.createElement('input'); 
                    return elem; 
                }, 
                read: function(args) { 
                  debugger; 
                       readfile = uploadObj.filesData[0].rawFile instanceof File ? uploadObj.filesData : readfile; 
 
        return readfile; 
                }, 
                destroy: function() { 
                    uploadObj.destroy(); 
                }, 
                write: function(args){ 
                        uploadObj = new ej.inputs.Uploader({ 
            asyncSettings: { 
     saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', 
            removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' 
            }, 
            removing: function (args) { 
                 args.postRawFile = false; 
            }, 
 
        }); 
        uploadObj.appendTo(elem); 
                } 
            } 
        } 
 
Sample Link: https://stackblitz.com/edit/zolh6r-bgzf6i?file=index.js 

Documentation link: https://ej2.syncfusion.com/documentation/grid/edit/#cell-edit-template 
 
Regards, 
Ajith G.

Stephan Schrade · Answer

Hi support,many thanks for your answer.Now I managed to save the file to my server :-)But how can I display the uploaded file within the grid?Which url is called and which answer is expected from the server (base64 encoded file or url to the file) ?TIA,Stephan

Ajith Govarthan · Answer

Hi Stephan, 

Query: But how can I display the uploaded file within the grid? 

From the above query we need to confirm whether you want to display the uploaded image or the filename in separate column of an EJ2 Grid. 

Query: Which url is called and which answer is expected from the server (base64 encoded file or url to the file) ? 
 
We are unclear with the above lines. So, please provide more information for the above line which will help us to provide the prompt solution. 

Regards, 
Ajith G.

Stephan Schrade · Answer

Hi support,yes I want to display the upload image within the grid.The best would be if this can be in the same column as the upload editor.I thought the code after "read:" is responsible for that.And I thought that an url of the server is called in order to display the image.That is the reason why I asked "Which url is called....."Regards,Stephan

Ajith Govarthan · Answer

Hi Stephan, 

Sorry for the inconveniences. 

Currently we are working with your requirements that you want to upload images using inline edit and also want to show the uploaded images. Currently we are facing some complexities so we will update you on April 13th 2020. 

Regards, 
Ajith G.

Manivel Sellamuthu · Answer

Hi Stephan, 

Thanks for your patience. 

Based on your requirement we have prepared a sample.  

In the below code example we have stored the images in grid dataSource as base64 string and we displayed the images using queryCellInfo event of the Grid.  

While editing we have used cellEdit template to render the uploader. After uploading the image, we are getting the base64 string of the uploader file and save the value to the grid dataSource. 

Please refer the below code example and sample for more information. 





ej.base.enableRipple(true); 
var gridData = require('./data'); 
    var grid = new ej.grids.Grid({ 
        dataSource: gridData, 
        queryCellInfo: queryCellInfo, 
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
        allowPaging: true, 
        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
        columns: [ 
            { 
                field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',width: 140 
            }, 
            { 
                field: 'CustomerID', headerText: 'Customer ID', 
                width: 140 
            }, 
            { 
                field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', 
                width: 140, format: 'C2' 
            }, 
  { 
           headerText: 'Upload',field:'Image', width: 150, edit: { 
//defining the cell edit template for the image column 
                create: function(){ 
                    elem = document.createElement('input'); 
                    return elem; 
                }, 
                read: function(args) { 
// return the obtained base64 string of the image 
                  return strm; 
                }, 
                destroy: function() { 
                    uploadObj.destroy(); 
                }, 
                write: function(args){ 
                        uploadObj = new ej.inputs.Uploader({ 
            asyncSettings: { 
           saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', 
            removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' 
            }, 
// binding success and uploader events for the uploader 
          success: onUploadSuccess, 
          failure: onUploadFailure, 
        }); 
        uploadObj.appendTo(elem); 
                } 
            } 
        } 
        ], 
    }); 
    grid.appendTo('#Grid'); 
 
    function queryCellInfo (args) { 
    if (args.column.field === "Image") { 
// displaying the image store in the grid dataSource 
      args.cell.setAttribute('aria-label', 'image') 
      args.cell.innerText = ''; 
      var img = new Image(); 
      img.src = args.data.Image; 
      img.classList.add ('test'); 
      img.style.width='30px'; 
      img.style.height='30px'; 
      args.cell.appendChild(img); 
    } 
    } 
var strm; 
function onUploadSuccess(args) { 
  if (args.operation === 'upload') { 
// after successful upload getting the base64 string of the image 
    strm = getBase64(args.file.rawFile); 
  } 
} 
function onUploadFailure(args) { 
  console.log('File failed to upload'); 
} 
 
function getBase64(file) { 
  var reader = new FileReader(); 
  reader.readAsDataURL(file); 
  reader.onload = function () { 
    strm = reader.result; 
  }; 
  reader.onerror = function (error) { 
    console.log('Error: ', error); 
  }; 
 
} 

Sample: https://stackblitz.com/edit/153032-image-uploader 

Please let us know if you need any further assistance. 

Regards, 
Manivel

Cezar · Answer

Is there an example of how to achieve this using Asp Net Core Razor Pages?

Ajith Govarthan · Answer

Hi Cezar, Thanks for the update. Query: Is there an example of how to achieve this using Asp Net Core Razor Pages? Based on your requirement we have prepare sample with edit template for the uploader component in the ASP Net Core Razor pages. For your convenience we have attached the sample so please refer the sample for your reference. Code Example: Index.cshtml @page @model IndexModel @{ ViewData["Title"] = "Home page"; } @Html.AntiForgeryToken()

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid_Razor_31429153331_uploader1514944703.zip Please get back to us if you need further assistance. Regards, Ajith G.

psyk · Answer

Hello,i know i'm not it the right forums, but could you give an example for blazor .net 5 please?

Rahul Narayanasamy · Answer

Hi Psyk, Greetings from Syncfusion. Query: Grid: I want to add a column to my grid where I can display and upload an image. - , but could you give an example for blazor .net 5 please? We have validated query and we have prepared a sample in Blazor. You want to upload an image while adding/editing and show that image in Grid. 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 shown the image in Grid columns using Column Template. For uploading the image, we have used EditTemplate. Find the below code snippets for your reference. @*for rendering SfUploader component in EditTemplate for uploading the image during Adding/Editing*@ @code{ public int? DefaultValue = 100; public string UploadedFile { get; set; } public void BeginHandler(ActionEventArgs 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 void OnChange(UploadChangeEventArgs args) { foreach (var file in args.Files) { var size = file.FileInfo.Size; var path = @"./wwwroot/scripts/Images/Employees/" + file.FileInfo.Name; FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); file.Stream.WriteTo(filestream); filestream.Close(); file.Stream.Close(); } } . . . } Sample: https://www.syncfusion.com/downloads/support/forum/165430/ze/BlazorGridUpload940866221 Reference: https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template Please let us know if you have any concerns. Regards, Rahul

aujlaa karan · Answer

I also need the possibility to upload a new image with the "inline editor".

Jeevakanth Palaniappan · Answer

Hi Aujlaa , 
 
We have checked your query and we would like to inform you that the previously provided sample is to upload image in the inline editor only. So we quite unclear about your exact scenario. Please refer the video demo for your reference. 
 
video -  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploadimage-645298131  
 
If this is not your scenario then kindly provide us more information on your query. 
 
Regards, 
Jeevakanth SP.

aujlaa karan · Answer

many thanks for your answer.get-mobdro.com

Rahul Narayanasamy · Answer

Hi Aujlaa, 
 
Thanks for the update. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul