File upload

The uploader criterion sends a file to the server, where its processes can manage it. Below is the real criterion of the AWE React client: choose a file, change its attributes and the XML below follows.

Live preview

LightDark

Controls

Label

Placeholder

Size

DefaultSmallLarge

Drop zone

Camera

OffFrontRear

Required

Read only

XML

<criteria id="demo"
          label="Attachment"
          component="uploader"
          destination="attachments" />

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
label	Label	text
placeholder	Placeholder	text
size	Size	smlg
drop-zone	Drop zone	true / false
capture	Camera	userenvironment
validation	Required	true / false
readonly	Read only	true / false

Events and actions

Action (type)	What it does
reset	Empties the value of the criterion.
restore	Puts back the initial value of the criterion.
validate	Runs the validation of the criterion (required, formats) and shows its error.
set-invalid	Marks the criterion as invalid with the message of the action.
set-valid	Clears the validation error of the criterion.
copy-criterion-value-clipboard	Copies the value of the criterion to the clipboard.

Full reference

• Full documentation of this component
• XSD reference of the element

The upload is simulated in these examples: the page reports the progress of the request and shows the file name and size as the server would answer, but the file is never sent anywhere; it stays in your browser. destination is the folder of the server where a real screen stores the file. With drop-zone the user can drop the file, and when it is a raster image a preview is shown. capture adds a Take photo button that opens the camera on mobile browsers.

Recipes

Drop zone with a preview

Drop an image on the dashed area, or choose one: it is previewed next to the field, and Clear removes the file.

<criteria id="photo" component="uploader" label="Photo" destination="photos" drop-zone="true" />

Events and actions

A criterion has no event of its own to listen to: every change of its value checks the dependencies whose dependency-element names it, and pressing Enter in a text field runs the submit button of its window. The actions that work on criteria:

Action	Description
reset	Empties the value of the criterion
restore	Puts back the initial value of the criterion
validate	Runs the validation of the criterion and shows its error
set-invalid	Marks the criterion as invalid with the message of the action
set-valid	Clears the validation error of the criterion
copy-criterion-value-clipboard	Copies the value of the criterion to the clipboard

More

• Criteria overview: the attributes every criterion shares and the other families of inputs.
• Full documentation of the criteria: every type, attribute, validation and example.
• XSD reference of the criteria element.