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

Last Reply 6 months ago By pandeyism

Posted 6 months 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 6 months 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