Image upload with Grid razor pages

[Nitin Pawar]

How to upload image into database using syncfusion EJ Grid with image upload option on add data screen

[Praveenkumar Gajendiran]

Hi Nitin,


Greetings from Syncfusion support.

We checked your query and based on that we have prepared a sample.

In the below code example we have stored the images in grid dataSource as base64 string. We have displayed the images using queryCellInfo event of the Grid.  

While editing we have used cellEdit template to render the uploader component. After updating we are getting the base64 string of the uploader file and saved the value to the grid dataSource. 

Please refer the below code example and sample for more information. 

<div> 

    <ejs-grid id="Grid" queryCellInfo="queryCellInfo" allowPaging="true" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })"> 

        <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" showDeleteConfirmDialog="true"></e-grid-editSettings> 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

            <e-grid-column field="Image" headerText=" Item Image" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="120"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    var elem; 

   var uploadObj; 

    var strm; 

 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

 

    function write(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' 

            }, 

            success: onUploadSuccess, 

            failure: onUploadFailure, 

        }); 

        uploadObj.appendTo(elem); 

    } 

 

    function destroy() { 

        uploadObj.destroy(); 

    } 

 

    function read(args) { 

        return strm; 

    } 

 

 

    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; 

            img.classList.add('test'); 

            img.style.width = '30px'; 

            img.style.height = '30px'; 

            args.cell.appendChild(img); 

        } 

    } 

   

    function onUploadSuccess(args) { 

        if (args.operation === 'upload') { 

            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); 

        }; 

 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/157805/ze/Gridcoreimage-uploadersample1376766.zip 

Refer the below document for CellEditTemplate feature of Grid,

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

                                

Please let us know if you need further assistance. 

Regards, 

Praveenkumar G 

[Nitin Pawar]

Hi,

Thanks for the details. I have a couple of questions

1. Which urls are these. 

     saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', 

     removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' 

     Is Save and Remove API code available so, I can deploy them on my site. I dont want my code to connect to aspnetmvc.syncfusion.com everytime

when uploading any file.

2. I want to save the uploaded file into a folder on the server and save the filename into my database. Do you have an sample project for this.

Thanks

Nitin

[Praveenkumar Gajendiran]

Hi Nitin,  

 

Thanks for your update.

We have checked your query and we would like to inform you that save and remove URLs are the destinations where we can save and remove the files respectively. If we upload a file then that file will be sent to the specified saveUrl through HttpRequest.   

You can save the uploaded files into a folder with the help of the file which can be obtained in the arguments of save method. Also you can get the file name by which you can save it to the database. 

  

 

We also would like to know you that name of the arguments should be same as that of name attribute provided to the control. If name attribute is not explicitly provided then id will be set as the name attribute.  

@{  

    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://localhost:44342/Home/Save",   

        RemoveUrl = "https://localhost:44342/Home/Remove" };  

}  

  

<div class="col-lg-12 control-section" id="target">  

    <ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings"></ejs-uploader>  

</div>  

 

We also have prepared  sample to meet your requirement. Please find the sample in the below link.

Sample Link       : https://www.syncfusion.com/downloads/support/forum/157805/ze/Uploader-593533541  

 

Regards,  

Praveenkumar G 

[Nitin Pawar]

I am getting "File failed to upload"   Failed to load resource: the server responded with a status of 404 () error while uploading the file.I have mention saveurl as below

function write(args) {

            uploadObj = new ej.inputs.Uploader({

                asyncSettings: {

                    saveUrl: "https://localhost:44308/services/api/uploadbox/Save",

                    removeUrl: "https://localhost:44308/services/api/uploadbox/Remove"

                    

                },

                success: onUploadSuccess,

                failure: onUploadFailure,

            });

            uploadObj.appendTo(elem);

        }

[Praveenkumar Gajendiran]

Hi Nitin,

Thanks for your update.

The reported ‘404 error’ usually occurs if the URL is not available or incorrect. So can you please ensure this URL from your end. For your convenience we have shared a sample. Please find the link below  

Sample Link: https://www.syncfusion.com/downloads/support/forum/157805/ze/Gridcoreimage-uploadersample1376766.zip 

Regards,
Praveenkumar G