Lotus domino Designer 8.5 File Upload Control reset

Question

I'm supporting a Lotus Notes application that is running on an intranet on IE8. The Domino server is running version 8.5.x.

I am using a file upload control to attach a single PDF file to a record.

It works fine attaching the file and accessing it once the record has been saved, closed and re-opened.

What I would like to do is to be able to clear the file that has been selected PRIOR to the user submitting the form to be saved. The situation is that they might select a subsequent option on the form that invalidates the file attachment and I want the attachment to be automatically cleared.

First attempt: Write to the value of the File Upload Control directly.

I can access the value of the File Upload Control but it appears to be read-only, I cannot write to it directly.

alert('Filename: '+FileUploadControlName.value); // this works
FileUploadControlName.value = ""; // this doesn't work

Note, I get the name of the File Upload Control by calling a function called getName from the onFocus and onBlur events.

function getName(itm) {
    FileUploadControlName = itm;
}

"Other" attributes on the HTML tag of the File Upload Control:

onFocus="getName(this)" onBlur="getName(this)"

Second attempt: Remove and re-add the File Upload Control

I have got the following to work:

Wrap the file upload control in a division called attControlDiv.
Set the ID of the file upload control to attControl
Remove the file upload control element using the removeChild Javascript method.
Refresh the form to recreate the file upload control.

This is the code to remove and re-add the file upload control:

var parent = document.getElementById("attControlDiv");
var child = document.getElementById("attControl");
parent.removeChild(child);

_doClick('refresh', this, null, null);

Although this works, I want to avoid the form refresh and do it directly from within Javascript.

Is there any way to re-add the File Upload Control without triggering a form refresh?

Or is there another way to clear the value of the File Upload Control?

Edited to add a cut-down version of the html source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="/XXX\XXX\YYY.nsf/Calendar.js?OpenPage"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="/XXX\XXX\YYY.nsf/Common.js?OpenPage"></SCRIPT>
<link rel="stylesheet" type="text/css" href="/XXX\XXX\YYY.nsf/ActionBar.css?OpenPage"></style>
<link rel="stylesheet" type="text/css" href="/XXX\XXX\YYY.nsf/Common.css?OpenPage"></style>
<link rel="stylesheet" type="text/css" href="/XXX\XXX\YYY.nsf/WebTabs.css?OpenPage"></style>

<!-- code removed -->

</head>
<body text="#000000" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" onload="frm=document.forms[0]; ">

<!-- code removed -->

<form method="post" action="/XXX/XXX/XXX.nsf/XXX?OpenForm&amp;Seq=1" enctype="multipart/form-data" name="_XXX">

<!-- code removed -->

    <tr>
        <td class="LRTableLabel">
            Attach PDF</td>
        <td colspan="4" class="LRTableData"><div id="attControlDiv">
<input id="fileAttach" maxlength="12" type="file" name="%%File.ca2579e50002791d.e132be8c801a6853ca2575d6000ae341.$Body.0.9D60">    
<input type="button" onclick="$('#fileAttach').MultiFile('reset');" value="fileAttach Clear">
<script type="text/javascript" src="/XXX\XXX\YYY.nsf/jquery-1.8.0.min.js?OpenPage"></SCRIPT>
<script type="text/javascript" src="/XXX\XXX\YYY.nsf/jquery.MultiFile.js?OpenPage"></SCRIPT>
<script>
$(function(){
    $('#fileAttach').MultiFile({
        max: 1,
        accept: 'pdf'
    });
});
</script>
        <!-- -->&nbsp;</div></td>
    </tr>

<!-- code removed -->

</form>
</body>
</html>

Due to restrictions within the intranet that this application is running on where I cannot link to external webpages, I have downloaded the jquery and the multifile js code and implemented them as pages in a code database that is (successfully) used for all of the other code libraries.

Nick Gilbert Nick Gilbert · Accepted Answer · 2014-11-21T03:38:57

I have been able to achieve something similar using the JQuery Multifile plugin, found here : http://www.fyneworks.com/jquery/multiple-file-upload/

My Domino web application displays to the client a list of files that are pending upload when the form is submitted, and allows for removal of all or any of these files prior to submission.

This plugin will also allow you do restrict the number of attachments (in your case, 1) and the allowed file types (in your case .PDF only).

It's very simple to implement. Here is a suggestion of how it might work for you.

<form>
<div><input type="file" name="%%File.123123123123123.1231231231231231231231231.$Body.0.70" id="fileAttach" maxlength="12"></div>
<div>if below field equals 'clear', attachments will clear on field exit :</div> <div><input id="clearAttachments" type="text" /></div>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.something.com/jquery.MultiFile.js"></script>
<script>
$(function(){
    $('#fileAttach').MultiFile({ 
        max: 1, 
        accept: 'pdf' 
    }); 
}); 
</script>
<script>
$('#clearAttachments').blur(function() {
    if ($('#clearAttachments').val() == "clear") {
        $('#fileAttach').MultiFile('reset')
    } 
});
</script>

I should add that I am in no way associated with the creators of this plugin - just a fan.

You can also try it here : http://jsfiddle.net/shwguhj6/

You will also need to at the ID to the file upload element, like this:

file upload control ID

Lotus domino Designer 8.5 File Upload Control reset

1 Answers