Multiple Images upload with different titles

hud

My Requirement is. I will be uploading 3-4 images at a time through FileUpload. Each Image will have its own Title, Descriptions etc.

Now my issue is that, whenever uploading I have given a title column for the images. But when I upload 3-4 Images the title and description is going same for all the images.

Here Is my HTML for the Image Uploading via FileUpload.

 <tr>
    <td style="vertical-align: top;">
        <asp:label cssclass="control-label" id="Label1" runat="server">Image Title</asp:label>
    </td>
    <td>
        <div class="control-group">
            <div class="controls">
                <asp:textbox id="txtImagetitle" cssclass="form-control" runat="server" validationgroup="AddNew"></asp:textbox>
                <asp:requiredfieldvalidator cssclass="error-class" id="RequiredFieldValidator1" runat="server"
                    controltovalidate="txtImagetitle" errormessage="Please add the image title" validationgroup="AddNew"></asp:requiredfieldvalidator>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td style="vertical-align: top;">
        <asp:label cssclass="control-label" id="Label2" runat="server">Image description</asp:label>
    </td>
    <td>
        <div class="control-group">
            <div class="controls">
                <asp:textbox id="txtImagedesc" cssclass="form-control" runat="server" validationgroup="AddNew"></asp:textbox>
                <asp:requiredfieldvalidator cssclass="error-class" id="RequiredFieldValidator2" runat="server"
                    controltovalidate="txtImagedesc" errormessage="Please add the image description"
                    validationgroup="AddNew"></asp:requiredfieldvalidator>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td style="vertical-align: top;">
        <asp:label cssclass="control-label" id="Label3" runat="server">Image upload</asp:label>
    </td>
    <td>
        <div class="control-group">
            <div class="controls">
                <asp:fileupload id="FileUpload1" runat="server" allowmultiple="true" />
                <asp:requiredfieldvalidator cssclass="error-class" id="RequiredFieldValidator3" runat="server"
                    controltovalidate="FileUpload1" errormessage="Please add the gallery date" validationgroup="AddNew"></asp:requiredfieldvalidator>
            </div>
        </div>
    </td>
</tr>

Please suggest what to do in this case when uploading multiple images how to set different titles for different Images.

UPDATED CODE BEHIND

protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (Request.QueryString.Count > 0)
    {
        foreach (var file in FileUpload1.PostedFiles)
        {
            string filename = Path.GetFileName(file.FileName);

            file.SaveAs(Server.MapPath("/GalleryImages/" + filename));

            using (SqlConnection conn = new SqlConnection(conString))

                if (Request.QueryString["Id"] != null)
                {
                    string Id = Request.QueryString["Id"];

                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = " Update tbl_galleries_stack SET gallery_id=@gallery_id,img_title=@img_title,img_desc=@img_desc,img_path=@img_path, IsDefault=@IsDefault Where Id=@Id";
                    cmd.Parameters.AddWithValue("@Id", Id);
                    cmd.Parameters.AddWithValue("@gallery_id", ddlgallery.SelectedValue);
                    cmd.Parameters.AddWithValue("@img_title", txtImagetitle.Text);
                    cmd.Parameters.AddWithValue("@img_desc", txtImagedesc.Text);
                    cmd.Parameters.AddWithValue("@img_path", filename);
                    cmd.Parameters.AddWithValue("@IsDefault", chkDefault.Checked);
                    cmd.Connection = conn;
                    conn.Open();
                    cmd.ExecuteNonQuery();
                    conn.Close();
                    ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", "alert('Gallery updated sucessfully');window.location ='csrgalleriesstack.aspx';", true);
                }
        }
    }
    else
    {
        foreach (var file in FileUpload1.PostedFiles)
        {
            string filename = Path.GetFileName(file.FileName);

            file.SaveAs(Server.MapPath("/GalleryImages/" + filename));
            SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultCSRConnection"].ConnectionString);
            using (SqlCommand cmd = conn.CreateCommand())
            {
                conn.Open();
                SqlCommand cmd1 = new SqlCommand("Insert into tbl_galleries_stack (gallery_id,img_title,img_desc,img_path,IsDefault) values(@gallery_id,@img_title, @img_desc, @img_path,@IsDefault)", conn);
                cmd1.Parameters.Add("@gallery_id", SqlDbType.Int).Value = ddlgallery.SelectedValue;
                cmd1.Parameters.Add("@img_title", SqlDbType.NVarChar).Value = txtImagetitle.Text;
                cmd1.Parameters.Add("@img_desc", SqlDbType.NVarChar).Value = txtImagedesc.Text;
                cmd1.Parameters.Add("@img_path", SqlDbType.NVarChar).Value = filename;
                cmd1.Parameters.Add("@IsDefault", SqlDbType.Bit).Value = chkDefault.Checked;
                cmd1.ExecuteNonQuery();
                conn.Close();
                ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", "alert('Gallery added sucessfully');window.location ='csrgalleriesstack.aspx';", true);
            }
        }
    }
}
naveen

There is no way you can give different title / description as you have given no option to provide it. Period.


You are forced to use multiple fileupload controls. This is also tricky because asp:FileUpload controls wont maintain their state after postback.

So, the solution I can see is a two-part one. Create two panels and hide the second panel at page load

