HTML File Input ID

[Ian]

Hi there

I have a number of file upload controls on a page which the user can use however they wish. i.e. none of them, 2 of them, the just 1st and the 4th, etc.

Previous file upload controls I've used provide a way to identify the ID of the HTML "input type=file" element used for the uploaded file.

I can't seem to find this information with this control. Is there a way to identify the ID?

Many thanks

Ian Goodwin

[Ubong]

Hello Ian,

Information for each of the Uploaded files on the server using the UploadedFiles collection: 
   RadUpload1.UploadedFiles
You can also find more on it's use under the Example Source Code's C#  tab of the following example :
http://www.telerik.com/demos/aspnet/prometheus/Upload/Examples/ManipulatingTheUploadedFiles/DefaultCS.aspx

Kind Regards,
Ubong
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Ian]

Hi Ubong,

I couldn't see anything in the examples that addressed the problem I was having. I was using multiple normal <input type=file> html controls and I needed to know which ones had or hadn't been filled in.

Unless I'm being thick or blind there isn't currently anyway of identifying the ID or NAME of the INPUT control used to upload a file.

For anyone interested, I solved the problem in the end by using a hidden field and adding a bit of javascript to the submit button. A sample javascript function to attach to the submit button is at the bottom of this post.

All the <INPUT type=file> elements have an incrementing ID, File1, File2, File3, etc. The javascript added to the submit button adds the value of the selected file (i.e. the client's local file path) in a comma seperated format to the hidden field - e.g. "C:\Users\Public\Pictures\Sample Pictures\Creek.jpg, ,C:\Users\Public\Pictures\Sample Pictures\Dock.jpg" would represent a file uploaded using the input element File1, no file using element File2 and a file using element File3.

Still with me? :)

Back at the server, I can compare the client filename and path with the values SPLIT from the hidden field and identify which UploadedFile came from which <INPUT type=file> element.

This seems to work reliably for me. I really hope I've not been thick and missed the example / section from the help file that shows how to identify the source element ID!

Sample Javascript Function for the Submit Button:
In the server side code you would add
btnSubmit.Attributes.Add("onclick", string.format("DoFileIds(4,'{0}');", myHiddenField.ClientID))

This call the Javascript function "DoFileIds" which looks for HTML elements with the ID File1 through to File4 and add them to the asp.net HiddenField control called "myHiddenField".

Client side Javascript to include with the page:

function DoFileIds(numFiles, hfId)

{

var myfile;

if(hfId!='')

{

document.getElementById(hfId).setAttribute("value","");

for(i=1;i<=numFiles;i+=1)

{

myfile = document.getElementById("File" + i);

document.getElementById(hfId).setAttribute("value",document.getElementById(hfId).value + myfile.value + ',');

}

} 

return true;

}