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

Last Reply one month ago By pandeyism

Posted one month 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 one month 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