How to Preview uploaded image using telerik RadAsyncUpload and RadBinaryImage in ASP Update Panel?

Question

I have a web form in asp.net contains a RadAsyncfileupload and a RadBinaryImage inside an Asp Update Panel like following

<body>
    <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>

    <asp:UpdatePanel runat="server">

<ContentTemplate>

    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server">
    </telerik:RadAsyncUpload>
    <telerik:RadBinaryImage ID ="RadBinaryImage1" runat ="server" Width= "100px" Height="100px"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>

in code behind

  protected void RadAsyncUpload1_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
        {
            if (RadAsyncUpload1.UploadedFiles.Count == 1)
            {
                byte[] image;
                long fileLength = RadAsyncUpload1.UploadedFiles[0].InputStream.Length;
                image = new byte[fileLength];
                RadAsyncUpload1.UploadedFiles[0].InputStream.Read(image, 0, image.Length);
                RadBinaryImage1.DataValue = image;

            }

        }

but in runtime program controller does not fire RadAsyncUpload1_FileUploaded event I have searched the Telerik forum and found that I should do something to script manager but I need some help on how to do it the reason is that in order to fire this event whole page should post back anyway some scripts can help me or any other ways! mention that I need byte array of the image to save it in DB. Thanks in advance Saeed Soleimanifar

no one answered this today is Nov 20! it's 5 days past i have posted this question and no one helped me i'm feeling so lonely.. — saeed
– saeed, Commented Nov 20, 2012 at 14:09

Syed Umar Ahmed · Accepted Answer · 2013-01-02 06:35:52Z

5

http://demos.telerik.com/aspnet-ajax/asyncupload/examples/persistuploadedfiles/defaultvb.aspx?#qsf-demo-source

I just added the same functionality by using this , if you find any problem let me know... OR Here is the part that does the magic

Page Source :

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

    <script type="text/javascript">


        function updatePictureAndInfo() {

            __doPostBack('btnImgUpload', 'RadButton1Args');

        }

    </script>

</telerik:RadScriptBlock>

<telerik:RadBinaryImage runat="server" ID="imgBinaryPhoto" ImageUrl="~/Images/default-profile-pic.png"
                Width="100px" Height="100px" ResizeMode="Fit" AlternateText="No picture available"
                CssClass="preview"></telerik:RadBinaryImage>
            <br />
            <telerik:RadAsyncUpload ID="upldPhoto" runat="server" AllowedFileExtensions=".jpg,.png,.gif,jpeg,.tiff"
               MaxFileInputsCount="1" MultipleFileSelection="Disabled">
            </telerik:RadAsyncUpload>
            <asp:Button ID="btnImgUpload" runat="server" Text="Upload" CssClass="button" OnClientClick="updatePictureAndInfo(); return false;" />

Code Behind:

Protected Sub FileUploaded() Handles upldPhoto.FileUploaded

        Dim bitmapImage As Bitmap = ResizeImage(upldPhoto.UploadedFiles(0).InputStream)
        Dim stream As System.IO.MemoryStream = New System.IO.MemoryStream()
        bitmapImage.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp)
        imgBinaryPhoto.DataValue = stream.ToArray()

    End Sub

edited Jan 2, 2013 at 6:35

answered Jan 2, 2013 at 5:52

Syed Umar Ahmed

6,0221 gold badge23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

saeed Over a year ago

Thanks for you attention it took me several hours and i understood that i should do this: <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <script type="text/javascript"> // on upload button click temporarily disables ajax to perform // upload actions function conditionalPostback(sender, args) { if (args.get_eventTarget() == "<%= CmdDoneNews.UniqueID %>") { args.set_enableAjax(false); } } </script> </telerik:RadScriptBlock>

saeed Over a year ago

i have solved this a month ago if you think this is a useful question for other please vote it up , Thanks

Collectives™ on Stack Overflow

How to Preview uploaded image using telerik RadAsyncUpload and RadBinaryImage in ASP Update Panel?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related