binaryimage-create-url-to-preview-image.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Create URL src with RadBinaryImage to easily preview uploaded images	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.	how-to	Create URL src with RadBinaryImage to easily preview uploaded images	binaryimage-create-url-to-preview-image			1566204	kb

Environment

Product

RadBinaryImage for ASP.NET AJAX

Description

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.

Solution

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.

Example

<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>
<script>
    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);

                $telerik.$("#preview-container").append($image);
            })

        }
        // Sys.Application.remove_load(pageLoadHandler);  
    }
    Sys.Application.add_load(pageLoadHandler);
</script>
<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
{
    get
    {
        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;
    binaryimage.DataBind();

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

    ImagesList.Add(newImage);
}

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

See Also

• RadBinaryImage online demo

• [RadBinaryImage documentation]({%slug binaryimage/overview %})

• [Preview uploaded image with RadAsyncUpload KB article]({%slug asyncupload-preview-uploaded-image %})