File Upload
With a File Upload element, you give the user the ability to browse and select a file from their computer and upload it to your database. You can enforce file size and type. If the file is an image, you may choose to show a preview of the file.
In this topic, we cover the general properties for this element. Learn about other properties in the Introduction to Validation and Working with Form Elements.
| Property | Description |
|---|---|
| Field Name | This is the name used to reference the field and is also the name of the column heading in the submission bin. |
| Show Image Preview | Displays a preview of the uploaded images. For non-image uploads, the fine name is displayed. |
| Accept List | Select the type of files that the user will be allowed to upload. A validation error is shown if the file type selected to be uploaded does not match. |
| Max File Size | Set the maximum file size allowed for uploads. On modern browsers that support the HTML 5 File API, validation is enforced on the client side. For older browsers, where a file larger than the specified maximum may slip by, you can choose to either delete it or record it via the Remove Invalid Property. |
| Remove Invalid | When true, uploaded files, that exceed the maximum size settings or are not in the accepted file type list, will be deleted on upload. This setting is provided to accommodate older browsers where client side validation of file size and type are not supported. |
| Remove EXIF | Remove EXIF metadata from any images being uploaded. When images are uploaded from an iPhone, this setting should be set to true to avoid an issue with images rotating to landscape due to the EXIF metadata. (See picture below) |
| Resize Image |
Resize an uploaded image to the size specified. Default is false. When set to true, fields for width and height are available. If a user uploads a 4000 x 3000 image that should have been say, 200 x 300, the resize feature checks the dimensions of the uploaded file and determines which axis (x or y) more greatly overshoots the intended image size. It then resizes the image down to the opposite axis (the shorter axis) so that it's dimensions just fit within the targeted size. Going back to the larger axis... the function centers on that axis and trims off the ends so that the targeted image size is achieved. Interpolation is added as an argument to balance quality with performance. |
| Create Thumbnail |
When create thumbnail is set to true, a new field will be added to your database and a thumbnail created for the uploaded image. The thumbnail field will be named [fieldname]_thumbnail and will be visible in the database and available for use with the showImage() modifier function for layouts in emails, PDF's and workflows. If your using the subform element, the thumbnail can also be used in the table layout (when the upload is done in the subform and you want to display the thumbnail on the parent form) |
| Thumbnail Width | The width of the thumbnail |
| Thumbnail Height | The height of the thumbnail. |
| Icon | The icon for the upload button. |
| Tooltip | Enter a short help comment to display nearby when the user hovers over the element. |
| Caption | Enter the caption text, which appears either beside or above the element. |
| Multi-line Caption |
When the caption wraps, you may notice the line height is wrong. This is when you need to enable the multi-line feature by setting this property to true.
Note: Keep in mind that you can increase the caption width so that the caption text does not wrap.
|
| Admin Caption | This is the caption to use when viewing data via the submission bin record detail window. When left blank, the original caption is used instead. |
| Default value | Enter the text which will serve as the default entry until the user replaces the text. |
| Read Only | If set to true, the user cannot make any entries in this field. |
| Dependency | Create a dependency to hide or show this element based on a rule. The field becomes "dependent" on other values entered on the form. Learn more in Dependencies. |
| Hidden | Set this property to true if you want this element to be hidden. |
| Hide Mode | This property determines how the element is hidden and if it will collapse within the space it would otherwise occupy. |
0 Comments