File Input: selected files and image preparation
Let the user select local files and inspect them before a form upload.
Let the user select local files and inspect them before a form upload.
Before you begin
Section titled “Before you begin”- An App Connect page; a named form when the values will be submitted.
Selection is not an upload
Section titled “Selection is not an upload”File Input gives the page access to files the user selected. Put it inside a FormData form connected to an upload action to send them. A browser filename is not a server path or proof of a completed upload.
Configure selection and metadata
Section titled “Configure selection and metadata”ID is the binding name; Name must match the upload field expected by the action. Multiple selects the input-file-multiple runtime. Static Value and inherited Set Value cannot select a local file: the installed file setter rejects programmatic values.
| Control or value | Meaning and use |
|---|---|
| Single selection | Read uploadInput.file: name, size in bytes, type, date and an asynchronously resolved dataUrl. No selection is null. |
| Multiple selection | Read uploadInput.files, an array of metadata objects. Repeat this array for a selected-file list. |
| Accept / Required / validation | Use browser hints and client checks to guide selection. Validate size, type, count and destination again in the server upload action. MIME/type metadata from the browser is not a trusted content inspection. |
| Disable / Focus / Validate | Inherited form actions. Disabling omits the control from normal submission. The Validate action requires the validation helper. |
Optional browser image preparation
Section titled “Optional browser image preparation”Max Width and Max Height downscale images that exceed those limits while preserving aspect ratio. They do not upscale smaller images. Type chooses PNG, JPEG or WebP conversion. Quality is passed to canvas encoding as a percentage divided by 100, when a resize or type conversion runs. Quality alone does not trigger a re-encode in the installed implementation.
Wait for the file you intend to send
Section titled “Wait for the file you intend to send”Image preparation is asynchronous and replaces the selected File objects after conversion. Initial metadata can refer to the original image. Test with an oversized image and confirm the resulting dimensions/type before using automatic submission. The installed multiple-image error branches can leave preparation unfinished; do not promise unconditional processing completion.
Example: inspect one text file before uploading
Section titled “Example: inspect one text file before uploading”Select a small .txt file and bind a label to uploadInput.file.name. Verify size and name, then submit the enclosing form to the matching server upload action. Use the server response’s stored filename/path for later database mapping; the selected local name may change on upload.
Keep previews temporary
Section titled “Keep previews temporary”dataUrl is a browser preview representation loaded asynchronously, not a permanent public URL. File selection and browser-side image preparation do not replace server upload validation or image processing.
Continue with a complete form workflow
Section titled “Continue with a complete form workflow”Use the related workflow to connect these controls to data and a verified submit result.
Check your result
Section titled “Check your result”You can configure the control, use its actual value shape and verify the example without confusing page state with a submitted or saved value.