PDF and Image Preview???

9 posts, 0 answers
  1. Joan
    Joan avatar
    29 posts
    Member since:
    Feb 2013

    Posted 19 Mar 2013 Link to this post

    Hello everyone!

    I have some doubts about how to upload and show a preview of a pdf and image, in the case of the image (jpg, png, etc) its not complicated, but I really dont have idea how could I preview a pdf file.
    My functionality is the folowing:

    In my aspx page the user can upload an image or a pdf (just one) and view the preview of the image or the pdf, then when I click save, I store the image and the pdf in my azure.
    Please if someone can help me or give me any clues how could I do this.
    Thanks in advance!!!!
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 21 Mar 2013 Link to this post

    Hi Joan,

    Previewing images has already been widely discussed here and there are a few good samples available for download after some the posts. However previewing pdf files is more tricky because to preview them you need additional browser plugins. Using Telerik Reporting you could display pdf file directly in the browser without other plugins. But it deepens how you imagine the previewing. Will it be like displaying a hyperlinks that opens pdf in a new window or something like a thumbnail preview or maybe iframe.

    Kind regards,
    Hristo Valyavicharski
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joan
    Joan avatar
    29 posts
    Member since:
    Feb 2013

    Posted 24 Apr 2013 Link to this post

    It is like preview a thumbail, could be a pdf or an image. How could I do that? Thanks!
  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 29 Apr 2013 Link to this post

    Hi Joan,

    This scenario is not currently supported. However you could display uploaded pdf in iframe with smaller size like thumbnail image. Note that this will use browser's pdf plugin.

    For your reference I'm attaching small sample showing how to achieve that functionality.

    Kind regards,
    Hristo Valyavicharski
    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.
  6. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 28 Jul 2014 in reply to Hristo Valyavicharski Link to this post

    Do you have an example to display the pdf file in a new browser window?
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Jul 2014 in reply to miksh Link to this post

    Hi miksh,

    Please do the following modification in the above posted code to achieve your scenario.

    C#:
    protected void rbSubmit_Click(object sender, EventArgs e)
    {
        Session["file"] = RadAsyncUpload1.UploadedFiles[0].FileName;
        Response.Write(string.Format("<script>window.open('{0}','_blank');</script>", "Preview.aspx"));
    }

    Thanks,
    Shinu.
  8. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 29 Jul 2014 in reply to Shinu Link to this post

    That works, thanks.
    How to do the same if all controls are within RadAjaxPanel?
  9. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 29 Jul 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Btw, you solution with window.open causes "popup blocked" 
  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Jul 2014 in reply to miksh Link to this post

    Hi miksh,

    Please try the below code snippet which works fine at my end.

    ASPX:
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" TargetFolder="Uploads"
            AllowedFileExtensions="pdf" MultipleFileSelection="Disabled">
        </telerik:RadAsyncUpload>
        <telerik:RadButton ID="rbSubmit" runat="server" Text="Submit" OnClick="rbSubmit_Click">
        </telerik:RadButton>
    </telerik:RadAjaxPanel>

    C#:
    protected void rbSubmit_Click(object sender, EventArgs e)
    {
        Session["file"] = RadAsyncUpload1.UploadedFiles[0].FileName;
        string script = "function f(){showWindow(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
    }

    JavaScript:
    function showWindow() {
        var url = "Preview.aspx";
        window.open(url);
    }

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017