locked
Ajax file Upload RRS feed

  • Question

  • User669521406 posted

    is there any example of ajax file uploader with database please

    Friday, December 27, 2013 3:10 AM

All replies

  • User-1509636757 posted

    Please check out below sample code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxfileupload.aspx.cs" Inherits="ajaxfileupload" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <div>
        <asp:Label runat="server" ID="myThrobber" Style="display: none;"><img align="absmiddle" alt="" src="images/uploading.gif"/></asp:Label>
            <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
                onuploadcomplete="AjaxFileUpload1_UploadComplete" ThrobberID="myThrobber" MaximumNumberOfFiles="10" AllowedFileTypes="jpg,jpeg"/>
        </div>
        </form>
    </body>
    </html>
    public partial class ajaxfileupload : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
        protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
        {
            string filePath = "~/upload/" + e.FileName;
            AjaxFileUpload1.SaveAs(filePath);
            //-- Write the code here which will store file or filepath whatever you wish to databse table.
    
        }
    }

    Reference links:

    hope it helps./.

    Friday, December 27, 2013 3:47 AM
  • User669521406 posted

    yeah it help thank but i have a table in my database where i need to store the url of the image but if it is multiple image how would i save it please? that what i'm looking for, if you could help willl be great

    Friday, December 27, 2013 3:52 AM
  • User-1509636757 posted

    if it is multiple image

    In that case; below OnUploadComplete event will be called for each uploaded image and  you can write code to store the url (e.filename along with  your upload path) of the image to db in this event:

    protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
        {
            string filePath = "~/upload/" + e.FileName;
            AjaxFileUpload1.SaveAs(filePath);
            //-- Write the code here which will store file or filepath whatever you wish to databse table.
    
        }
    Friday, December 27, 2013 4:09 AM
  • User669521406 posted

    i can't put the code in the onuploadcomplete because i already have a submit button that when all the images that have been upload has finished upload and that the user has enter all values then he/she click on the button and everything goes in the database 

    Here is an extra of my code 

    Protected Sub btnsubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnsubmit.Click
    
     Dim s As Integer = DropDownList1.SelectedValue
                Dim available As String = "Available"
                Using conss As New SqlConnection(_start)
                    Dim sql1 As String = "INSERT INTO Item (Name,Description,Quantity,Image1,SellerID,CategoryID,DateCreated,Price,Status) VALUES(@Name,@Description,@Quantity,@Image1,@seller,@cat,@Date,@price,@stat)"
                    Dim myCommand1 = New SqlCommand(sql1, conss)
    
                    conss.Open()
                    myCommand1.Parameters.AddWithValue("@Name", TextBox1.Text)
                    myCommand1.Parameters.AddWithValue("@Description", TextBox6.Text)
                    myCommand1.Parameters.AddWithValue("@Quantity", TextBox3.Text)
                    myCommand1.Parameters.AddWithValue("@Image1", filepath)
    
                    myCommand1.Parameters.AddWithValue("@seller", temp)
                    myCommand1.Parameters.AddWithValue("@cat", s)
                    myCommand1.Parameters.AddWithValue("@Date", finaldate)
                    myCommand1.Parameters.AddWithValue("@price", TextBox2.Text)
                    myCommand1.Parameters.AddWithValue("@stat", available)
                    myCommand1.ExecuteNonQuery()
    End
    
        Protected Sub AjaxFileUpload1_UploadComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AjaxFileUploadEventArgs) Handles AjaxFileUpload1.UploadComplete
            Dim filePath As String = "~/Seller/images/" & Convert.ToString(e.FileName)
            AjaxFileUpload1.SaveAs(filePath)

    what i mean is that i want the upload to upload the image and wait for me to presh the button submit then save it in the database

    Friday, December 27, 2013 4:38 AM
  • User555306248 posted

    Refer this - http://forums.asp.net/t/1896095.aspx

    Sunday, December 29, 2013 10:30 PM
  • User-933407369 posted

    hi Jdaniel13 ,

    According to your description, AjaxFileUpload1.SaveAs(filePath) can store the images to "Seller/images", so you get images from "Seller/images" path.

    i would suggest you to add the code under btnsubmit_Click event.

       Dim fullpath As String
                fullpath = Server.MapPath("images")
                Dim FileDirectory As New IO.DirectoryInfo(fullpath)
                Dim FileJpg As IO.FileInfo() = FileDirectory.GetFiles("*.jpg")
                For Each File As IO.FileInfo In FileJpg
                    Dim strfullname = File.FullName
                    Dim strfilename = File.Name
                    Dim strDirectory = File.Directory
                    'execute your function , insert the path to database
                    '.....
                Next 
    FileDirectory.Delete() ' after the data inserted, clear the current Directory

     if you use the codes above, you need to create a new folder or clear the current iamges . in case of repeating  to insert data.
    Hope it helps you.

    Tuesday, December 31, 2013 1:24 AM
  • User669521406 posted

    if i have more than one  images for a particular item and in my database i have 2 field for image, how would i save the next image in the second field?

    Tuesday, December 31, 2013 1:30 AM
  • User-1509636757 posted

    Instead of having two fileds for image, I would recommend to normalize the table and create a separate table for storing image urls. Because, possible in future you might need to add more images for one item; at that time maintainability will be easy this way.

    Tuesday, December 31, 2013 1:39 AM
  • User669521406 posted

    Oh ok, then i have a table only for images, how i'm goanna do, to save multipe picture for one particular item for example, if i''m creating a product and i have 4 image that i have been uploaded

    Tuesday, December 31, 2013 1:44 AM
  • User-1509636757 posted

    If you can share, what approach you have finally taken to save the images in your application. Have  you used any jQuery multi fileuploader type code/plugin or you are using AjaxFileUpload from toolkit. Which ever, you might have written code to save the image to application folder, at that same place you can write code to save the file in separate image table and call that code for each image.

    hope it helps./.

    Tuesday, December 31, 2013 1:48 AM
  • User-227760790 posted

    if your images is related to user or other unique object, you can create two images path to store them, the two images path is consistent with the two fields of table.

    For example,

    if fields are Field1 and Field2, then the imags path are Images/Field1  and Images/Field2

    when you upload the images, you can upload them to the consistent path and get the iamges from the paths.

    Tuesday, December 31, 2013 1:51 AM
  • User669521406 posted

    i''m using a ajaxfile upload and my code ar already display above can you look please

    Tuesday, December 31, 2013 1:56 AM
  • User-1509636757 posted

    using a ajaxfile upload

    if you are using ajaxfile upload toolkit extension; then you might have written UploadComplete handler to save files to application folder. Just write code there to save these images in sql table as well.

    Protected Sub AjaxFileUpload1_UploadComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AjaxFileUploadEventArgs) Handles AjaxFileUpload1.UploadComplete
            Dim filePath As String = "~/Seller/images/" & Convert.ToString(e.FileName)
            AjaxFileUpload1.SaveAs(filePath)
    ''''write code here to save this image file one by one to database table
    End sub

    hope it helps./.

    Tuesday, December 31, 2013 2:02 AM
  • User669521406 posted

    can you give a full basic coding approach for that please, how it should be 

    Monday, January 13, 2014 5:19 AM
  • User-1509636757 posted

    can you give a full basic coding approach for that please, how it should be

    ASPX Code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxfileupload.aspx.cs" Inherits="ajaxfileupload" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <div>
        <asp:Label runat="server" ID="myThrobber" Style="display: none;"><img align="absmiddle" alt="" src="images/uploading.gif"/></asp:Label>
            <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
                onuploadcomplete="AjaxFileUpload1_UploadComplete" ThrobberID="myThrobber" MaximumNumberOfFiles="10" AllowedFileTypes="jpg,jpeg"/>
        </div>
        </form>
    </body>
    </html>

    Code:

    public partial class ajaxfileupload : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
        protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
        {
            string filePath = "~/upload/" + e.FileName;
            AjaxFileUpload1.SaveAs(filePath);
            //-- Write the code here which will store file or filepath whatever you wish to databse table.
    
        }
    }

    Reference links:

    hope it helps./.

    Monday, January 13, 2014 5:55 AM
  • User669521406 posted

    Kaushalparik27 in case i have a button that is call save

    and i have multiple label and textbox

    and the ajax fileupload1 must wait until i press save to upload the file and save the database, where the sql statement of the fileupload should be

    Wednesday, January 15, 2014 6:01 AM
  • User-1509636757 posted

    You should look out for any jQuery file uploader or any custom control like: Multiple File Upload User Control.

    hope it helps./.

    Wednesday, January 15, 2014 6:12 AM
  • User669521406 posted

    but when i have to edit the product and change the image, i will retrieve the images it is ok, but it need to change only one specific image how will i do

    Wednesday, January 15, 2014 9:30 AM
  • User-1175871172 posted

    Hi, on your UploadComplete event handler of the ajax FileUploadControl, u can detect the ID of the image that u want to delete. Reference the ID with the database and update the image url inside the row record. 

    static int IDimage;

    protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {

        use IDimage to get the current ID row in the database.
        write SQL statement to retrieve the record and Do a update statement to the image url.

       Delete the image in your project image folder. And insert the new one in.

    }

    Thursday, January 16, 2014 1:52 AM