Grid - inlineformtemplate - Upload -image

[Pratheep]

Its's possible Grid Upload picture in  inlineformtemplate?  ( imagepath  - showing fakepath) 

Design 

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

     <tr>

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

                </td>

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

              

                      <input type="file" id="myFile" name="myFile" />

                </td>

            </tr>

</script>

Code behind

  private void adddata(List<CustomersSerializable> data, Dictionary<string, object> KeyVal)

        {

                  if (keyval.Key == "myFile")

                {

                    string imagepath = Convert.ToString(keyval.Value);

                    string destinationFile = Server.MapPath(" ") + "\\crmflies\\contact\\image\\";

                    HttpPostedFile file = Request.Files["myFile"];

                 

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

                    {

                        string fname = Path.GetFileName(file.FileName);

                        file.SaveAs(Server.MapPath(Path.Combine(destinationFile, fname)));

                    }

                    

                }

        }

Thanks

Pratheep

[Balaji Marimuthu]

Hi Pratheep,

Thanks for contacting Syncfusion support.

Query: Its's possible Grid Upload picture in  inlineformtemplate? 

Yes, it’s possible to upload picture in Grid inlineformtemlate. We have created a sample based on your requirement and refer to the sample & code example as below.
Sample: Sample-uploadbox

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

        <b>Order Details</b>

        <table cellspacing="10">

           

            . . .

            <tr>

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

                </td>

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

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

                </td>

            </tr>

        </table>
    </script>

In Grid ActionComplete event, we have rendered the uploadbox control and bind the corresponding action. Refer to the code example as below.

<div>

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

            <ClientSideEvents ActionComplete="complete" />

            <FilterSettings FilterType="Menu" />

            <Columns>

                <ej:Column Field="OrderID" IsPrimaryKey="True" TextAlign="Right" Width="90" />

                <ej:Column Field="CustomerID"  Width="100" />

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

            </Columns>

           <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineFormTemplate" InlineFormTemplateID="#CustomerForm"></EditSettings>

        </ej:Grid>
    </div>

function complete(args) {

            //render uploadbox control

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

                $('#UploadInput').ejUploadbox({

                    saveUrl: "saveFiles.ashx",

                });

            }
        }

We have uploaded the image file in uploadbox and saved the image in required file path.

public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            context.Response.Write("Hello World");

            string targetFolder = HttpContext.Current.Server.MapPath("") + "\\New folder\\";

            if (!Directory.Exists(targetFolder))

            {

                Directory.CreateDirectory(targetFolder);

            }

            HttpRequest request = context.Request;

            HttpFileCollection uploadedFiles = context.Request.Files;

            if (uploadedFiles != null && uploadedFiles.Count > 0)

            {

                for (int i = 0; i < uploadedFiles.Count; i++)

                {

                    string fileName = uploadedFiles[i].FileName;

                    int indx = fileName.LastIndexOf("\\");

                    if (indx > -1)

                    {

                        fileName = fileName.Substring(indx + 1);

                    }

                    uploadedFiles[i].SaveAs(targetFolder + "\\" + fileName);

                }

              

            }

           

        }

Refer to the Demo in following link.
UploadBox: http://asp.syncfusion.com/demos/web/uploadbox/events.aspx
InlineFormTemplate: http://asp.syncfusion.com/demos/web/grid/inlineformonlocaldata.aspx


If we misunderstood your requirement please share us more information which will be helpful to provide better solution at the earliest.

Regards,
Balaji Marimuthu

[Pratheep]

Hi

Thanks for you guide 

Upload control browse the image (not upload - only browse the image file ) and click  inlineformtemplate Save  button  only start the upload the image.

 It's possible? 

Design 

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

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

                </td>

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

                <ej:UploadBox ID="SyncUpload" runat="server" AsyncUpload="false"></ej:UploadBox>           

                </td>

            </tr>

    </script>

Code behind

 protected void EditAction(string eventType, object record)

        {

            if (eventType == "endAdd")

            {

                 if (keyval.Key == "SyncUpload")

                        {

                            UploadFile();

                        }

             }

         }

        private void UploadFile()

        {

     

            string targetFolder = HttpContext.Current.Server.MapPath(" "+ "\\image\\") ;

            if (!Directory.Exists(targetFolder))

            {

                Directory.CreateDirectory(targetFolder);

            }

            if (SyncUpload.HasFiles)

            {

                for (int i = 0; i < SyncUpload.PostedFiles.Count; i++)

                {

                    string fileName = SyncUpload.PostedFiles[i].FileName;

                    int indx = fileName.LastIndexOf("\\");

                    if (indx > -1)

                    {

                        fileName = fileName.Substring(indx + 1);

                    }

                   SyncUpload.PostedFiles[i].SaveAs(targetFolder + "\\" + fileName);

                    

                }

            }       

        }

Thanks

Pratheep

Attachment: Inline_Editing_e3ed6dcc.rar

[Prasanna Kumar Viswanathan]

Hi Pratheep,

Please confirm the following details. It will help us to provide the prompt solution

1.       Do you need to show the “Uploadbox”  after browsing the image file.  The default behavior of “uploadbox” is to show the image name in upload box dialog. Please find the screenshot.

            

2.       If we remove the upload box dialog then we cannot able to view the image name. So, do you need to show the image name in the edit form?

3.       Once you click the “Save” button you need to upload the image to destination path?

If this is not meet your requirement so please elaborate the requirement, it will be helpful to provide the better solution.

Regards,
Prasanna Kumar N.S.V

---

PR Pratheep October 30, 2015 04:36 PM UTC

Hi

Thanks for guide.

All 3  steps fine.   ( 3rd step   inlineformtemplate  Save  button  upload the image to destination path) 

Thanks

Pratheep

---

PK Prasanna Kumar Viswanathan Syncfusion Team November 2, 2015 11:17 AM UTC

Hi Pratheep,

Your requirement has been achieved by the actionBegin event of ejGrid.  This event triggers for every grid action before its starts. In this event, we check the condition with the requestType and upload the image file using xhrPerformUpload function.

We hide the upload dialog box by disabling the showFileDetails API of ejUploadBox and display the image name using the fileselect event of ejUploadBox. This event fires when the Upload process ends in Error and we can able to get the filename in the arguments, and display the file name.


Please find the following code example, screenshot and sample:

<div>

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

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

            <FilterSettings FilterType="Menu" />

            <Columns>

                <ej:Column Field="OrderID" IsPrimaryKey="True" TextAlign="Right" Width="90" />

                <ej:Column Field="CustomerID"  Width="100" />

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

            </Columns>

           <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineFormTemplate" InlineFormTemplateID="#CustomerForm"></EditSettings>

        </ej:Grid>
    </div>
----------------------------------------------------------------------------

<script>

        function complete(args) {

            //render uploadbox control

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

                $('#UploadInput').ejUploadbox({

                    saveUrl: "saveFiles.ashx",

                    showFileDetails: false,

                    fileSelect : "select",

                });

            }

        }

        function begin(args) {

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

                var upload = $('#UploadInput').ejUploadbox("instance");

                var wrapper = upload.diaObj.wrapper;

                var fileItem = wrapper.find(".e-ul li.e-upload-file");

                upload._xhrPerformUpload($(fileItem).data("file"));

            }

        }

        function select(args) {

            var filename = args[0].name;

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

        }

    </script>

Screenshot:



Sample: http://www.syncfusion.com/downloads/support/forum/120926/ze/Sample-uploadbox584136372_(2)-86569105

Refer to the Help documents for the actionBegin and fileSelect events,

actionBegin : http://help.syncfusion.com/js/api/ejgrid#events:actionbegin

fileSelect : http://help.syncfusion.com/js/api/ejuploadbox#events:fileselect

Regards,
Prasanna Kumar N.S.V

---

PR Pratheep November 2, 2015 02:33 PM UTC

Hi

Thanks for you guide 

