This is a migrated thread and some comments may be shown as answers.

Radbinary not showing after select image using radasyncuplload

10 Answers 85 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Henk
Top achievements
Rank 1
Henk asked on 20 Aug 2014, 03:20 PM
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

10 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 21 Aug 2014, 06:52 AM
Hi Henk,

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

Thanks,
Shinu.
0
Henk
Top achievements
Rank 1
answered on 22 Aug 2014, 08:47 AM
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!
0
Shinu
Top achievements
Rank 1
answered on 22 Aug 2014, 11:36 AM
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.
0
Henk
Top achievements
Rank 1
answered on 25 Aug 2014, 01:36 PM
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
0
Konstantin Dikov
Telerik team
answered on 27 Aug 2014, 01:56 PM
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.

 
0
Henk
Top achievements
Rank 1
answered on 29 Aug 2014, 04:03 PM
Thanks Constantin! It works :-)
0
Henk
Top achievements
Rank 1
answered on 03 Sep 2014, 08:27 AM
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)
            {
            }

        }
0
Konstantin Dikov
Telerik team
answered on 03 Sep 2014, 01:37 PM
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.

 
0
Henk
Top achievements
Rank 1
answered on 03 Sep 2014, 02:21 PM
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
0
Konstantin Dikov
Telerik team
answered on 04 Sep 2014, 04:33 PM
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.

 
Tags
AsyncUpload
Asked by
Henk
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Henk
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or