PDF and Image Preview???

[Joan]

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!!!!

[Hristo Valyavicharski]

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

[Joan]

It is like preview a thumbail, could be a pdf or an image. How could I do that? Thanks!

[Hristo Valyavicharski]

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

[miksh]

Do you have an example to display the pdf file in a new browser window?

[Shinu]

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.

[miksh]

That works, thanks.
How to do the same if all controls are within RadAjaxPanel?

[miksh]

Hi Shinu,

Btw, you solution with window.open causes "popup blocked" 

[Shinu]

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.