inlineformtemplate - grid - image upload

[Pratheep]

Hi

1-   inlineformtemplate - it's possible upload image  when Add  records to grid(code behind) ,without using - ashx

2 -  inlineformtemplate - saveFiles.ashx upload image not working 

Thanks

Pratheep

  

Attachment: Inline_Editing_e8b2d31f.rar

[Seeni Sakthi Kumar Seeni Raj]

Hi Pratheep,

Before proceeding with your query, we request you to provide the following information which will be helpful to analyze the issue and provide you the solution as soon as possible.

Would you like to upload and send the file along with the Grid records while sending the post for saving the Grid content in the Server-side?

Regards,
Seeni Sakthi Kumar S.

[Pratheep]

Hi

Thanks for guide, 

I need to upload customer  image ( contact person - image) with customer records ( customer records only showing in grid - no need to show customer image in grid but upload in server ) 

Thanks 

Pratheep

Attachment: imageupload_8f86b6af.rar

[Seeni Sakthi Kumar Seeni Raj]

Hi Pratheep,

We have used a  form element to save the image/file along with the Grid records. ejDataMangers should works with the json objects and not with other type of objects. So we send a ajax post of a form element to achieve this requirement. Please refer to the below code example.

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">

        <ClientSideEvents ActionComplete="complete" ActionBegin="begin" />

        <Columns>

            <ej:Column Field="EmployeeID" TextAlign="Right" />

        </Columns>

        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"

            EditMode="inlineformtemplate" InlineFormTemplateID="#CustomerForm"></EditSettings>

        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

    </ej:Grid>

    <script type="text/template" id="CustomerForm">

        <b>Order Details</b>

        <table cellspacing="10">

            <tr>

                <td style="text-align: right;">Employee ID

                </td>

                <td style="text-align: left">

                    <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" class="e-field e-ejinputtext valid" />

                </td>

            </tr>

            <tr>

                <td style="text-align: right">Picture

                </td>

                <td style="text-align: left">

                    <div id="UploadInput"></div>

                    <p id="par"></p>

                </td>

            </tr>

        </table>

    </script>

    <script>

        function begin(args) {

            if (args.requestType == "save") {

                args.cancel = true;

                //Updating the file as one of the column data

                args.data["Photo"] = window.uploadData.files;

                window.uploadData["editData"] = new FormData();

                //Converting the grid data to form data to send files to controller

                for (var d in args.data)

                    uploadData.editData.append(d, args.data[d]); //Updating the form before sending the ajax post.

                proxy = this;

                $.ajax({

                    url: window.uploadData.url,

                    type: 'POST',

                    data: window.uploadData.editData,

                    success: function () {

                        proxy.refreshContent();

                    }

                });

                //Canceling the request

                args.cancel = true;

            }

        }

        function complete(args) {

            if (args.requestType == "beginedit" || args.requestType == "add") {

                window.uploadData = {};//A Global var to track and hold file uploading info

                window.uploadData.url = args.requestType == "add" ? "/Default.aspx/PerformInsert" : "/Default.aspx/PerformUpdate";

                //Render upload control

                $("#UploadInput").ejUploadbox({

                    asyncUpload: false,

                    multipleFilesSelection: false,

                    buttonText: { browse: "Select Photo" },

                    fileSelect: function (args) {

                        //Get the file from fileSelect event

                        uploadData["files"] = args[0].rawFile; //inially copying the file to global variable and same can be retrieved in the save action.

                        var filename = args[0].name;

                        $("#par").html(filename);

                    }

                });

            }

        }

    </script>

[codeBehind]

        [WebMethod]

        public void PerformInsert(EmployeeInsertModel employee)

        {

            NorthwindDataContext db = new NorthwindDataContext();

            db.EmployeePhotos.InsertOnSubmit(new EmployeePhoto()

            {

                EmployeeID = employee.EmployeeID,

                Photo = employee.Photo != null ? GetByteStream(employee.Photo) : null

            });

            db.SubmitChanges();

        }

        //Convert the posted file to byte[]

        public byte[] GetByteStream(HttpPostedFileBase file)

        {

            byte[] bt = new byte[file.InputStream.Length];

            MemoryStream ms = new MemoryStream();

            ms.Read(bt, 0, (int)file.InputStream.Length);

            return bt;

        }

        public class EmployeeInsertModel

        {

            public int EmployeeID { get; set; }

            public HttpPostedFileBase Photo { get; set; }

        }

        [WebMethod]

        public void PerformUpdate(EmployeeInsertModel employee)

        {

            NorthwindDataContext db = new NorthwindDataContext();

            EmployeePhoto emp = (EmployeePhoto)db.EmployeePhotos.Single(s => s.EmployeeID == employee.EmployeeID);

            emp.EmployeeID = employee.EmployeeID;

            emp.Photo = employee.Photo != null ? GetByteStream(employee.Photo) : null;

            db.SubmitChanges();

        }

Regards,
Seeni Sakthi Kumar S.

[Pratheep]

Hi

Thanks for guide, 

browser unable to browse (select)  the image  and  upload image to target folder (click save or edit button not fire)

please find the test project   

        [WebMethod]

        public void PerformInsert(EmployeeInsertModel employee)

        {

     

            uploadimage(employee.Photo);

        }

        private void uploadimage(HttpPostedFileBase photo)

        {

            string targetFolder = HttpContext.Current.Server.MapPath("uploadfiles");

            if (!Directory.Exists(targetFolder))

            {

                Directory.CreateDirectory(targetFolder);

            }

            if (photo != null && photo.ContentLength > 0)

            {

                var fileName = Path.GetFileName(photo.FileName);

                photo.SaveAs(Path.Combine(targetFolder, fileName));

            }

           

        }

  

        public class EmployeeInsertModel

        {

            public int EmployeeID { get; set; }

            public HttpPostedFileBase Photo { get; set; }

        }

        [WebMethod]

        public void PerformUpdate(EmployeeInsertModel employee)

        {

            uploadimage(employee.Photo);

        }

Thanks

Pratheep

Attachment: upload_141d5937.rar

[Seeni Sakthi Kumar Seeni Raj]

Hi Pratheep,

We have created a custom sample request for your requirement and created a new support incident under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,
Seeni Sakthi Kumar S.

[Pratheep]

Hi

ok, Thank you

Pratheep

[Seeni Sakthi Kumar Seeni Raj]

Hi Pratheep,

We will update you further updates of custom Sample in your new incident.

Regards,
Seeni Sakthi Kumar S.