Save AjaxFileUpload file in folder and path in Database in ASP.Net

Last Reply one year ago By pandeyism

Posted one year ago

How to use ajax file upload and store image in folder, store image path in database

I want show a preview of an image. Also it is uploaded when user click a submit button.

Posted one year ago

Hi eswardatta,

Please refer below sample.

HTML

<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>
<asp:AjaxFileUpload ID="AjaxFileUpload11" runat="server" MaximumNumberOfFiles="5"
    Width="400px" OnUploadComplete="OnUploadComplete" />
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Image Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:ImageField DataImageUrlField="Path" HeaderText="Image" ControlStyle-Width="50px"
            ControlStyle-Height="50px" />
    </Columns>
</asp:GridView>

Namespaces

C#

using System.IO;
using AjaxControlToolkit;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

VB.Net

Imports System.IO
Imports AjaxControlToolkit
Imports System.Data.SqlClient
Imports System.Data

Code

C#

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

private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM tblFilesPath", conn))
        {
            DataTable dt = new DataTable();
            sda.Fill(dt);
            gvImages.DataSource = dt;
            gvImages.DataBind();
        }
    }
}

protected void OnUploadComplete(object sender, AjaxFileUploadEventArgs e)
{
    string fileName = Path.GetFileName(e.FileName);
    string filePath = "~/Uploads/" + fileName;
    AjaxFileUpload11.SaveAs(Server.MapPath("~/Uploads/" + fileName));
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO tblFilesPath VALUES(@Name, @Path) ", con))
        {
            cmd.Parameters.AddWithValue("@Name", fileName);
            cmd.Parameters.AddWithValue("@Path", filePath);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
    this.BindGrid();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGrid()
    End If
End Sub

Private Sub BindGrid()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using conn As SqlConnection = New SqlConnection(constr)
        Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT * FROM tblFilesPath", conn)
            Dim dt As DataTable = New DataTable()
            sda.Fill(dt)
            gvImages.DataSource = dt
            gvImages.DataBind()
        End Using
    End Using
End Sub
Protected Sub OnUploadComplete(sender As Object, e As AjaxFileUploadEventArgs)
    Dim fileName As String = Path.GetFileName(e.FileName)
    AjaxFileUpload11.SaveAs(Server.MapPath(Convert.ToString("~/Uploads/") & fileName))
    Dim filePath As String = "~/Uploads/" & fileName
    AjaxFileUpload11.SaveAs(Server.MapPath("~/Uploads/" & fileName))
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("INSERT INTO tblFilesPath VALUES(@Name, @Path) ", con)
            cmd.Parameters.AddWithValue("@Name", fileName)
            cmd.Parameters.AddWithValue("@Path", filePath)
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
    Me.BindGrid()
End Sub

Screenshot