View this page in the latest version of Appian. File Upload Component Share Share via LinkedIn Reddit Email Copy Link Print On This Page Function a!fileUploadField( label, labelPosition, instructions, helpTooltip, target, fileNames, fileDescriptions, maxSelections, value, saveInto, required, requiredMessage, disabled, validations, validationGroup, buttonStyle, buttonSize, accessibilityText, showWhen, uploadMethods, buttonDisplay, placeholder, showVirusScanMessage, marginAbove, marginBelow, documentActions, showBorder, dropZoneStyle ) Allows users to upload one or more files. To upload files outside of a start form or task, use a!submitUploadedFiles() in the saveInto parameter of a submit button or link. Permitted file extensions can be controlled via the File Upload settings in the Admin Console. See also: Document data type About Document Management Parameters Name Keyword Types Description Label label Text Text to display as the field label. Label Position labelPosition Text Determines where the label appears. Valid values: "ABOVE" (default) Displays the label above the component. "ADJACENT" Displays the label to the left of the component. "COLLAPSED" Hides the label. The label will still be read by screen readers; see accessibility considerations for more information. "JUSTIFIED" Aligns the label alongside the component starting at the edge of the page. Instructions instructions Text Supplemental text about this field. Help Tooltip helpTooltip Text Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is "COLLAPSED". Target target Any Type Determines the eventual location of the uploaded files. If a folder is provided, the document is saved to that folder. If a document is provided, a new version of that document is created. If a record type is provided, the document is saved to the folder associated with that record type. Learn more about this parameter. File Names fileNames Text Determines the names for the files. When not provided, the uploaded file names are used. Access name, size, and extension of each file using the variables fv!file.name, fv!file.size, and fv!file.extension. Access the index of each file using the variable fv!index. File Descriptions fileDescriptions Text Determines the descriptions for the files. When not provided, the descriptions of the new files are empty. Access name, size, and extension of each file using the variables fv!file.name, fv!file.size, and fv!file.extension. Access the index of each file using the variable fv!index. Maximum Selections maxSelections Number (Integer) Maximum number of allowed files. Once this number is reached, further uploads are blocked until a file is removed. Selected Files value List of Document The files associated with this field. Save Files To saveInto List of Save One or more variables that are updated with the files when the user uploads files. Removing all uploaded files saves a null document. Use a!save() to save a modified or alternative value to a variable. Required required Boolean Determines if a value is required to submit the form. Default: false. Required Message requiredMessage Text Custom message to display when the field's value is required and not provided. Disabled disabled Boolean Determines if the field should display as potentially editable but grayed out. When files are present in this state, they may not be deleted. Default: false. Validations validations List of Text String Validation errors to display below the field when the value is not null. Access the names, sizes, and extensions of the uploaded files using the variables fv!files.name, fv!files.size, and fv!files.extension. Validation Group validationGroup Text When present, the requiredness of the field is only evaluated when a button in the same validation group is pressed. The value for this parameter cannot contain spaces. For example, “validation group” is not a valid value. You need to add an underscore between words: “validation_group”. See the following recipes for more information: Configure Buttons with Conditional Requiredness Validation Groups for Buttons with Multiple Validation Rules' Button Style buttonStyle Text Determines the style of the upload button. Valid values: "NORMAL" Displays the label and border in the accent color. "PRIMARY" Displays the label in white on an accent color background. "SECONDARY" (default) Displays the label and border in gray. "LINK" Displays the label in the accent color and has no border until focused. Button Size buttonSize Text Determines the size of the upload button. Valid values: "SMALL" (default), "STANDARD", "LARGE". Accessibility Text accessibilityText Text Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. Show When showWhen Boolean Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true. Upload Methods uploadMethods List of Text (Mobile only) Determines which mobile upload methods are displayed to users. If one method is specified, the upload button will be customized. Multiple may be applied. If value is null, all methods are provided. Valid values include: null (Default) "SIGNATURE" "CAMERA" "CHOOSE_PHOTO" "CHOOSE_FILE" Button Display buttonDisplay Text Determines if the file upload will display a button with a label or an icon. Valid values: "LABEL", "ICON", "LABEL_AND_ICON". Auto default: Uses "LABEL" on web and "LABEL_AND_ICON" on mobile. Placeholder placeholder Text Text to display when no file is uploaded. Default: "Drop files here". Show scanning for viruses message showVirusScanMessage Boolean Determines whether the "Scanning for viruses" message appears during file upload. When set to false, the message is hidden, but the file is still scanned for viruses. An error message will still appear if real-time virus scanning is enabled and the uploaded file contains a virus. Default: true. Margin Above marginAbove Text Determines how much space is added above the component. Valid values: "NONE" (default) "EVEN_LESS" "LESS" "STANDARD" "MORE" "EVEN_MORE" Margin Below marginBelow Text Determines how much space is added below the component. Valid values: "NONE" "EVEN_LESS" "LESS" "STANDARD" (default) "MORE" "EVEN_MORE" Document Actions documentActions List of Text String A list of actions that users can perform on the uploaded files. By default, users can only upload files. Valid values: "DOWNLOAD", "PREVIEW", "EDIT_NAME", "EDIT_DESCRIPTION". This parameter doesn't apply to Appian Mobile or Appian for Windows. Show Border showBorder Boolean Determines whether uploaded files display with an outer border. By default, this parameter is set to true, unless the component is used within an editable grid. Drop Zone Style dropZoneStyle Text Determines the style of the zone where users can drag and drop files to upload. This includes whether a button displays and how big the drop zone is. Valid values: "COMPACT" (default), "EXPANDED". Usage considerations Using the target parameter Depending on how you're managing documents, you'll configure this parameter differently. If you're using: A record type to manage documents, reference the document management record type in the target parameter to automatically store documents in the document folder for that record type. See an example below. A folder to manage documents, use a constant to reference the document folder in the target parameter. Give users permission to the target Depending on how you're managing documents, users must have the following permission to submit an uploaded file: If you're using a record type to manage the documents, users must have at least Viewer permission to the record type. If you're using a folder to manage the documents, users must have at least Editor permission to the target folder or document. If users are uploading documents in a portal, give the portal service account Editor permissions to the target folder or document. File submission will be canceled if there are any errors when saving a new document or version of a document. Uploading files Users can upload files in any of the following ways: Click UPLOAD to browse and select files. Click the upload area and paste files from the clipboard. Drag and drop files into the upload area. Tip: Consider setting the dropZoneStyle parameter to "EXPANDED" to give users a larger area to drop files in. Preview, download, and edit document properties You can use the documentActions parameter in the file upload component to allow users to preview, edit, and download their uploaded documents before submitting. This parameter doesn't apply to Appian Mobile or Appian for Windows. Caution: If you configure "EDIT_NAME" or "EDIT_DESCRIPTION" in the documentActions parameter, user edits will override any values set in the fileNames and fileDescriptions parameters. To avoid conflicts, don't use both approaches together. When you use the documentActions parameter, the icon will appear next to any uploaded file, which allows users to perform a document action. When users edit document properties using "EDIT_NAME" or "EDIT_DESCRIPTION", the changes are only reflected in the file upload component before the form is submitted. Other components that reference the document—such as those using the document() function—will not reflect the updated name or description until after submission. Similarly, downloading the file before submission will use the original file name, not the edited name. Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close Customize document previews and edits To customize how users preview, download, or edit document properties, you can leave the documentActions parameter null and instead create a custom layout that uses the following functions: Use the document() function to allow users to review and edit certain document properties before submitting. Add a document viewer component or image component to allow users to preview their uploaded document inline. Add a document download link to allow users to download their uploaded document so they can verify it's the correct file. See the Upload Multiple Documents and Edit Document Properties recipe for an example using these functions with uploaded files. If enabled in Admin Console, uploaded files are scanned for viruses If real-time virus scanning is enabled for file uploads in the Admin Console, the uploaded file will always be scanned for viruses, regardless of whether the virus scanning message is shown. Uploaded file size limit In portals, the size limit for uploaded files is 10 MB. Everywhere else, the file size limit is 1GB. Some JPEG images are resized on upload The file size may change when you upload a JPEG image that has a non-standard orientation, which is common in photos taken on mobile devices such as iPhones. When this happens, Appian automatically rotates the image to the correct orientation and re-saves it, which changes its file size. For high-resolution JPEG images, Appian may also scale the image down during this process, which reduces its dimensions and resolution. Some characters in file names are replaced The following characters in filenames are replaced by underscores _ after submitting the file upload: \ / " ; : | ? ' < > *. Uploading new versions of multiple files The file upload component cannot be used to upload new versions of multiple files. Instead, use one component for each file to replace. Saving a task as a draft with an uploaded file If a user has uploaded a file to a task, they won't be able to save the task as a draft unless it is an offline-enabled task that they are viewing on Appian Mobile. They can remove the uploaded files to save the task as a draft. Submitting files When files are uploaded in the file upload component, they are saved to a temporary folder. They are not saved to the target until they are submitted. In start forms and tasks, on the button used to submit the form, make sure that the submit parameter set to true. When this button is clicked, the uploaded files will be saved to the target. Outside of start forms and tasks, use a!submitUploadedFiles() in the saveInto parameter of a button or link. This button or link could be used to submit the files, as in this a!submitUploadedFiles() example, or the entire form, as in this example. When this button is clicked, the uploaded files will be saved to the target folder. Uploaded files are stored as temporary documents until submission When a file is uploaded, the component updates with a temporary document representing the uploaded file. Between the upload and the submission, the file on the server is an inactive temporary file. You can access file metadata using the fv! variables described in the File Name, File Description, and Validations parameters. For additional ways to access and update document properties before submission, see Preview, download, and edit document properties. If a file is uploaded but is never submitted, the temporary file is automatically deleted after 30 days. Avoid saving unnecessary files In a start form or task For a start form or task, both the cancel and submit buttons will usually have the submit parameter set to true. As soon as one of these buttons are clicked, any uploaded files will be saved to their target. To avoid saving files from a canceled form, configure the cancel flow in the process model to handle the unnecessary files. If the target is a folder, delete any uploaded files. If the target is a document, revert the file upload via a new version of the document. Outside of a start form or task If you are using the file upload component outside of a start form or task, use a!submitUploadedFiles() in the saveInto parameter of a button or link. Do not use it in the file upload component's saveinto parameter. This ensures that the file is only saved to the target when the user is ready to submit it. See a!submitUploadedFiles() for more information. For portals, test the file upload in a published portal To make sure files will be uploaded correctly in a portal, publish the portal and test the file upload on the portal website. The file may seem to submit correctly when you test it in the interface object, but it may not work in the portal itself. For example, if the portal service account doesn't have Editor permissions to the target folder, you will see an error in the portal, but not in the interface object. See a!submitUploadedFiles() for more information on testing and troubleshooting uploading documents in portals. Appian Mobile and Appian for Windows considerations Parameters that are only supported in the Appian Mobile app: The uploadMethods parameter. This parameter allows you to limit the upload methods a mobile user has access to when tapping an upload button. For example, this can be helpful to ensure users do not upload photos of a signature instead of drawing their signature within the application. Parameters that are not supported in the Appian Mobile or Appian for Windows app: The documentActions parameter. Using fv! variables These examples demonstrate how to use the fv! variables available in the File Name, File Description, and Validations parameters to set file metadata or create complex validations. Add one of the following parameter configurations to a file upload component to achieve the desired behavior. Swap spaces for underscores in file names 1 fileNames: substitute(fv!files.name, " ", "_") Set file descriptions to a value plus file index 1 fileDescriptions: "Application ABC-123 attachment " & fv!index All files must be PDFs 1 2 3 4 5 6 7 8 9 validations: a!localVariables( local!invalidExtensions: difference(upper(fv!files.extension), "PDF"), if( length(local!invalidExtensions) > 0, "Attachments must be pdf files. Remove: " & index(fv!files, "name", wherecontains(local!invalidExtensions, upper(fv!files.extension)), {}), "" ) ) No files may be PDFs 1 2 3 4 5 6 validations: if( contains(upper(fv!files.extension), "PDF"), "Attachments must not be pdf files. Remove: " & index(fv!files, "name", wherecontains("PDF", upper(fv!files.extension))), "" ) Files may only be PNG or JPG 1 2 3 4 5 6 7 8 9 validations: a!localVariables( local!invalidExtensions: difference(upper(fv!files.extension), { "PNG", "JPG" }), if( length(local!invalidExtensions) > 0, "Attachments must be images. Remove: " & index(fv!files, "name", wherecontains(local!invalidExtensions, upper(fv!files.extension)), {}), "" ) ) Files must be larger than 5MB 1 2 3 4 5 6 validations: if( or(fv!files.size < 5000000), "Attachments must be at least 5MB. Remove: " & index(fv!files, "name", where(fv!files.size < 5000000), {}), "" ) Files must be smaller than 5MB 1 2 3 4 5 6 validations: if( or(fv!files.size > 5000000), "Attachments may not exceed 5MB. Remove: " & index(fv!files, "name", where(fv!files.size > 5000000), {}), "" ) Up to five files are allowed 1 validations: if(length(fv!files) > 5, "Only 5 attachments are allowed", "") Exactly five files are required 1 validations: if(not(length(fv!files) = 5), "5 files must be attached", "") At least five files are required 1 validations: if(length(fv!files) < 5, "There must be at least 5 attachments", "") Examples To experiment with examples, copy and paste the expression into an interface object. File upload in a start form or task This example shows how to use the file upload component in an interface that will be used in a start form or task. This example also includes the document() function, which will allow users to edit the document name and add a description before submitting the form. Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close This expression includes a rule input (ri!orderDocument) set to the AR Order Document record type, which is a document management record type. Note: For the purposes of this example, we're just illustrating how to configure a file upload component using a record type. In most scenarios, documents will be uploaded alongside other application data (like uploading documents for a specific a order). See the Upload Multiple Documents and Edit Document Properties recipe for an example creating a record and uploading related documents. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 a!formLayout( titleBar: a!headerTemplateFull( title: "Upload a Document", secondaryText: "Edit the file name and description before submitting", ), isTitleBarFixed: true, contents: { a!cardLayout( contents: { a!localVariables( /* By default, document properties are hidden when a user uploads a document */ local!expandDetails: false, a!sectionLayout( label: "Document", labelSize: "EXTRA_SMALL", labelColor: "STANDARD", contents: a!cardLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!fileUploadField( label: "Document", labelPosition: "ABOVE", target: recordType!AR Order Document, /* This example only allows users to upload one document */ maxSelections: 1, required: true, value: ri!orderDocument[recordType!AR Order Document.fields.documentId], saveInto: { ri!orderDocument[recordType!AR Order Document.fields.documentId], /* If the user updates the name, save the value */ a!save( ri!orderDocument[recordType!AR Order Document.relationships.documentProperties.fields.name], document(ri!orderDocument[recordType!AR Order Document.fields.documentId], "name")), /* If the user adds a description, save the value */ a!save( ri!orderDocument[recordType!AR Order Document.relationships.documentProperties.fields.description], document(ri!orderDocument[recordType!AR Order Document.fields.documentId], "description")) }, fileNames: ri!orderDocument[recordType!AR Order Document.relationships.documentProperties.fields.name], fileDescriptions: ri!orderDocument[recordType!AR Order Document.relationships.documentProperties.fields.description], marginBelow: "NONE", dropZoneStyle: "COMPACT" ) ), /* Allow users to remove the uploaded document */ a!sideBySideItem( showWhen: a!isNotNullOrEmpty(ri!orderDocument[recordType!AR Order Document.fields.documentId]), item: a!imageField( size: "ICON", images: a!documentImage( document: a!iconIndicator( icon: "REMOVE" ), altText: "Remove Document", link: a!dynamicLink( saveInto: { a!save(ri!orderDocument[recordType!AR Order Document.fields.documentId], null()), a!save(local!expandDetails, false()), } ) ) ), width: "MINIMIZE" ) }, alignVertical: "MIDDLE", spacing: "STANDARD", marginBelow: "NONE" ), a!sectionLayout( showWhen: a!isNotNullOrEmpty(ri!orderDocument[recordType!AR Order Document.fields.documentId]), contents: a!richTextDisplayField( accessibilityText: if(local!expandDetails, "Hide document properties", "View and edit document properties"), labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: if(local!expandDetails, "angle-down-bold", "angle-right-bold"), link: a!dynamicLink( saveInto: a!save(local!expandDetails, not(local!expandDetails)) ), linkStyle: "STANDALONE", color: "SECONDARY", size: "SMALL" ), a!richTextItem( text: " " ), a!richTextItem( text: "Properties", link: a!dynamicLink( value: true, saveInto: a!save(local!expandDetails, not(local!expandDetails)) ), linkStyle: "STANDALONE", color: "#636363", size: "STANDARD", style: "PLAIN" ) }, marginBelow: if(local!expandDetails, "STANDARD", "NONE") ), divider: "ABOVE", marginBelow: "LESS" ), a!columnsLayout( columns: { a!columnLayout( contents: { a!textField( label: "Name", required: true, value: ri!orderDocument[recordType!AR Order Document.relationships.documentProperties.fields.name], saveInto: ri!orderDocument[recordType!AR Order Document.relationships.documentProperties.fields.name], ), a!paragraphField( label: "Description", value: ri!orderDocument[recordType!AR Order Document.relationships.documentProperties.fields.description], saveInto: ri!orderDocument[recordType!AR Order Document.relationships.documentProperties.fields.description], ) }, width: "MEDIUM_PLUS" ) }, showWhen: local!expandDetails, marginBelow: "NONE" ) }, padding: if(a!isNullOrEmpty(ri!orderDocument[recordType!AR Order Document.fields.documentId]), "NONE", "STANDARD"), showBorder: a!isNotNullOrEmpty(ri!orderDocument[recordType!AR Order Document.fields.documentId]) ) ) ), }, shape: "SEMI_ROUNDED", padding: "MORE", style: "NONE" ) }, buttons: a!buttonLayout( primaryButtons: { a!buttonWidget( label: "Submit", /* If you don't use this interface in a start form or task, */ /* replace submit: true with saveInto: a!submitUploadedFiles() */ submit: true, validate: true, style: "SOLID" ) }, secondaryButtons: { a!buttonWidget( label: "Cancel", submit: true, validate: false, saveInto: ri!cancel, style: "OUTLINE", value: true ) } ), backgroundColor: "#F6F7F9", showTitleBarDivider: false, contentsWidth: "FULL" ) File upload outside a start form or task This example shows how to use the file upload component outside of a start form or task using a!submitUploadedFiles() in the saveInto parameter of a button. Tip: Keep in mind that if you use this interface in a start form or task, on the Submit button you would need to replace saveInto: a!submitUploadedFiles() with submit: true. See File upload in a start form or task for more information. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 a!localVariables( local!file, local!submissionSuccessful, local!errorCode, { a!fileUploadField( label: "File Upload", labelPosition: "ABOVE", saveInto: local!file, value: local!file, maxSelections: 1, /* Replace this with a constant of type Folder in your environment */ target: cons!AS_DOCUMENTS_FOLDER_POINTER ), a!buttonArrayLayout( buttons: { a!buttonWidget( label: "Submit", style: "SOLID", /* If you don't use a!submitUploadedFiles(), the signature will not be uploaded */ saveInto: a!submitUploadedFiles( onSuccess: a!save(local!submissionSuccessful, true), onError: { a!save(local!submissionSuccessful, false), a!save(local!errorCode, fv!error) } ) ) }, align: "END" ) } ) File upload with the icon style and no files Use the interactive editor below to test out the example code. To test out different file upload styles and placeholder texts, change the value of the buttonDisplay parameter to "LABEL_AND_ICON" and enter a different text value for the placeholder parameter. { a!fileUploadField( label: "Upload Cover Letter", labelPosition: "ABOVE", placeholder: "Drop cover letter here to upload", saveInto: {}, validations: {}, buttonDisplay: "ICON", showVirusScanMessage: false ) } File upload with preview, download, and edit actions This example shows how to use the documentActions parameter to allow users to preview, download, and edit document properties before submitting a form. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { a!fileUploadField( label: "File Upload", labelPosition: "ABOVE", target: recordType!RE Order Document', value: ri!document[recordType!RE Order Document.fields.documentId], saveInto: ri!document[recordType!RE Order Document.fields.documentId], documentActions: { "DOWNLOAD", "PREVIEW", "EDIT_NAME", "EDIT_DESCRIPTION" }, dropZoneStyle: "EXPANDED" ) } Single file upload This example uses a record type to manage documents, so the expression includes a rule input (ri!candidateDocument) set to the Candidate Document record type. The expression in this example will display the following: 1 2 3 4 5 6 7 8 9 a!fileUploadField( label: "Cover Letter", /* Replace this with a record type reference in your environment */ target: recordType!Candidate Document, maxSelections: 1, value: ri!candidateDocument[recordType!Candidate Document.fields.document], saveInto: ri!candidateDocument[recordType!Candidate Document.fields.document], dropZoneStyle: "COMPACT" ) Signature-capture only field on the Appian Mobile application This example allows Appian Mobile users to tap a "Signature" file upload button to draw their signature. Based on this expression, Appian Mobile users cannot use other upload methods such as taking a photo. 1 2 3 4 5 6 7 8 9 10 11 12 a!localVariables( local!signature, a!fileUploadField( label: "Signature", /* Replace this with a constant of type Folder in your environment */ target: cons!FOLDER_CONSTANT, maxSelections: 1, value: local!signature, saveInto: local!signature, uploadMethods: "SIGNATURE" ) ) Feature compatibility The table below lists this component's compatibility with various features in Appian. Feature Compatibility Note Portals Compatible Offline Interfaces Compatible Sync-Time Custom Record Fields Incompatible Real-Time Custom Record Fields Incompatible Custom record fields that evaluate in real time must be configured using one or more Custom Field functions. Process Reports Incompatible Cannot be used to configure a process report. Process Events Incompatible Cannot be used to configure a process event node, such as a start event or timer event. Process Autoscaling Incompatible Cannot be used in autoscaled processes. Event Consumer Filter Conditions Compatible Can be used in filter conditions. Event Consumer Event Handlers Compatible Can be used in event handler expressions. Old versions There are older versions of this interface component. You can identify older versions by looking at the name to see if there is a version suffix. If you are using an old version, be sure to refer to the corresponding documentation from the list below. Old Versions Reason for Update a!fileUploadField_17r1 Multiple file upload is now supported directly within the component. This removes the need to generate many individual file upload fields. To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page. Related recipes The following recipes include usage of the File Upload Component. Connect Document Viewer to an AI Chat Response: This pattern illustrates how to connect a!documentViewerField component to an AI chat response. Upload Multiple Documents and Edit Document Properties (Document Management, Records): Build a form that allows users to create a record and upload related documents. Users can edit the document name and add a document description before submitting the form. Upload Multiple Documents in an Editable Grid (Document Management, Records): Build a form that allows users to create a record and upload related documents in an editable grid. Upload and rename a file (Document Management, Records): Allow users to upload and rename a file. Feedback Was this page helpful? SHARE FEEDBACK Loading...