Locating File Upload Controls with JavaScript

Jake Howlett, 18 October 2000

Category: JavaScript; Keywords: File Upload

In JavaScript there is no way of getting a direct handle on File Upload Controls via the Document Object Model (DOM) unless you know their "name" (ID).

Unless you are using R5, where you can specify the elements ID in the HTML attributes of the Upload Element, or you are generating the Upload using pass-thru HTML then you will have to do it this way as there is no way of predicting what domino is going to call any given upload.

The function loops through all elements on a form until it finds one of type "file" and then returns the zero-based position of it within the forms collection of elements.



<script type="text/javascript">

<!-- 

function numberOfFileUpload( f ) {

 for(var i = 0; i < f.elements.length; i ++) {

  if( f.elements[i].type=='file' ){

   return i;

  }

 }

}

// -->

</script>

Test it using the JavaScript function below, after entering a value in the file upload:

JavaScript:alert('Value = ' + document.forms[0].elements[numberOfFileUpload(document.forms[0])].value);

Note: If you have multiple upload controls on the same form then use this function instead. It will fill an array with the positions of each upload:

<script type="text/javascript">

<!-- 

//create global array

 var FUCs = new Array{};



function numberOfFileUploads( f ) {

 for(var i = 0; i < f.elements.length; i ++){

  if( f.elements[i].type=='file' ){

   //append position to upload array

   FUCs[FUCs.length] = i;

  }

 }

}

 -->

</script>