File Upload

The File Upload element in Joget's Form Builder enables users to attach files to forms. Uploaded files are stored under [Joget Installation Directory]/wflow/app_formuploads. You can change the storage path by updating your JAVA_OPTS or adjusting settings in General Settings.

How to set a different storage path?

There are two ways to change the storage path of uploaded files:

1. Add -Dwflow.home=PATH to your JAVA_OPTS when starting Tomcat.
2. Set the Uploaded File Storage Base Path option in General Settings.

How does it work?

To see how the File Upload works. Follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click on the pencil icon on the Expenses Claim to open the App Composer.
   
   
3. Click Expense Claim Form, and you will be directed to the Form Builder. 
   
4. Hover the mouse over the File Upload element on the canvas entitled Attachments (e.g., Receipts, tickets, etc.) and click it.
5. Now configure the File Upload properties.
6. Remember to click Apply Change and Save the changes.
   
7. To see it working, head back to the App Composer and click the Launch button in the UI column.
8. Click Create a New Expense Claim button on the Dashboard, fill up the necessary details and click Continue Next Screen. 
9. Here you will find the file upload. Click inside the box to upload or drag and drop files inside the box.

Configure file upload

Configuring the File Upload element involves setting labels, IDs, validation rules, and UI options to ensure proper file handling and user interaction.

• Label: Element label to be displayed to the end-user.
• ID: Element ID. By declaring it as a receipt, a corresponding database table column c_receipt will be created. See Form Element for more information about defining the ID and a list of reserved IDs.

Advanced options

These options allow for further customization and functionality of the File Upload element.

Data

Here you define various settings related to data validation and file management.

• Validator: Attach a Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.
• Maximum File Size (KB): Maximum file size in kilobytes. For example, for a 10 MB limit, enter 10240.
• Error Message (File size limit exceeded): An error message is displayed when the file size exceeds the limit.
• File Type (.pdf;.doc): Accepted file type extensions, separated by semicolons. For example, .pdf;.doc
• Error Message (File type mismatch): An error message is displayed when the file type does not match the accepted types.
• Delete actual file during overwrite or remove?: Determines if the actual file will be deleted when removed or overwritten.

Image resize

These settings allow you to control the resizing of uploaded images.

• Maximum Width (px): Maximum width for resizing images before uploading.
• Maximum Height (px): Maximum height for resizing images before uploading.

• Quality (Max 1.0): Set the quality of the resized image.
• Method: Sets how images should be scaled down if both dimensions are provided.
  There are only two methods: 
  
  • Contain: Default setting to fit within the dimensions.
  • Crop: Crop the image to fit the dimensions.

Permission

• Permission: Manage who can access the uploaded files. Options include:

  • Logged In Users
  • Public
  • Custom

  For more information, see Permission Control.

UI

These options control the user interface aspects of the File Upload element.

• Size: Specifies the width, in characters, of an <input> element.
• Allowed multiple files upload?: When checked, multiple files can be uploaded.
• Readonly: Determines if one can upload a file.
• Drop zone padding: Determines the extra padding size for the larger drop zone. For example, 50px or 5%
• Download as Attachment: Determines the download behavior.

Related tutorial

For more information on file uploads, see the Bulk Download File Attachments tutorial.