Xpages: How to integrate Bootstrapped Xpage FileUploadControl with backed Java Class

Question

I have a nice Bootstrapped file control.

This file control I got form the web binds to a document data source. My documents are backed by a java bean and I am using ObjectDataSource to tie that bean to the Xpage.

However, I do not know how to bind the attachment field to the file upload control.

The relevant code in the Xpage is as follows:

//Data Object

    <xp:this.data>
        <xe:objectData
            saveObject="#{javascript://BuildTaskMaster.save()}" var="task">
            <xe:this.createObject><![CDATA[#{javascript:var task = new com.scoular.model.Task();
var unid = sessionScope.get("unid");
if (unid != null) {
    task.loadByUnid(unid);
} else {
    task.create();
}
return task;}]]></xe:this.createObject>
        </xe:objectData>
    </xp:this.data>

//Bootstraped File Uploaded     

<script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script>
<link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" />
<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>

    <xp:fileUpload id="fileUpload2" value="#{task.attachments}">
        <xp:this.attrs>
            <xp:attr name="accept" value="*" />
        </xp:this.attrs>
    </xp:fileUpload>
    <xp:br></xp:br>
<xp:fileDownload rows="30" id="fileDownload1"
displayLastModified="true" value="#{task.attachments}"
hideWhen="true" allowDelete="true">
</xp:fileDownload>    
<xp:button value="Save Document" id="button3" styleClass="btn btn-primary">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument></xp:saveDocument>
<xp:openPage name="/BootstrapFileInput4.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>

    </xp:panel>

    <xp:eventHandler event="onClientLoad" submit="true"
                refreshMode="norefresh">
                <xp:this.action><![CDATA[#{javascript:try {
dojo.byId("#{id:inputText1}").focus();
} 
catch(e)
{}}]]></xp:this.action>
            </xp:eventHandler>  

    <xp:scriptBlock id="scriptBlock1" loaded="false">
        <xp:this.value><![CDATA[$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>'
});
}
);]]></xp:this.value>
    </xp:scriptBlock>

The relevant part of Java Class

public class Task implements Serializable {
    private static final long serialVersionUID = 1L;

    // Common Fields
    private String unid;
    private Boolean newNote;
    private DateTime crtDte;
    private String crtUsr;

    // Custom Fields
    private Number order;
    private String title;
    private String notes;
    private UploadedFile attachments;

    //In save method

            if (attachments != null ) {

                //get the uploaded file
                IUploadedFile attachment = attachments.getUploadedFile();

                //get the server file (with a cryptic filename)
                File serverFile = attachment.getServerFile();        

                //get the original filename
                String fileName = attachment.getClientFileName();    

                File correctedFile = new File( serverFile.getParentFile().getAbsolutePath() + File.separator + fileName );

                //rename the file to its original name
                boolean success = serverFile.renameTo(correctedFile);

                if (success) {
                    //do whatever you want here with correctedFile

                    //example of how to embed it in a document:
                    RichTextItem rtFiles = doc.createRichTextItem("attachments");
                    rtFiles.embedObject(lotus.domino.EmbeddedObject.EMBED_ATTACHMENT, "", correctedFile.getAbsolutePath(), null);
                    doc.save();

                    //if we're done: rename it back to the original filename, so it gets cleaned up by the server
                    correctedFile.renameTo(attachment.getServerFile() );
                }
            }




        public UploadedFile getAttachments() {
        return attachments;
    }
    public void setFileUpload( UploadedFile to) {
        this.attachments = to;
    }

I would like the user to be able to select several attachments, not one t a time.

score 0 · Answer 1 · answered May 10 '16 at 19:45

When I've implementhed this I've used this code as the base https://openntf.org/XSnippets.nsf/snippet.xsp?id=custom-xpage-file-upload-handler

and the PLUpload control

And you can't upload everything on the same page you need a second page that will retrieve the attachments and you can add them to the document on save.

Xpages: How to integrate Bootstrapped Xpage FileUploadControl with backed Java Class

1 Answers1