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

      Hide the rest of this thread

      1. Re: Clear the upload value

        I think there is a work-around for this. Try this script.

        function clearFileValue(oField){ oField.select(); r=oField.createTextRange(); r.execCommand('delete'); oField.focus(); }

        1. Re: Clear the upload value

          Hi Kazuyuki Arai, I used your method to clear the upload value but however when i tried to submit the document it gives me the javascript error:

          Access Denied!

          Then when i press submit again. Then it works... why??? Could you please advice on this.. Thanks a lot.

          Alan

          1. PROBLEM WITH THE WORK AROUND.. help

            hi all, need help urgently, regarding the fuc. the work around given

            function clearFileValue(oField){ oField.select(); r=oField.createTextRange(); r.execCommand('delete'); oField.focus(); }

            once i clear the fuc, i wasn't able to submit the document. it gives me javascript error access denied! why??

            help is very much appreciated... thanks a lot

          • avatar
          • AnandKumar
          • Thu 27 Jan 2005

          Re: Clear the upload value

          Clearing the value of upload control <input type = file> works nice.Really nice.Thanks a lot. -Anand Kumar.R from India(email : anandlink@rediffmail.com)

          • avatar
          • Denny McEntire
          • Tue 31 Jan 2006

          Re: Clear the upload value

          I figured out another way. I used the setAttribute() method to change the type to "text", then set the value to "", and changed the type back to "file".

          Here's the code: t = /*set this to be an DOM reference to the file upload field*/; t.setAttribute("type", "text"); t.value = ""; t.setAttribute("type", "file");

          Denny

          • avatar
          • adil
          • Wed 31 May 2006

          Re: Clear the upload value

          very nice idea man

        2. Re: Clear the upload value

          Thanks a lot, It was very useful

            • avatar
            • Valeria
            • Fri 14 Sep 2007

            Re: Clear the upload value

            Excellent, it works perfect in IExplorer and Mozilla!! Thanx

    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.

      Show the rest of this thread

      • 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 »