ASP.NET C# Uploading the file using modal popup by Twitter Bootstrap 3.0

Question

Hello I am making use of bootstrap's popup modal for user to upload the image. This is how it looks like..

How does it works is user have to click the button for the modal popup to appear. After that, user will have to click upload image and the picture preview will appear.

Like this..

The problem is that once the user have chosen the file after clicking file upload button, the page refreshes itself. Thus, forcing the user to click the button again for the modal to popup. Fortunately, the preview picture appears after the user have clicked the button.

Here is the source code test.aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="fileuploadpreview.test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="//code.jquery.com/jquery.js"></script>



<script language="javascript" type="text/javascript">

    function UploadFileNow() {

        var value = $("#FileUpload2").val();

        if (value != '') {

            $("#form1").submit();

        }

    };
</script>

    <div>

        <h2>Upload file without Submit button</h2>

        <asp:Button ID="btn_test" runat="server" Text="Test" data-target="#myModal" data-toggle="modal" CssClass="btn btn-primary" />



        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
            <asp:Label ID="lblMessage" runat="server" ForeColor="Green" />

                Select file and upload will start automatically

                <h5>Change Profile Picture</h5>             


                <asp:FileUpload ID="FileUpload2" runat="server" ClientIDMode="Static" onchange="UploadFileNow()"/>

                <br />
                <br />

                <asp:Label ID="lbl_profilepicturePreview" runat="server" Text="The preview of your updated profile picture: "></asp:Label>
                <asp:Image ID="img" runat="server" />
                <br />
                <asp:Label ID="lbl_profilepicture" runat="server"></asp:Label>
                <br />

            </div>
            <div class="modal-footer">
                <asp:Button ID="btn_profilepicturesubmit" runat="server" CssClass="btn btn-primary" Text="Save Profile Picture" />                   
            </div>
        </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    </div>

</asp:Content>

Next test.aspx.cs:

using System.IO;
using SD = System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System;
using System.Web;

namespace fileuploadpreview
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack && FileUpload2.PostedFile != null)
            {

                if (FileUpload2.PostedFile.FileName.Length > 0)
                {

                    Session["Image"] = FileUpload2.PostedFile;
                    Stream fs = FileUpload2.PostedFile.InputStream;
                    BinaryReader br = new BinaryReader(fs);
                    byte[] bytes = br.ReadBytes((Int32)fs.Length);
                    string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
                    img.ImageUrl = "data:image/png;base64," + base64String;

                }

            }
        }
    }
} 

Answer 1

Hmm try adding this into your page

  <script>
   $('#FileUpload2').click(function(event){
    event.preventDefault()});
  </script>