Part 1
Place a label and textbox and button like this in the first panel in your page. Panel 1
When the user enters a value, say 10, and fires EnterButton_click close Panel1 and open Panel2.

Part 2

On Panel 2, place a GridView like this

<asp:GridView ID="ImagesGrid" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Sl No">
            <ItemTemplate><%# Container.DisplayIndex + 1 %></ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Title">
            <ItemTemplate>
                <asp:TextBox ID="txtTitle" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Description">
            <ItemTemplate>
                <asp:TextBox ID="txtDescription" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="File">
            <ItemTemplate>
                <asp:FileUpload ID="flUpload" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:Button ID="SaveButton" Text="Save" runat="server" OnClick="SaveButton_Click"/>

Now on the Enter buttons click event on Panel 1, write this.

// the idea is to create an empty gridview with number of rows client selected
protected void EnterButton_Click(object sender, EventArgs e)
{
    //in this, 10 has been entered    
    var imageCount = Convert.ToInt32(txtImageCount.Text);
    //var list = new List<string>();

    //for (int i = 0; i < imageCount; i++)
    //{
    //    list.Add(string.Empty);
    //}
    var list = new List<string>(10);
    list.AddRange(Enumerable.Repeat(String.Empty, imageCount));
    ImagesGrid.DataSource = list;
    ImagesGrid.DataBind();

    //TO DO: hide panel1 and make panel2 visible
}

So on clicking enter, you will get an empty gridview with ten rows. Panel 2

Now fill the rows in the GridView, do validation and hit Save. On Save Button click event, you can access the WebControls like this.

protected void SaveButton_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in ImagesGrid.Rows)
    {
        var title = row.FindControl("txtTitle") as TextBox;
        var description = row.FindControl("txtDescription") as TextBox;
        var imageFile = row.FindControl("flUpload") as FileUpload;
        string filename = Path.GetFileName(imageFile.FileName);
        imageFile.SaveAs(Server.MapPath("/GalleryImages/" + filename));
        //TO DO: write save routine
    }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Upload multiple images to server from Android app

From Dev

Proper way to upload multiple images to Parse

From Dev

Upload multiple images to a database from a singe fileinput

From Dev

Upload multiple images to Database MYSQLI

From Dev

Upload multiple images in one request

From Dev

Upload multiple images using AFNetworking

From Dev

Upload multiple images with codeigniter

From Dev

All images not uploading in multiple images upload

From Dev

Upload multiple images using AFNetworking in swift

From Dev

how to upload multiple images to a blog post in django

From Dev

Upload multiple images parse.com javascript

From Dev

Upload multiple featured images in a custom post (Wordpress)

From Dev

Multiple Upload Images into Mysql Database

From Dev

upload and display multiple images for one product?

From Dev

Upload multiple images to server from Android app

From Dev

upload Multiple images to desired folder

From Dev

Multiple file upload in different fields

From Dev

Upload multiple images with titles and descriptions

From Dev

Need help using php to upload multiple images to different folders and store file names in mysql datatbase

From Dev

Upload multiple images to a database from a singe fileinput

From Dev

Upload multiple images to Database MYSQLI

From Dev

Upload multiple images angular - mean stack

From Dev

Validate multiple upload images with django

From Dev

Upload multiple images

From Dev

Unable to upload multiple images with Carrierwave

From Dev

FileNotFoundException when upload multiple images to FTP server

From Dev

Upload multiple images from Android to PHP

From Dev

BeautifulSoup 4: Extracting multiple titles and links from different ptag(s)

From Dev

How do I upload multiple images and text file in a single form with the different button in Codeigniter?

Related Related

  1. 1

    Upload multiple images to server from Android app

  2. 2

    Proper way to upload multiple images to Parse

  3. 3

    Upload multiple images to a database from a singe fileinput

  4. 4

    Upload multiple images to Database MYSQLI

  5. 5

    Upload multiple images in one request

  6. 6

    Upload multiple images using AFNetworking

  7. 7

    Upload multiple images with codeigniter

  8. 8

    All images not uploading in multiple images upload

  9. 9

    Upload multiple images using AFNetworking in swift

  10. 10

    how to upload multiple images to a blog post in django

  11. 11

    Upload multiple images parse.com javascript

  12. 12

    Upload multiple featured images in a custom post (Wordpress)

  13. 13

    Multiple Upload Images into Mysql Database

  14. 14

    upload and display multiple images for one product?

  15. 15

    Upload multiple images to server from Android app

  16. 16

    upload Multiple images to desired folder

  17. 17

    Multiple file upload in different fields

  18. 18

    Upload multiple images with titles and descriptions

  19. 19

    Need help using php to upload multiple images to different folders and store file names in mysql datatbase

  20. 20

    Upload multiple images to a database from a singe fileinput

  21. 21

    Upload multiple images to Database MYSQLI

  22. 22

    Upload multiple images angular - mean stack

  23. 23

    Validate multiple upload images with django

  24. 24

    Upload multiple images

  25. 25

    Unable to upload multiple images with Carrierwave

  26. 26

    FileNotFoundException when upload multiple images to FTP server

  27. 27

    Upload multiple images from Android to PHP

  28. 28

    BeautifulSoup 4: Extracting multiple titles and links from different ptag(s)

  29. 29

    How do I upload multiple images and text file in a single form with the different button in Codeigniter?

HotTag

Archive