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

enter image description here

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.. enter image description here

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;

                }

            }
        }
    }
}

Reza Shirazian · Accepted Answer · 2013-11-29 18:56:16Z

1

Hmm try adding this into your page

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

edited Nov 29, 2013 at 18:56

answered Nov 28, 2013 at 6:06

Reza Shirazian

2,3631 gold badge23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Minelava Over a year ago

Hi thanks it works fine. But how do I display the picture without refreshing the page?

Reza Shirazian Over a year ago

Do you know the url of the image after it has been uploaded? if so add $("#img").append("<img id='theImg' src='{the img src}'/>"); to UploadFileNow()

Minelava Over a year ago

Oh btw, when I add a curly bracket and the bracket, the code can't work. Like this $('#FileUpload2').click(function(event){ event.preventDefault()});

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related