Drag and Drop Upload Files

Overview

The drag-and-drop file upload widget supports the HTML5 capability of transmitting files by dropping them onto a page. The widget automatically checks and uploads valid file(s) dragged onto it.

This upload widget works for Genie and Rich Display files. It does not work for mobile devices.

For security the new widget requires an Exit Program on the server side to validate files being uploaded, just like the old File Upload widget.

This widget was introduced with Profound UI Version 5, Fix Pack 2.0.

Differences from Old File Upload Widget

The drag/drop widget has these same properties as the old widget:

• number of files

• size limit

• target directory

• rename to

• overwrite files

• allowed type

• upload response (Rich UI Only)

• onupload (Genie Only)

The new widget does not have the "selection mode" property.

Properties Unique to the Drag-and-Drop File Upload Widget

• auto submit

• show select

Selection Properties

number of files, size limit, and allowed type are checked on the client side. If the file is too large or its type is not allowed, then a warning appears and nothing uploads. If a user drags too many files onto the widget, files upload up to the number specified. That is, if number of files is 1, and the user drags 2 files over, then only 1 file uploads and a warning appears.

The Exit Program on the server validates the file before it is written to the filesystem. If the file is rejected, then the file data is discarded and a warning is sent back to the Drag/Drop File Upload widget on the client browser.

The "show select" property causes the drag-and-drop file upload widget to show a "Select Files" link, like the old upload widget, allowing the new widget to replace the old.

Destination Properties

target directory specifies where the file should be saved. The Exit Program must allow files to upload to the specified destination or else the upload fails with a warning.

rename to specifies a new file name that the uploaded file will take after it is uploaded to the server. This property only applies when number of files is set to 1.

overwrite files specifies whether an uploaded file should overwrite an existing server file in the destination folder having the same name. The default is false.

Genie only Properties

onupload is a property that authorized users can set to call when the upload finishes successfully. Read more about the onupload event.

auto upload determines when the upload begins: either after the file is dropped or after the user clicks an "Upload" hyperlink.

Rich UI only Properties

upload response can be used to pass file details back to the RPG program. Read more about the upload response property.

auto submit determines whether to submit the page or not after dropping file(s), causing the upload to start. Similar to the auto advance property of other input widgets, when auto submit is true the upload starts and the screen automatically submits as if the user pressed the Enter key. When auto-submit is false or not set, the file(s) stay listed in the widget until the user clears it, submits the screen, or exits the program.

Configuration Options

Use the pui["dnd upload show select"] configuration option to force all drag-and-drop upload widgets to show the "Select Files" link when the "select files" property is not false.

For example, add code like this to a file in the /www/<yourInstanceName>/htdocs/userdata/custom/js/ directory:

Supported Browsers

This widget relies on relatively new Javascript APIs, so it will not work on older browsers. Use any of these web browsers for drag-and-drop file uploads:

• Apple Safari version >= 6.0

• Google Chrome version >= 7.0

• Microsoft Internet Explorer version >= 11.0

• Mozilla Firefox version >= 4.0

• Microsoft Edge versions using the Chrome engine