Radbinary not showing after select image using radasyncuplload

11 posts, 0 answers
  1. Henk
    Henk avatar
    113 posts
    Member since:
    Apr 2006

    Posted 20 Aug 2014 Link to this post

    Hi,

    I have the following challenge ;-), I have a radgrid and editing using Editform  I have a radbinary image and radasyncupload in the editform. I am able to store the image in the data base after the "update command". But after selecting I only see the filename but not the selected image.  it is NOT user friendly NOT showing the selected image when clicking on the radasyncupload. Question is how to display the selected value in the radbinary image  using asyncupload.in the edit template.

    Thanks,

    Henk
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Aug 2014 in reply to Henk Link to this post

    Hi Henk,

    Please have a look into this online demo which demonstrates the working of RadAsyncUpload and RadBinaryImage in RadGrid.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henk
    Henk avatar
    113 posts
    Member since:
    Apr 2006

    Posted 22 Aug 2014 in reply to Shinu Link to this post

    Hi Shinu,

    I used exactly the same method as your example! But in that demo the image is NOT shown in the editform mode and only the uploaded filename is shown in edit mode and afer the update the image is refresh. As written in the post, I am able to change the image after the update but I want the image displayed in edit mode after I select the image.and BEFORE clicking on the update button!
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Aug 2014 in reply to Henk Link to this post

    Hi Henk,

    Please try the below sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnClientFileUploaded="callAjaxRequest"
        OnFileUploaded="RadAsyncUpload1_FileUploaded" TargetFolder="Uploads/">
    </telerik:RadAsyncUpload>
    <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" />

    JavaScript:
    function callAjaxRequest(sender, rags) {
        __doPostBack();
    }

    C#:
    protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
    {
        RadBinaryImage1.ImageUrl = "Uploads/" + e.File.FileName;
    }

    Thanks,
    Shinu.
  6. Henk
    Henk avatar
    113 posts
    Member since:
    Apr 2006

    Posted 25 Aug 2014 in reply to Shinu Link to this post

    HI Shinu,

    It does not work. I think you are missing my point or i am not clear enough...

    In my radgrid scenario I dont have the image column like in the online demo. I have placed a radbinary in the editform template and radasyncupload. I want to see the image in the editform template after I select an image using the radasyncupload, i.e.when in "edit"mode. Afterwards I used this image to update in the database.

    Regards,

    Henk
  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 27 Aug 2014 Link to this post

    Hi Henk,

    The requirement that you have is a rather complex one and there are several problems that should be handled.

    The first problem is that once the image is uploaded, in order to set the data to the RadBinaryImage, a postback should occur and the server-side OnFileUploaded event must be handled, where the image can be retrieved. Although this is a simple task, once you set the DataValue of the RadBinaryImage and return back to the client, the image will be displayed, but if you try to update the item afterwords, the image will not be available.

    For your convenience, following is a simple example demonstrating how you could handle the above by wrapping the RadBinaryImage in a RadAjaxPanel and update only that control when an image is uploaded:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function fileUploaded(sender, args) {
                var trElement = $find("<%= RadGrid1.ClientID %>").get_editItems()[0].get_editFormItem();
                var ajaxPanel = $telerik.findControl(trElement, "RadAjaxPanel1");
                ajaxPanel.ajaxRequest();
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView AutoGenerateColumns="false">
            <Columns>
                <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
                            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" />
                        </telerik:RadAjaxPanel>
                        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnFileUploaded="RadAsyncUpload1_FileUploaded"
                            AllowedFileExtensions="png" OnClientFileUploaded="fileUploaded">
                        </telerik:RadAsyncUpload>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    And the code-behind:
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        for (int i = 0; i < 5; i++)
        {
            table.Rows.Add(i);
        }
     
        (sender as RadGrid).DataSource = table;
    }
     
    protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
    {
        RadAsyncUpload upload = sender as RadAsyncUpload;
        GridEditFormItem editItem = upload.NamingContainer as GridEditFormItem;
        byte[] buffer = new byte[e.File.ContentLength];
        using (Stream str = e.File.InputStream)
        {
            str.Read(buffer, 0, (int)e.File.ContentLength);
        }
     
        (editItem.FindControl("RadBinaryImage1") as RadBinaryImage).DataValue = buffer;
    }

    Hope this helps.
     

    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Henk
    Henk avatar
    113 posts
    Member since:
    Apr 2006

    Posted 29 Aug 2014 in reply to Konstantin Dikov Link to this post

    Thanks Constantin! It works :-)
  9. Henk
    Henk avatar
    113 posts
    Member since:
    Apr 2006

    Posted 03 Sep 2014 in reply to Konstantin Dikov Link to this post

    Hi Constantin,

    I notice that the radbinary image is filled and I can see the picture in edit mode (as I replied in my previous post). (the name of the radbinary image is ePasfoto)
    When updating I do a find control of the image and save the picture with a database procedure. But I notice that the datavalue is null...

    If Datavalue is null how can I access the content of the image?

    Regards,

    Henk
    update code

            protected void ResultaatGrid_UpdateCommand(object sender, GridCommandEventArgs e)
            {
                GridEditableItem editedItem = e.Item as GridEditableItem;

                string pCperID = editedItem.GetDataKeyValue("cpersoon_id").ToString();

                RadBinaryImage iMage = e.Item.FindControl("ePasfoto") as RadBinaryImage;
                try
                {
                    string pCperID = editItem.GetDataKeyValue("cpersoon_id").ToString();
                    using (EntitiesModel dbContext = new EntitiesModel())
                    {
                        string pResultaat = "";
                        string pSoort = "";
                        //dbContext.SAVEFOTO(long.Parse(pCperID), null, fileData, ref pResultaat);

                        dbContext.SAVEFOTO(long.Parse(pCperID), pSoort, iMage.DataValue, ref pResultaat);  <-- iMage.DataValue is null
                        if (pResultaat != null && pResultaat.IndexOf("ORA-") != -1)
                            form1.Controls.Add(new LiteralControl("Fout tijdens invoer van pasfoto" + " Reden: " + pResultaat));
                    }
                }
                catch (Exception exc)
                {
                }

            }
  10. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 03 Sep 2014 Link to this post

    Hello Henk,

    As you have correctly observed, the DataValue of the RadBinaryImage will be null and this is rather expected.

    However, for retrieving the binary data for the image you should use the RadAsyncUpload control and its OnFileUploaded event (as demonstrated in my previous post) or retrieve the uploaded file directly from the UploadedFiles collection of the RadAsyncUpload. The second approach is the same as in our online demo "Grid - Binary Images and RadAsyncUpload in Grid".

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Henk
    Henk avatar
    113 posts
    Member since:
    Apr 2006

    Posted 03 Sep 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin,


    It is a pity that it is not possible and yes, I can change the save to the upload event. The only drawback is  when the user click on cancel...

    Thanks

    Henk
  12. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 04 Sep 2014 Link to this post

    Hello Henk,

    You are correct that canceling the editing will cause problems with the approach where the OnFileUploaded event is handled. However, if you handle the OnUpdateCommand (as demonstrated in the demo mentioned in my previous post) you will update the image only on that command (or in the insert command as well if insert is enabled).

    Please let me know if everything works correctly with that approach.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017