browse image fine but when click save image upload not upload

please find the attachment 

Thanks

Pratheep

Attachment: uploadscreen_66988cb8.rar

---

PR Pratheep November 2, 2015 02:41 PM UTC

       Hi

Thanks for you guide 

browse image fine but when click save image upload not upload

please find the test project  attachment 

Thanks

Pratheep

Attachment: Inline_Editing_be0f305f.rar

---

PK Prasanna Kumar Viswanathan Syncfusion Team November 3, 2015 07:23 AM UTC

Hi Pratheep,

On analyzing your sample, we found that an improper URL has been mentioned in the SaveFiles.ashx.  So, please mention the proper URL in the SaveFiles.ashx file.


Please find the screenshot and modified sample:



Screenshot of an uploaded image :



Sample: http://www.syncfusion.com/downloads/support/forum/120926/ze/Inline_Editing-2107326925

Regards,
Prasanna Kumar N.S.V

[Pratheep]

Hi

Thanks for guide.

All 3  steps fine.   ( 3rd step   inlineformtemplate  Save  button  upload the image to destination path) 

Thanks

Pratheep

[Prasanna Kumar Viswanathan]

Hi Pratheep,

Your requirement has been achieved by the actionBegin event of ejGrid.  This event triggers for every grid action before its starts. In this event, we check the condition with the requestType and upload the image file using xhrPerformUpload function.

We hide the upload dialog box by disabling the showFileDetails API of ejUploadBox and display the image name using the fileselect event of ejUploadBox. This event fires when the Upload process ends in Error and we can able to get the filename in the arguments, and display the file name.


Please find the following code example, screenshot and sample:

<div>

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

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

            <FilterSettings FilterType="Menu" />

            <Columns>

                <ej:Column Field="OrderID" IsPrimaryKey="True" TextAlign="Right" Width="90" />

                <ej:Column Field="CustomerID"  Width="100" />

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

            </Columns>

           <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineFormTemplate" InlineFormTemplateID="#CustomerForm"></EditSettings>

        </ej:Grid>
    </div>
----------------------------------------------------------------------------

<script>

        function complete(args) {

            //render uploadbox control

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

                $('#UploadInput').ejUploadbox({

                    saveUrl: "saveFiles.ashx",

                    showFileDetails: false,

                    fileSelect : "select",

                });

            }

        }

        function begin(args) {

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

                var upload = $('#UploadInput').ejUploadbox("instance");

                var wrapper = upload.diaObj.wrapper;

                var fileItem = wrapper.find(".e-ul li.e-upload-file");

                upload._xhrPerformUpload($(fileItem).data("file"));

            }

        }

        function select(args) {

            var filename = args[0].name;

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

        }

    </script>

Screenshot:



Sample: http://www.syncfusion.com/downloads/support/forum/120926/ze/Sample-uploadbox584136372_(2)-86569105

Refer to the Help documents for the actionBegin and fileSelect events,

actionBegin : http://help.syncfusion.com/js/api/ejgrid#events:actionbegin

fileSelect : http://help.syncfusion.com/js/api/ejuploadbox#events:fileselect

Regards,
Prasanna Kumar N.S.V

[Pratheep]

Hi

Thanks for you guide 

browse image fine but when click save image upload not upload

please find the attachment 

Thanks

Pratheep

Attachment: uploadscreen_66988cb8.rar

[Pratheep]

       Hi

Thanks for you guide 

browse image fine but when click save image upload not upload

please find the test project  attachment 

Thanks

Pratheep

Attachment: Inline_Editing_be0f305f.rar

[Prasanna Kumar Viswanathan]

Hi Pratheep,

On analyzing your sample, we found that an improper URL has been mentioned in the SaveFiles.ashx.  So, please mention the proper URL in the SaveFiles.ashx file.


Please find the screenshot and modified sample:



Screenshot of an uploaded image :



Sample: http://www.syncfusion.com/downloads/support/forum/120926/ze/Inline_Editing-2107326925

Regards,
Prasanna Kumar N.S.V