logo

Locating File Upload Controls with JavaScript

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>

Feedback

  1. The other way around

    To get the value of the FUC is nice, but it would be great to set the value of it. I think it is impossible, but maybe somebody has got a solution.

    I want to use it to automatically upload a Word-document in the (VB) document_save-event by calling an URL that opens a form with a FUC on it, then set the FUC's with the location of the Word-document and then submit the form.

    I hope somebody kan help me with this one.

  2. Clear the upload value

    Hey, Jake! Thanks for the info! I'm using this to be able to attach two images to be shown in two different areas of a page. I'm using a couple of hidden fields to do it, as well as a pile of javascript. I have a little problem, though. I entered validation to make sure that the image is the proper format (i.e. "gif" or "jpg"), and not too big (200x200). I am only missing ONE thing! I can't seem to clear the upload value (i.e. set it to ""). I've tried several different ways. The following little "for" loop should clear all the values from the uploads, bit it doesn't:

    for(var i = 0; i < f.elements.length; i++) { if( f.elements[i].type=='file' ){ f.elements[i].value = ""; } } }

    What's odd is that if I try

    alert( f.elements[i].value);

    after the "if", the proper value pops up!

    Is there another way? I tried naming the IDs, (i.e. f.elements["Logo"].value = "";) but that didn't work either. Any help would be great.

    Thanks, ahead of time!

    Steve in Montreal =8P

      • avatar
      • Jake Howlett
      • Thu 24 Apr 2003

      Re: Clear the upload value

      Hi Steve,

      You can't change the value of the file upload in JavaScript. Even if it's only to make it "".

      Why? Security reasons!

      Jake

      Show the rest of this thread

    1. Re: Clear the upload value

      You can put the FUC in a <div> and then use innerHTML to clear the div's contents and refill it with FUC's that have value="" set in the html.

      Hide the rest of this thread

        • avatar
        • Cleo
        • Tue 9 Sep 2003

        Re: Clear the upload value

        Hi Brandon,

        Thanks a lot! =) Your suggestion of using DIV worked for me.

          • avatar
          • FL
          • Tue 17 Aug 2004

          Re: Clear the upload value

          Can you share your code about how to use the div to work around the access is denied error?

          Thanks in advance!

            • avatar
            • Siegfried K
            • Wed 6 Oct 2004

            Re: Clear the upload value

            I´m using this to clear the value: Put your Upload File Element between the div tags. <div id="uploadDiv"> **** UPLOAD ELEMENT *** </div> document.getElementById('uploadDiv').innerHTML = document.getElementById('uploadDiv').innerHTML;

              • avatar
              • Bálint
              • Wed 31 Aug 2005

              Re: Clear the upload value

              It works and it really great. Thank you!

              1. Assigning a value to the input file tag

                Hi all, I need to assing a value to value property of the input file tag, this property is readonly, somebody knows a way around?

                Thanks in advance

                Francisco jzanca@gmail.com

              2. Re: Clear the upload value

                How to clear the value in <input id="txtfile" type= file> . just like clearing the value of textbox using javascript .

                Help me very Urgent

            1. Please help me! How to set value to tag file

              I want to set value into tag file, but I can't. I have set value in tag file with way:

              <input type="file" id = "file" value="test"> but no see result "test". And i have set value into tag file by javascript: document.getElementById("file").value="test"; and still no see result "test". Please help me. Thanks very much.

            2. Re: Clear the upload value

              Solution with one line javascript function:

              http://gusiev.com/2009/04/clear-upload-file-input-field/

      1. Re: Clear the upload value

        Thanks alot ur suggestion worked fine for me

      2. Re: Clear the upload value

        Please help me

        i want to clear upload value

        -sakthi-

      • avatar
      • Mike M
      • Tue 4 Dec 2007

      Re: Clear the upload value

      You should be able to clear the field with your code but also refresh the page with the second line below. This should work and you should not lose previous entered data on the form.

      f.elements[i].value = ""; _doClick('$Refresh', this, null, null);

  3. How to process files which are on the control

    This is greate! I was looking for a code like this a long time ago! So, now, we have the file list do upload! How can i do to copy that files to a server, with java????

    Does anybody have hints on it???

    Thanks a lot

    Luís

    • avatar
    • jan
    • Fri 30 Jun 2006

    hola

    hola

    • avatar
    • jan
    • Fri 30 Jun 2006

    hola

    hola

    • avatar
    • Vu
    • Mon 28 May 2007

    Thank you

    please, send to me javascript function upload file.

  4. Uploading a file through javaScript

    How i can uploading a file through javaScript

  5. Upload Dynamic file & check file size

    Hello Frnds,

    I make one script to upload a multiple file using javascript.It's not really upload a file at particular location just show me the file name.if i want to delete a file then also it'll work fine but when i upload a one file at that time i want to check file size also so i have option like ActiveXObject but ny application ll be run on linux platform so i'll not support.

    So, Please Help me.

    Thanks in advance

    Gauttam

    • avatar
    • jitu
    • Sun 1 Nov 2009

    Its not working

    • avatar
    • jitu
    • Sun 1 Nov 2009

    please tell me gow it will work ....

    • avatar
    • ritu
    • Thu 30 Sep 2010

    Hi

    I want to upload a file using javascript and also wanna check its size. I want that a file uploaded shud not exceed a particular limit n if a user tries to d that,then a popup shud cum. I dont want to use an activex control.

    Please help me wth dis n suggest me an alternate solution to activex control.

    Thanx...

    • avatar
    • tt
    • Mon 11 Jul 2011

    Hey, Jake! Thanks for the info! I'm using this to be able to attach two images to be shown in two different areas of a page. I'm using a couple of hidden fields to do it, as well as a pile of javascript. I have a little problem, though. I entered validation to make sure that the image is the proper format (i.e. "gif" or "jpg"), and not too big (200x200). I am only missing ONE thing! I can't seem to clear the upload value (i.e. set it to ""). I've tried several different ways. The following little "for" loop should clear all the values from the uploads, bit it doesn't:

    for(var i = 0; i < f.elements.length; i++) { if( f.elements[i].type=='file' ){ f.elements[i].value = ""; } } }

    What's odd is that if I try

    alert( f.elements[i].value

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
Limit the types of files users can upload   Copying text from a document to the clipboard

About This Article

Author: Jake Howlett
Category: JavaScript
Keywords: File Upload;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »