How to show preview on selection of image

Thread is closed for posting
4 posts, 0 answers
  1. Puru
    Puru avatar
    17 posts
    Member since:
    Aug 2012

    Posted 07 Nov 2012 Link to this post

    I want to show the selected image as the preview, i have used below code but it is not working and tools.
    i am using Visual Studio 2010 Premium,

    <telerik:RadUpload ID="RadUpload1" runat="server" OnClientFileSelected="OnClientFileSelected" AllowedFileExtensions=".bmp,.jpeg,.jpg,.gif"  MaxFileSize="100000000"/>

    <asp:Image id = "imgTheme"   runat="server" ClientIdMode = "Static"/>

    <script type = "test/javascript">
    function OnClientFileSelected(sender, args){
    var image = document.getElementById("imgTheme");
    image.src = args.get_fileInputField().value;

    in java script i am able to get the image, i have shaw the image control in the alert. But when i saw image source in the alert it show the path "C:\\fakePath\imagefileName", and i am not uploading the image from the c drive.

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Nov 2012 Link to this post

    Hi Puru,

    Try the following code snippet to achieve your scenario.

    <telerik:radupload id="RadUpload1" targetfolder="~/uploads/" allowedfileextensions=".jpg,.jpeg,.gif,.png" onclientfileselected="OnClientFileSelectedHandler" runat="server"></telerik:radupload>
    <asp:Image ID="Image1" runat="server" Height="56px" Style="visibility: hidden" Width="236px" />

    <script type="text/javascript">
     function OnClientFileSelectedHandler(sender, eventArgs) {
           var input = eventArgs.get_fileInputField();
           //check the extension   
           if (sender.isExtensionValid(input.value)) {
               var img = document.getElementById('<%= Image1.ClientID %>');
               if (img) {
          = "";
                   img.src = input.value;

    The code above will work correctly on IE browser only, since in Firefox the input.value returns the filename instead of the full path to the file.When using RadUpload such behavior is highly restricted for security reasons as it is explained in this article so you can consider using RadAsyncUpload as it is shown in this on-line demo.

    Hope this helps.

  3. DevCraft R3 2016 release webinar banner
  4. Puru
    Puru avatar
    17 posts
    Member since:
    Aug 2012

    Posted 12 Nov 2012 Link to this post

    Hi Princy,

    Thanks for your response. I Have tried as you have suggested but it did not worked for me. If i alert the image.src then it shows "file://C://FakePath//ImageName.png". Your second option is complicated so i just want to user RadUpload. 

    Even i have no issue to save the image  at temporary location, but i did not find any event of radupload to do it. Please suggest me if you have any idea.

  5. Plamen
    Plamen avatar
    2723 posts

    Posted 14 Nov 2012 Link to this post

    Hello Puru,

    I am attaching a sample web page that implements preview of the selected file after it selection with RadUpload. 

    Hope this will be helpful.

    Kind regards,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top