display image after upload

[Ted]

I am trying to get a simple AsyncUpload to show the image after it's uploaded to the temporary folder.  is there a way to do this and do you have any examples of this?
I am using the Q2 2010 version

I'm using this

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Thumbnail" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
 
    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingExamplePanel">
    </telerik:RadAjaxLoadingPanel>
    <span class="info"></span>
    <div class="imageContainer">        
        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" Skin="Forest" TargetFolder="~/images/Boats" 
            OnClientFileUploaded="fileUploaded" OnClientDeleting="clientDeleting"
            onfileuploaded="RadAsyncUpload1_FileUploaded1">
        </telerik:RadAsyncUpload>   

        <telerik:RadBinaryImage ID="Thumbnail" runat="server" />




and











 protected void RadAsyncUpload1_FileUploaded1(object sender, FileUploadedEventArgs e)
        {
            Stream fileStream = e.File.InputStream;           
            byte[] imageData = new byte[e.File.InputStream.Length];
            fileStream.Read(imageData, 0, (int)e.File.InputStream.Length);
            Thumbnail.DataValue = imageData;            
            fileStream.Close();
        }

[Yana]

Hi Ted,

Please check this online example which demonstrates similar approach.

All the best,
Yana
the Telerik team

[Ted]

I saw that demo and started with it.  my issue is instead of adding an image control or clearing it I want to update an existing image control.  And I don't want to use a database but simply show the file that is uploaded to the temp directory.

[Yana]

Hi Ted,

I've attached a simple page to demonstrate how to achieve the needed approach, please download it and give it a try.

All the best,
Yana
the Telerik team

[Fit2Page]

Thank you yana this works very good.
Could you look how to integrate a AjaxLoadingpanel into this example.
I can't get this right to work...

Marc

[Boyan Dimitrov]

Hello,

Please try the following approach:

//markup code

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Thumbnail" LoadingPanelID="LoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Width="256px" Height="64px" MinDisplayTime="2000">
    <asp:Label ID="Label2" runat="server" ForeColor="Red">Loading... </asp:Label>
</telerik:RadAjaxLoadingPanel>
<span class="info"></span>
<div class="imageContainer">
    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" TargetFolder="~/images/Boats"
        OnClientFileUploaded="flieUploaded">
    </telerik:RadAsyncUpload>

    <telerik:RadBinaryImage ID="Thumbnail" runat="server" />
</div>

Regards,
Boyan Dimitrov
Telerik