New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Create URL src with RadBinaryImage to easily preview uploaded images


Product RadBinaryImage for ASP.NET AJAX


To preview an uploaded image or an image from the local filesystem, you would need to either make the image publicly accessible or create a custom handler or API/web service that will serve the image.


The RadBinaryImage can be used to pass an image file as a byte array, and then get the ImageUrl to a handler that will server the image. The RadBinaryImage does not need to be added to the page, but if it is hidden, the PersistDataIfNotVisible property should be set to true.


<asp:HiddenField ID="HiddenField1" runat="server" />
<telerik:RadButton runat="server" ID="RadButton1" Text="Submit uploaded files and preview them" AutoPostBack="true" />
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic" OnFileUploaded="RadAsyncUpload1_FileUploaded"></telerik:RadAsyncUpload>
    function pageLoadHandler() {
        var value = $get("<%= HiddenField1.ClientID %>").value;
        if (value) {
            var json = JSON.parse(value);

            json.forEach(function (item) {
                var $image = $telerik.$("<img />")
                    .attr("height", 100)
                    .attr("src", item.ImageSrc)
                    .attr("alt", item.ImageName);


        // Sys.Application.remove_load(pageLoadHandler);  
<div id="preview-container"></div>
protected void Page_PreRender(object sender, EventArgs e)
    var serializer = new AdvancedJavaScriptSerializer();
    HiddenField1.Value = serializer.Serialize(ImagesList);

public string ImagesListSessionKey = "ImageListSessionKey";
public List<ImageItem> ImagesList
        if (Session[ImagesListSessionKey] as List<ImageItem> == null)
            Session[ImagesListSessionKey] = new List<ImageItem>();

        return Session[ImagesListSessionKey] as List<ImageItem>;

protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
    BinaryReader reader = new BinaryReader(e.File.InputStream);
    Byte[] data = reader.ReadBytes((int)e.File.InputStream.Length);
    ImageItem newImage = new ImageItem();

    var binaryimage = new RadBinaryImage();
    binaryimage.DataValue = data;
    binaryimage.Visible = false;
    binaryimage.PersistDataIfNotVisible = true;

    newImage.ImageName = e.File.FileName;
    newImage.ImageSrc = binaryimage.ResolveClientUrl(binaryimage.ImageUrl);


public class ImageItem
    public string ImageName { get; set; }
    public string ImageSrc { get; set; }

See Also

In this article