How to upload file with another parameter ?

[Tümer]

I implemented file upload successfully. While uploading file i need to send another parameter which is client id. Because that file belongs to client. Id is located on javascript section. How can i do that ?

 public async Task<ActionResult> SaveClientDeviceDocument(IList<IFormFile> UploadFiles) // Here is need to another parameter named clientId 

        {

            try

            {

                IFormFile uploadedImage = UploadFiles.FirstOrDefault();

                byte[] b;

                using (BinaryReader br = new BinaryReader(uploadedImage.OpenReadStream()))

                {

                    b = br.ReadBytes((int)uploadedImage.OpenReadStream().Length);                    

                }

            }

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

        }

@using Syncfusion.EJ2

@{    

    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/Client/SaveClientDeviceDocument") };

}

<div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">

    <div class="modal fade" id="DeviceDocModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-xl" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">Cihaz Ölçüm Dosyası</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    </button>

                </div>

                <div class="modal-body">

                    <form id="uploadDeviceDocForm" data-ajax="true" data-ajax-method="post" class="m-form m-form--state">

                        <div class="kt-form__section kt-form__section--first">

                            <div class="form-group row">

                                <div class="col-lg-4">

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

                                </div>

                            </div>

                        </div>

                    </form>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                </div>

            </div>

        </div>

    </div>

    <div class="row">

        <div class="col-lg-12">

            <div class="kt-portlet" data-ktportlet="true" id="kt_portlet_1">

                <div class="kt-portlet__head">

                    <div class="kt-portlet__head-label">

                        <h3 class="kt-portlet__head-title">

                            Documents

                        </h3>

                    </div>

                    <div class="kt-portlet__head-toolbar">

                        <a id="UploadDeviceDoc" class="btn btn-brand btn-elevate">

                              Upload File

                        </a>

                    </div>

                </div>

                <div class="kt-portlet__body">

                    <div class="kt-portlet__content">

                        <div class="row">

                            <div class="col-lg-12">

                                <div id="DeviceGrid"></div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<ejs-scripts></ejs-scripts>

<script>

    $(document).ready(function () {

        var grid = new ej.grids.Grid({

            columns: [

                { field: 'Id', headerText: 'Ölçüm No', isPrimaryKey: true, type: 'number' },

                { field: 'CreatedAt', headerText: 'Tarih', type: 'date', format: 'dd.MM.yyyy' },

            ]

        });

        grid.appendTo('#DeviceGrid');

    });

    $(function () {

        $("#UploadDeviceDoc").click(function (e) {

            e.preventDefault();

            debugger;

            var clientId = document.getElementById("ClientId").innerHTML;

            KTApp.block('#GeneralContent', {

                overlayColor: '#000000',

                type: 'v2',

                state: 'primary',

                message: 'Yükleniyor...'

            });

            $("#DeviceDocModal").modal('show');

            setTimeout(function () {

                KTApp.unblock('#GeneralContent');

            }, 500);

        });

    });

</script>

[Berly Christopher]

Hi Tümer, 

  

Greetings from Syncfusion support. 

  

We can send the additional parameter to the Uploader in the uploading event as mentioned in the below documentation. 

  

UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/uploader/how-to/add-additional-data-on-upload/  

  

Regards, 

Berly B.C