Create a File Upload Progress BarPRO

Using a combination of file upload and progress fields, you can show your website users the progress of a file upload. WS Form enables you to put the progress bar anywhere on your form for complete layout flexibility. The progress bar works when the form is submitted or saved.

Demo

WS Form - Upload Progress Demo

Tutorial

WS Form comes with a File Upload template on the Add New page. To add a progress bar to an existing form with a file upload field:

  1. Drag or click a Progress field anywhere on your form. You can add as many progress bars on your form as you wish (for example, on every tab).
  2. Click the settings icon on the Progress field.WS Form - File Upload Progress - Settings Icon
  3. Under ‘Source’ select ‘Upload Progress’.WS Form - File Upload Progress - Source Setting
  4. Click ‘Save’ and then click ‘Preview’ to test your form.

Hiding The File Upload Field

For a more seamless effect, you can also hide the file upload field when the form is submitted using conditional logic. An example of the conditional logic to achieve this is shown below:

WS Form - File Upload - Conditional Logic To Hide File Upload Field

Note that the file upload field is hidden by applying a class of ‘hidden’ to the field. This ensures that WS Form still submits the file data. The ‘Set Visibility: Hidden’ method would have excluded the file from the form submission.