MultiFileUploader - Drag & Drop Uploader
The MultiFileUploader special field creates a form element that can be used to upload multiple files in a single form submission. With support for drag & drop, clientside resizing and validation, the MultiFileUploader is a powerful addition to your forms.
In this topic, we cover the general properties for this element. Learn about other properties in the Introduction to Validation and Layout Basics. Note that the MultiFileUploader has it's own internal validation for minimum and a maximumnumber of files that can be uploaded (see below).
Improved Performance
The MultiFileUploader is faster than our standard File Upload field because media is uploaded as soon as it is selected. In this way, files can be uploaded while the user is still filling out the form. By the time they finish the form and click submit, the media may have already been uploaded - removing the delay that can occur with the Standard File Upload field which uploads all selected files only when the submit button is clicked.
ShowImage() & FileLink() Modifier Functions
When you use the showImage(), or FileLink() modifier functions with a MultiFileUploader field, the output is a set of images/files instead of a single file. Note, that the showImage() modifier show only be used when images are being uploaded (and typically restricted via the Accept List or Allowed File Type Properties)
| Property | Description |
|---|---|
| Allowed File Types | Select the type of files that the user will be allowed to upload. This option is the best choice when filtering by a group of file types. For example, if you wanted to only allow images, choose "image" here instead of selecting each specific mime-type under the Accept List property. |
| Accept List | Select the mime-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 Size | Determines the maximum allowed file size for uploaded files. |
| Show Upload | True to show the Upload button below the drag and drop zone. |
| Button Text | The text for the upload button (when Show Upload is true). |
| Show Zoom | True to show the zoom icon next to each thumbnail. The zoom window opens a lightbox with the media in full size view. |
| Multiple | Allow multiple files to be uploaded |
| Layout | Choose full or compact. Determines the size of the preview layout. |
| Resize Image | True to resize the image. This form element does resizing on the client side, which can significantly reduce the time it takes to upload pictures. We recommend using this setting for the best performance. |
| Resize Preference | Preference to resize the image based on width or height. Defaults to width. This property is parsed only when resizeImage is true. If set to width, the maxImageWidth property is first tested and if the image size is greater than this, then the image is resized to Resized Image Width. The image height is resized and adjusted in the same ratio as width. In case, the image width is already less than maxImageWidth then the maxImageHeight property is used to resize and width is adjusted in the same ratio. This will behave conversely when resizePreference is set to height - the maxImageHeight will be first tested against image height and then the rest of steps will be similarly parsed with preference given to height instead of width as before.' |
| Max Image Width | The maximum allowed image height in px if you are uploading image files. Defaults to null which means no limit on image height. Note that if you set resizeImage property to true, then the entire image will be resized within this height (depending on resizePreference). |
| Max Image Height | The maximum allowed image height in px if you are uploading image files. Defaults to null which means no limit on image height. Note that if you set resizeImage property to true, then the entire image will be resized within this height (depending on resizePreference). |
| Delayed Commit | When editing a record, delayed edit mode indicates that images uploaded or deleted will only be committed once the form is submitted. Set this to false to commit changes without waiting for the form to be submitted. |
| Max Files | The maximum number of files to accept. 0 for any. Logifroms places a max of 10 files per upload. |
| Min Files | The minimum number of files to accept. 0 for any |
| Browse on Zone Click | True to open file browse window when the upload zone is clicked. |
| Drop Zone Title | The title for the drop zone area |
| Drop Zone Click Title | True to initate the browse window when clicked |
| Height | Height of the Drop Zone |
| Create Thumbnail |
When create thumbnail is set to true, a new field will be added to your database and a thumbnail created for the first image in the set of uploaded images. 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. |
| Field Name | This is the name used to reference the field and is also the prefix for the subform column headings in the submission bin. |
| Caption | Enter the caption text, which appears either beside or above the element. |
| Tabindex | Set the tab order for the field. Use a negative value to skip tabbing. You must genereate a preview to test the tab order. |
| 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. |
| Disabled | Set this property to true if you want this element to be disabled. |
| Responsive Settings | Click the button to configure settings for displaying on mobile devices. You must preview the form in a new window or a mobile device to see these changes. |
| Tooltip | Enter any help text that will be shown beside the field when the user rolls over the field. |
| Multi-Line Caption | Set this property to true to adjust the height if the field caption is more than one line long. |
| Hide Caption | Set this property to true to hide the field's caption and collapse the space it occupies. |
| Admin Caption | Click to create an alternate caption to use for administrative purposes when viewing the record in the submission bin and in record details mode. |
| Hide Mode | Determines how the element is hidden and if it will collapse the space it occupies. Set this property to Block if you want the space on screen to remain. |
Have more questions? Submit a request
Please sign in to leave a comment.
0 Comments