Show preview in gridview and fileupload is outside gridview

Last Reply on May 06, 2016 05:50 AM By power

Posted on May 05, 2016 01:44 AM

Hi, recently dharmendr gave me the solution shown below and it worked perfect, however, in this example the fileupload input is inside the gridview. Can you please tweak this example where the Fileupload is actually outside of the gridview. Thank you.

<div>
    <asp:GridView runat="server" AutoGenerateColumns="false" ID="gvPreview">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Id" />
            <asp:TemplateField HeaderText="Files">
                <ItemTemplate>
                    <input id="fileupload" type="file" onchange="SetPreview(this)" />
                    <asp:ImageButton ID="btnImage" runat="server" Height="100" Width="100" Style="display: none"
                        CssClass="ImageButton" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<div>
    <style type="text/css">
        .ImageButton
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            min-height: 30px;
            min-width: 30px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        function SetPreview(ele) {
            var btnImage = $(ele).closest('tr').find('[id*=btnImage]');
            $(btnImage).removeAttr("src");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            if (regex.test($(ele).val().toLowerCase())) {
                if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                    $(btnImage).show();
                    $(btnImage)[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(ele).val();
                }
                else {
                    if (typeof (FileReader) != "undefined") {
                        $(btnImage).show();
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $(btnImage).attr("src", e.target.result);
                        }
                        reader.readAsDataURL($(ele)[0].files[0]);
                    } else {
                        alert("This browser does not support FileReader.");
                    }
                }
            } else {
                alert("Please upload a valid image file.");
            }
        };
    </script>
</div>
 

 

Posted on May 06, 2016 03:48 AM Modified on on Sep 15, 2017 03:20 AM

Hi power,

Here i have created sample that full fill your requirement.

HTML

<div>
    <asp:GridView runat="server" AutoGenerateColumns="false" ID="gvPreview" AutoGenerateEditButton="true"
        OnRowEditing="gvPreview_RowEditing" DataKeyNames="Id">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Id" />
            <asp:TemplateField HeaderText="Files">
                <ItemTemplate>
                    <asp:ImageButton ID="btnImage" runat="server" Height="100" Width="100" Style="display: none"
                        CssClass="ImageButton" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:ImageButton ID="btnEditImage" runat="server" Height="100" Width="100" CssClass="ImageButton"
                        AlternateText="Save" />
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <br />
    <input id="fileupload" type="file" onchange="SetPreview()" />
</div>
<div>
    <style type="text/css">
        .ImageButton
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            min-height: 30px;
            min-width: 30px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        function SetPreview() {
            var btnImage = $("[id*=btnEditImage]")[0];
            $(btnImage).removeAttr("src");
            var ele = $('#fileupload');
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

            if (regex.test($(ele).val().toLowerCase())) {
                if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                    $(btnImage).show();
                    $(btnImage)[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(ele).val();
                }
                else {
                    if (typeof (FileReader) != "undefined") {
                        $(btnImage).show();
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $(btnImage).attr("src", e.target.result);
                        }
                        reader.readAsDataURL($(ele)[0].files[0]);
                    } else {
                        alert("This browser does not support FileReader.");
                    }
                }
            } else {
                alert("Please upload a valid image file.");
            }
        };
    </script>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindGrid();
    }
}

private void BindGrid()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[1] { new DataColumn("Id", typeof(int)) });
    dt.Rows.Add(1);
    dt.Rows.Add(2);
    dt.Rows.Add(3);
    dt.Rows.Add(4);
    gvPreview.DataSource = dt;
    gvPreview.DataBind();
}

protected void gvPreview_RowEditing(object sender, GridViewEditEventArgs e)
{
    gvPreview.EditIndex = e.NewEditIndex;
    BindGrid();
}

Screenshot