Uploader inside dialog edit

[Tarik]

Regards,

I have an issue while uploading a file from the uploader inside dialog edit, my goal is to upload a file when I click add in a grid placed in a dialog, I want to send the uploaded file to my controller and save it.

<div class="container">

        <ejs-dialog id="alert_dialog" enableResize="true" animationSettings="defaultanimation" isModal="true" showCloseIcon="true" visible="false" width="1000px" allowDragging="true">

            <e-content-template>

                <div>

                    <h5>Training name: <span id="trainingName"></span></h5>

                </div>

                <ejs-grid id="Grid1" commandClick="commandsClickDialogGrid" actionBegin="actionBeginDialogGrid" actionComplete="actionCompleteDialogGrid" allowPaging="true" toolbar="@(new List<string>() {"Add" })">

                    <e-grid-pagesettings pageSize="8"></e-grid-pagesettings>

                    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true" mode="Dialog"></e-grid-editsettings>

                    <e-grid-columns>

                        <e-grid-column field="attachment_id" headerText="ID" visible="false" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="60"></e-grid-column>

                        <e-grid-column field="file" headerText="File Name" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="0"></e-grid-column>

                        <e-grid-column field="fileName" headerText="File Name" width="105"></e-grid-column>

                        <e-grid-column field="fileDescription" edit="@(new {create="createTBox", read="readTBox", destroy="destroyTBox", write="writeTBox"  })" headerText="File Description" width="150"></e-grid-column>

                        <e-grid-column field="sourceTable" visible="false" headerText="Source Table" width="0"></e-grid-column>

                        <e-grid-column field="folderName" visible="false" headerText="Folder Name" width="0"></e-grid-column>

                        <e-grid-column field="sourceKey" visible="false" headerText="Source Key" width="0"></e-grid-column>

                        <e-grid-column field="created" headerText="Created" width="80"></e-grid-column>

                        <e-grid-column field="user_id" visible="false" headerText="File Description" width="0"></e-grid-column>

                        <e-grid-column field="name" headerText="Training name" width="105"></e-grid-column>

                        <e-grid-column field="code" headerText="Training code" width="60"></e-grid-column>

                        <e-grid-column commands="commandsDialogGrid" width="60"></e-grid-column>

                    </e-grid-columns>

                </ejs-grid>

            </e-content-template>

        </ejs-dialog>

    </div>

function create(args) {

        elemUpl = document.createElement('input');

        return elemUpl;

    }

    function write(args) {

        uploadObj = new ejs.inputs.Uploader({

            asyncSettings: {

                saveUrl: '/Training/Save',

                removeUrl: '/Training/Remove'

            },

            success: onUploadSuccess,

        });

        uploadObj.appendTo(elemUpl);

    }

    function destroy() {

        uploadObj.destroy();

    }

    function read(args) {

        //console.log(uploadObj.getFilesData());

        return uploadObj.getFilesData();

    }

TrainingController.cs

 public IActionResult Save(IList<IFormFile> uploadFiles)

        { 

            try

            {

                for each (var file in uploadFiles)

                {

                    if (uploadFiles != null)

                    {

                        var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');

                        filename = "D:\\UploadedFiles" + $@"\{filename}";

                        if (!System.IO.File.Exists(filename))

                        {

                            using (FileStream fs = System.IO.File.Create(filename))

                            {

                                file.CopyTo(fs);

                                fs.Flush();

                            }

                        }

                        else

                        {

                            Response.Clear();

                            Response.StatusCode = 204;

                            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File already exists.";

                        }

                    }

                }

            }

            catch (Exception e)

            {

                Response.Clear();

                Response.ContentType = "application/json; charset=utf-8";

                Response.StatusCode = 204;

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "No Content";

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;

            }

            return Content("");

        }

[Vignesh Sivagnanam]

Hi Tarik 

  

Greetings from Syncfusion support 

  

Based on your query you have faced issue while upload and save the file to the server side in the uploader component. We have validated your reported issue by saving the file in the server side, but we are not able to reproduce the reported issue at our end. 

  

Please refer the below Sample and Screenshot for your reference, 

  

Sample : https://www.syncfusion.com/downloads/support/forum/165632/ze/EJ2-Grid_with_Uploader1237246004.zip 

  

 

  

 

  

Please Share the below details to validate further on the issue, 

  

1. If possible, replicate the issue in the above sample or share he issue reproduced sample. 

  

2. Share the full grid rendering code. 

  

3. Syncfusion package version. 

  

Regards 

Vignesh Sivagnanam