CODEWITHSUNDEEP
c#asp.netfile-upload
Max
Max

Reputation: 13338

Differentiate between multiple dynamic fileupload controls

I'm dynamically adding multiple fileuploads to my asp.net page. The user is able to create and delete these fileuploads from the page. The code for this is written in Javascript / JQuery:

var opleverpuntCounter = 0;
        function addOpleverpunt() {
            var $opleverpuntContainer = $('#opleverpuntContainer');
            var div = '';
            var divId = 'opleverpunt_' + opleverpuntCounter;
            div = '<div id="' + divId + '"><br />Upload afbeelding situatie vooraf <input id="opleverpuntbeforefile_' + opleverpuntCounter + '" name="opleverpuntbeforefile_' + opleverpuntCounter + '" type="file" accept="image/*" capture="camera" /><br /><label for="opleverpuntdescriptionbefore_' + opleverpuntCounter + '">Situatie omschrijving vooraf</label><br /><textarea type="text" id="opleverpuntdescriptionbefore_' + opleverpuntCounter + '" name="opleverpuntdescriptionbefore_' + opleverpuntCounter + '" rows="5" cols="100"></textarea><br />Upload afbeelding situatie achteraf <input id="opleverpuntafterfile_' + opleverpuntCounter + '" name="opleverpuntafterfile_' + opleverpuntCounter + '" type="file" accept="image/*" capture="camera" /><br /><label for="opleverpuntdescriptionafter_' + opleverpuntCounter + '">Situatie omschrijving achteraf</label><br /><textarea type="text" id="opleverpuntdescriptionafter_' + opleverpuntCounter + '" name="opleverpuntdescriptionafter_' + opleverpuntCounter + '" rows="5" cols="100"></textarea><br /><input id="btn_' + opleverpuntCounter + '" type="button" value="REMOVE X" class="smallButton" /></div>';
            $opleverpuntContainer.append(div);
            $('#btn_' + opleverpuntCounter).click(function () { removeOpleverpunt(divId); });
            opleverpuntCounter++;
        }
        function removeOpleverpunt(element) {
            var $element = $('#' + element);
            $element.remove();
        }

It adds 2 fileupload controls on each addOpleverpunt() call. The name and id are both generated and unique for each fileupload.

HTML:

<div id="opleverpuntContainer">
</div>

Back at server-side I use following code to get and store the uploaded files:

for (int i = 0; i <= Request.Files.Count - 1; i++) {
    HttpPostedFile PostedFile = Request.Files(i);
    if (PostedFile.ContentLength > 0) {
        //Store PostedFile here
        //(Left out to improve question readability)
    }
}

The fileuploads aren't ASP:FileUpload controls but regular input FileUpload controls.

Is there any way to differentiate between opleverpuntbeforefile_x and opleverpuntafterfile_x? (x is the generated number)

If I'm able to get the difference at serverside, I will be able to store opleverpuntbeforefile in one entity and opleverpuntafterfile in another.

Suggestions and answers in either C# or VB.NET are fine.

Upvotes: 0

Views: 208

Answers (1)

Anupam Sharma
Anupam Sharma

Reputation: 368

You can access the html control name:

for (int i = 0; i <= Request.Files.Count - 1; i++)
            {
                HttpPostedFile PostedFile = Request.Files[i];
                var controlName = Request.Files.Keys[i];
                if (PostedFile.ContentLength > 0)
                {
                    //Store PostedFile here
                    //(Left out to improve question readability)
                }
            }

Upvotes: 2

Related Questions