Preview PDF before upload using FileUpload control and jQuery in ASP.Net

Last Reply 4 months ago By pandeyism

Posted 4 months ago

i used fileupload control as well we upload pdf it save into database but before save user can see preview of pdf 

Then i want to save pdf into foler and show popup of pdf when user click button view and pdf path store into database 

Posted 4 months ago

Hi SajidHussa,

Refer below sample.


<html xmlns="">
<head runat="server">
    <script type="text/javascript" src=''></script>
    <script type="text/javascript" src=''></script>
    <link rel="stylesheet" href=''
        media="screen" />
    <script type="text/javascript">
        function ShowPopup(title, body) {
            $("#MyPopup .modal-title").html(title);
            $("#MyPopup .modal-body").html(body);
        $(function () {
            $("#fuOpen").change(function () {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.pdf)$/;
                if (regex.test($(this).val().toLowerCase())) {
                    if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                        $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
                    else {
                        if (typeof (FileReader) != "undefined") {
                            $("#dvPreview").append("<iframe />");
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $("#dvPreview iframe").attr("src",;
                        } else {
                            alert("This browser does not support FileReader.");
                } else {
                    alert("Please upload a valid pdf file.");
    <form id="form1" runat="server">
    <asp:FileUpload runat="server" ID="fuOpen" />
    <br />
    <b>Live Preview</b>
    <br />
    <br />
    <div id="dvPreview">
    <br />
    <asp:Button Text="Upload" runat="server" ID="btnShow" OnClick="Upload" />
    <!-- Bootstrap -->
    <!-- Modal Popup -->
    <div id="MyPopup" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                    <h4 class="modal-title">
                <div class="modal-body">
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">



protected void Upload(object sender, EventArgs e)
    fuOpen.SaveAs(Server.MapPath("~/Files/" + fuOpen.FileName));
    string fileName = fuOpen.FileName;
    string embed = "<object data=\"{0}\" type=\"application/pdf\" width=\"500px\" height=\"300px\">";
    embed += "If you are unable to view file, you can download from <a href = \"{0}\">here</a>";
    embed += " or download <a target = \"_blank\" href = \"\">Adobe PDF Reader</a> to view the file.";
    embed += "</object>";
    string title = fileName;
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + title + "', '" + string.Format(embed, ResolveUrl(string.Format("~/Files/{0}", fileName))) + "');", true);


Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
    fuOpen.SaveAs(Server.MapPath("~/Files/" & fuOpen.FileName))
    Dim fileName As String = fuOpen.FileName
    Dim filePath As String = Server.MapPath("~/Files/" & fuOpen.FileName)
    Dim embed As String = "<object data=""{0}"" type=""application/pdf"" width=""500px"" height=""300px"">"
    embed += "If you are unable to view file, you can download from <a href = ""{0}"">here</a>"
    embed += " or download <a target = ""_blank"" href = """">Adobe PDF Reader</a> to view the file."
    embed += "</object>"
    Dim title As String = fileName
    ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopup('" & title & "', '" & String.Format(embed, ResolveUrl(String.Format("~/Files/{0}", fileName))) & "');", True)
End Sub