Multiple Uploads

XForms · Wikibooks

0%

Contents

    Text

    Size
    100%
    Theme
    Typeface
    Line length
    Spacing

    From Wikibooks, under CC BY-SA 4.0, as the source states it. This page at Wikibooks.

    Motivation

    You would like the user to be able to attach multiple files to a form.

    Method

    We will use the <xf:repeat> around the upload control:

    Sample Source

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
    xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
    xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>XForms Upload Multiple Simple</title>
        <xf:model>
            <xf:instance xmlns="" id="save-data">
                <formdata>
                    <Files1>
                        <MyFile filename="" mediatype="" size=""></MyFile>
                    </Files1>
                </formdata>
            </xf:instance>
            <xf:instance id="file-upload-template" xmlns="">
                <MyFile filename="" mediatype="" size=""></MyFile>
            </xf:instance>
        </xf:model>

    </head>
    <body>
        <p>Demonstration of how to use the repeat element to get multiple uploads.</p>
        <fieldset>
            <legend>Add multiple attachments</legend>
            <xf:repeat ref="instance('save-data')/Files1/MyFile" id="repeat-1">
                <xf:upload ref=".">
                    <xf:filename ref="@filename"></xf:filename>
                    <xf:mediatype ref="@mediatype"></xf:mediatype>
                    <xxforms:size ref="@size"></xxforms:size>
                    <!-- Note the event after upload could add a new row -->
                </xf:upload>
                <xf:trigger ref="instance('save-data')/Files1/MyFile[2]">
                    <xf:label>Delete</xf:label>
                    <xf:delete ev:event="DOMActivate"
                        ref="instance('save-data')/Files1/MyFile[index('repeat-1')]"></xf:delete>
                </xf:trigger>
                <br />
            </xf:repeat>
            <xf:trigger>
                <xf:label>Add Attachment</xf:label>
                <xf:insert ev:event="DOMActivate" ref="instance('save-data')/Files1/MyFile"
                    origin="instance('file-upload-template')"> </xf:insert>
            </xf:trigger>
        </fieldset>

        <fr:xforms-inspector></fr:xforms-inspector>
    </body>
</html>

    Sample User Interface

    Illustration
    upload multiple attachments

    User interface notes

    1. The delete trigger will only be visible after the second upload is shown.
    2. This interface shows the file name and size in bytes. The mime-type could also be shown
    3. You can add any number of files
    4. You can delete any row by selecting the "Delete" button
    5. You can re-add a file using the red X

    The files will be uploaded to the server in an async process.

    Tested on Orbeon 4.3