Enable File Upload

Description of the Example

(This example builds on the example "Making Files Available for Download.")

In this example, the citizen portal should provide the option to submit or upload documents or files.

To this end, an "Upload Document" button will be implemented.

After the user clicks the "Upload Document" button, a dialog box appears. In this dialog box, the user can search for documents on their computer and then upload them.

Once you click the "Upload" button, the documents will be uploaded directly to DRACOON.

 

Requirements

DRACOON

  • The data room has been created.

  • "Upload Folder" has been created.

  • The ID of the "Upload Folder" is known.

Intrexx

  • Intrexx DRACOON Connector was set up ("DracoonConnector").

  • The "IntrexxDracoonApp" application has been created.

  • The external data group "DracoonDocuments" has been added.

Procedure - Overview

File Upload Input Page (Page Wizard)

Add the "File Selection" element.

Add an "Input Field" element ("name" - required field).

Set the "parentId" parameter on the page.

Set Up the "Save" Button

Set a fallback value for parentId.

Add a "Upload Document" button to the "Overview" page

Drag and drop the "Button" element onto the "Overview" page.

Procedure - Step-by-Step

Add a form page for file uploads

Create an input page under the external data group "DracoonDocuments."

(In our example, we're using the Page Wizard.)

  1. Launch the Page Wizard.

  2. Select the "Input Page" section.

  3. Click "Next."

  4. Enter a title for the input page ("Upload").

  5. Click "Next."

  6. Add the "file" and "name" data fields.

    (The "name" data field is required in DRACOON.)

  7. Click "OK."

    The input page appears.

    Set the "parentId" parameter on the page

    The "parentId" parameter refers to the ID of your upload folder. At the same time, "parentId" is a data field that is included by default in the "DracoonDataSpace" connector data group used in this example. For more information, see the "DracoonDataSpace" data group section.

  8. Open the Properties dialog box for the input page.

  9. Go to the "Parameters" tab.

  10. Click the " " icon.

  11. Select "Parameters."

  12. Enter "parentId" in the "Name" field. (Note the spelling.)

  13. Enter the ID of your upload folder as the fallback value.

    You can find the ID in the URL of your DRACOON Web App.

    When you click on a data room or folder with the mouse, the ID appears at the end of the URL. The ID always follows "/node/".

  14. Click "OK."

Set Up the "Save" Button

  1. Click the "Save" button.

  2. Go to the "Actions" tab.

  3. Click the "Parameters" menu item.

  4. Select the "parentId" parameter.

  5. Click the arrow next to the plus icon .

  6. Select "Fallback Value."

  7. In the right-hand pane, select the "Parameters" option ().

  8. In the "Parameter" drop-down menu, select the value "parentId" ().

  9. Click "OK."

    The application looks like this:

    (The "Delete" button has been removed.)

Insert the "Upload Document" button

  1. Go to the "Overview" page.

  2. Drag and drop the "Button" element onto the "Overview" page.

  3. On the "General" tab, select "Text."

  4. In the "Title" field, enter the text "Upload Document."

  5. Go to the "Actions" tab.

  6. Select the "Upload" page as your destination.

  7. Under "Landing Page Options," select the following options:

    • Open in Tooltip

    • Open Modal

    • Show Close Icon

  8. Click "OK."

Your sample application now looks like this:

Publish an Application

Save or publish the application.

The application appears (roughly) like this in the browser:

After you click the "Upload Document" button, the application will appear in the browser (roughly) like this: