December 12, 2016

Upload multiple files with Single Element and Remove Option Without Using Jquery

Recently working on C# ASP.NET project, one requirement was to provide an option to users to upload multiple files with single element and also with delete option in Entry Form. All files should be saved on Add/Save click. It was a bit tricky as I'd to achieve this functionality WITHOUT using JavaScript and jQuery.

Solution: To achieve this requirement, I've used very popular concept of View State in C#. Bind a data table in View State and display it in Grid. Add or remove rows dynamically from data table.

Source Code:

//Fetch a data table from View State.
DataTable dtCurrentTable = (DataTable)ViewState["EditMaterial"];
DataRow drCurrentRow = null;
drCurrentRow = dtCurrentTable.NewRow();

//Add row in View State when new file is added.
if (flMaterialUpload1.HasFile)
{
     drCurrentRow["FileName"] = objProperty.fileName;
     drCurrentRow["FilePath"] = objProperty.materialaPath;
     dtCurrentTable.Rows.Add(drCurrentRow);
}
     gveditmaterial.DataSource = dtCurrentTable;
     gveditmaterial.DataBind();
     ViewState["EditMaterial"] = dtCurrentTable;

//Write row command event of grid to delete file.
DataTable dtCurrentTable = (DataTable)ViewState["EditMaterial"];
DataRow[] rows;
rows = dtCurrentTable.Select("BPD_MaterialPath ='" + hdnmaterialpath.Value + "'");
foreach (DataRow row in rows)
{
    row.Delete();
    dtCurrentTable.AcceptChanges();
}
    gveditmaterial.DataSource = dtCurrentTable;
    gveditmaterial.DataBind();
    ViewState["EditMaterial"] = dtCurrentTable;

Multiple File Upload Screen will look like below.
blog18.png

If you have any questions you can reach out our SharePoint Consulting team here.

No comments:

Post a Comment