HTML File Input ID

Thread is closed for posting
3 posts, 0 answers
  1. Ian
    Ian avatar
    3 posts
    Member since:
    Jul 2012

    Posted 29 Apr 2008 Link to this post

    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
  2. Ubong
    Admin
    Ubong avatar
    328 posts

    Posted 05 May 2008 Link to this post


    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
  3. Ian
    Ian avatar
    3 posts
    Member since:
    Jul 2012

    Posted 12 May 2008 Link to this post

    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;
    }


Back to Top