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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript">
        function ShowPopup(title, body) {
            $("#MyPopup .modal-title").html(title);
            $("#MyPopup .modal-body").html(body);
            $("#MyPopup").modal("show");
        }
        $(function () {
            $("#fuOpen").change(function () {
                $("#dvPreview").html("");
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.pdf)$/;
                if (regex.test($(this).val().toLowerCase())) {
                    if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                        $("#dvPreview").show();
                        $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
                    }
                    else {
                        if (typeof (FileReader) != "undefined") {
                            $("#dvPreview").show();
                            $("#dvPreview").append("<iframe />");
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $("#dvPreview iframe").attr("src", e.target.result);
                            }
                            reader.readAsDataURL($(this)[0].files[0]);
                        } else {
                            alert("This browser does not support FileReader.");
                        }
                    }
                } else {
                    alert("Please upload a valid pdf file.");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:FileUpload runat="server" ID="fuOpen" />
    <br />
    <b>Live Preview</b>
    <br />
    <br />
    <div id="dvPreview">
    </div>
    <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">
                        &times;</button>
                    <h4 class="modal-title">
                    </h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
    <div>
    </div>
    </form>
</body>
</html>

Code

C#

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 = \"http://get.adobe.com/reader/\">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);
}

VB.Net

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 = ""http://get.adobe.com/reader/"">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

Screenshot