Validate dynamically added FileUpload controls using JavaScript

Last Reply on May 29, 2014 06:35 AM By Azim

Posted on May 29, 2014 05:46 AM

Hi,

I need validation of the below code if all the file upload control has files in it or else ask the user to select files in all the fileupload controls on which it is added... 

 For Example I have added the below images 

1st is before upload

2nd is the error message after upload button is clicked

<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<span style="font-family: Arial">Click to add files</span>&nbsp;&nbsp;
<br />
<br />
<div id="FileUploadContainer">
    <!--FileUpload Controls will be added here -->
</div>
<div>
    <input id="file0" name="file0" type="file" />
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
</div>
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</form>

 

<script type="text/javascript">
    var counter = 1;
    function AddFileUpload() {
        var div = document.createElement('DIV');
        div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
                    '" type="file" />' +
                    '<input id="Button' + counter + '" type="button" ' +
                    'value="Remove" onclick = "RemoveFileUpload(this)" />';
        document.getElementById("FileUploadContainer").appendChild(div);
        counter++;
    }
    function RemoveFileUpload(div) {
        document.getElementById("FileUploadContainer").removeChild(div.parentNode);
    }
</script>

 

protected void btnUpload_Click(object sender, EventArgs e)
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFile PostedFile = Request.Files[i];
        if (PostedFile.ContentLength > 0)
        {
            string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
            PostedFile.SaveAs(Server.MapPath("Files\\") + FileName);
        }
    }
}

Posted on May 29, 2014 06:35 AM Modified on on May 30, 2014 12:00 AM

I have used CustomeValidation for this.

HTML

<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<span style="font-family: Arial">Click to add files</span>&nbsp;&nbsp;
<br />
<br />
<div id="FileUploadContainer">
    <!--FileUpload Controls will be added here -->
</div>
<div>
    <input id="file0" name="file0" type="file" onchange="ChangeBorder(this)" />
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
</div>
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="return ValidateFileUpload();"
    OnClick="btnUpload_Click" ValidationGroup="FileUpload" />
</form>

JavaScript

<script type="text/javascript">
    var counter = 1;
    //Adding File Upload Control
    function AddFileUpload() {
        var div = document.createElement('DIV');
        div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
        '" type="file" onchange="ChangeBorder(this)" />' +
        '<input id="Button' + counter + '" type="button" ' +
        'value="Remove" onclick = "RemoveFileUpload(this)" />';
        document.getElementById("FileUploadContainer").appendChild(div);
        counter++;
    }
    //Removing File Upload Control
    function RemoveFileUpload(div) {
        document.getElementById("FileUploadContainer").removeChild(div.parentNode);
    }

    //Validating File Upload Control
    function ValidateFileUpload() {
        var isValid = true;
        var fileUpload = document.getElementById("FileUploadContainer").getElementsByTagName("input");

        if (document.getElementById("file0").value == "") {
            isValid = false;
            document.getElementById("file0").style.border = "1px solid #DB2D2D";

        }

        for (var i = 0; i < fileUpload.length; i++) {
            if (fileUpload[i].type == "file") {
                if (fileUpload[i].value == "") {
                    isValid = false;
                    fileUpload[i].style.border = "1px solid #DB2D2D";
                }
            }
        }

        return isValid;
    }
    //Removing Border once the File Is Selected
    function ChangeBorder(fileupload) {
        fileupload.style.border = "";
    }
</script>

C#

protected void btnUpload_Click(object sender, EventArgs e)
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFile PostedFile = Request.Files[i];
        if (PostedFile.ContentLength > 0)
        {
            string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
            PostedFile.SaveAs(Server.MapPath("Files\\") + FileName);
        }
    }
}

Screenshot

 

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html