Bit Form – Advanced File Upload field

The Advanced File Upload field in Bit Form is a feature that enables users to upload files to a form with various configuration options related to the uploaded file. This field provides a powerful and flexible way for users to upload files while giving administrators control over how those files are processed and managed.

⚙ General Settings

1. Field Key

In Bit Form, every field has a special identifier known as a Field Key. This field key uniquely identifies a field, it also helps to send data via email, PDF, store database, and PHP action hook. These keys are important in Success/Error Messages, WebHooks, Redirect Pages, Email Templates, Workflows, and Integrations.

2. Name

The Name is an HTML equivalent input field’s name, you can customize it easily according to your preferences. You can easily modify it to suit your needs.

A field’s name is like a special label used when you submit a form. For example, let’s say the field name is “text-1-5”. In this case, ‘text’ tells us the type of field it is, ‘1’ refers to the form ID, and ‘5’ means it’s the fifth-number field on the form.  This field name can be used for various purposes such as Fetch data from url parameter.

3. Field Label

You can set a proper name for the field that is considered a field label. This label name will appear on the front end of the form you will display. You can hide the field label if you want.

Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the field label. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.

4. Subtitle​

The subtitle is an additional piece of text that appears below the label of a field in a form. It offers further clarification or context to help visitors understand the purpose of the field.

Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the subtitle. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.

5. Admin Label

This field is designated for administrative use and allows an administrator to set a label name that will be displayed on the responses page.

6. Size & Position

It typically refers to the dimensions and placement of an input or output field within a user interface. It specifies the width and position, x-position, and w-width of the field on the screen or page.

7. Capture

The Capture feature is particularly helpful for mobile devices, allowing users to directly capture files using their device’s camera. The Advanced File Upload field offers several options for capturing files, including:

1. Off: Disables the capture feature, and users can only upload files from their device’s storage.
2. On: Enables the capture feature, allowing users to capture files directly from their device’s camera.
3. Use the Camera: Specifically for capturing image files, users can take a picture using their device’s camera, and the file will be uploaded directly.
4. Use the Environment Camera: Also for capturing image files, this option uses the rear-facing camera on the device, providing higher-quality images.

8. File Style

The File Style option in the Advanced File Upload field of Bit Form allows administrators to select a style for the file upload button, including a classic button style, a modern flat style, and an icon-only style. Here is the available list of File Style Panel Layout Remove Button Process Button Load Indicator Progress Indicator

Panel Layout: There are two options available for the panel layout of the Advanced File Upload field:

1. Compact: The Compact layout displays the upload button and the file list in a single line to the users.

2. Circle: The Circle layout positions the upload button in the center of a circular container and the file list around it to the users.

Remove Button: This option allows you to choose the position of the remove button that appears after a file has been selected. The admin can choose to place the button on the Left, Right, Center, or Bottom of the file preview according to their preferences.

Process Button: This option allows the admin to choose the position of the process button that appears after a file has been selected. You can choose to place the button on the Left, Right, Center, or Bottom of the file preview.

Load Indicator: This option shows a loading animation to the user while the file is being uploaded. You have the flexibility to position the indicator on the Left, Right, Center, or Bottom of the file preview.

Progress Indicator: This feature displays a progress animation to the user to indicate the progress of file upload. You can choose the position of the progress indicator on the Left, Right, Center, or Bottom of the file preview.

9. Basic​

Here are some basic features of an Advanced File Upload field:

Multiple file upload: This option allows users to upload multiple files at once. If this option is disabled, users will only be able to upload one file at a time.

Allow File Browse: Enabling this option allows users to select files from their computer when they click on the file upload field. A window will open, allowing them to browse and select the file(s) they wish to upload.

Drag n Drop: Enabling this option allows users to drag files and drop them into the file upload field, selecting them for upload without the need to use the file browse window.

Allow Copy and Paste of Files: This option allows users to copy files from their computer and paste them directly into the file upload field.

Allow Reorder Files: This option allows users to rearrange the order of the uploaded files. Users can simply click and drag the files to move them up or down the list to change their order.

Upload on Select: This option enables the automatic uploading of selected files as soon as they are selected by the user. This feature saves time and effort for users as they don’t need to click a separate upload button to start uploading files.

Full page droppable: This option allows users to drop files anywhere on a webpage to initiate file upload. By enabling this option, users can drag and drop files onto any part of the webpage, not just the designated file upload field. This can make the file upload process more efficient and user-friendly, as users don’t have to navigate to a specific field to upload files.

Labels Customization: This option provides the ability to customize labels that can offer specific and easy-to-follow instructions to users while they upload files. Placeholder: This option allows you to customize the text displayed in the file upload field before a file is selected.

1. Placeholder: This option allows you to customize the text displayed in the file upload field before a file is selected.
2. File Loading: This label is displayed when the file is being uploaded. You can customize this label to provide a message to the user indicating that the file is being uploaded.
3. Invalid Field: This label is displayed when the user has selected an invalid file type. You can customize this label to provide a message to the user indicating the type of files that are allowed.
4. File Waiting For Size: This label is displayed when the file is selected, but the file size is not yet available. You can customize this label to provide a message to the user indicating that the file size will be available soon.
5. FileSize Not Available: This label is displayed when the file size is not available. You can customize this label to provide a message to the user indicating that the file size is not available at this time.
6. File Load Error: This label is displayed when there is an error loading the file. You can customize this label to provide a message to the user indicating that there was an error loading the file.
7. File Processing: This label is displayed when the file is being processed. You can customize this label to provide a message to the user indicating that the file is being processed.
8. File Processing Complete: This label is displayed when the file processing is complete. You can customize this label to provide a message to the user indicating that the file processing is complete.
9. File Processing Aborted: This label is displayed when the file processing is aborted. You can customize this label to provide a message to the user indicating that the file processing was aborted.
10. File Processing Error: This label is displayed when there is an error processing the file. You can customize this label to provide a message to the user indicating that there was an error processing the file.
11. File Processing Revert Error: This label is displayed when there is an error reverting the file. You can customize this label to provide a message to the user indicating that there was an error reverting the file.
12. File Remove Error: This label is displayed when there is an error removing the file. You can customize this label to provide a message to the user indicating that there was an error removing the file.
13. Tap To Cancel: This label is displayed when the user can cancel the file upload. You can customize this label to provide a message to the user indicating that they can tap to cancel the file upload.
14. Tap To Retry: This label is displayed when the user can retry the file upload. You can customize this label to provide a message to the user indicating that they can tap to retry the file upload.
15. Tap To Undo: This label is displayed when the user can undo the file upload. You can customize this label to provide a message to the user indicating that they can tap to undo the file upload.
16. Button Remove Item: This label is displayed on the button that removes the file. You can customize this label to provide a message to the user indicating that they can use the button to remove the file.
17. Button Abort Item Load: This label is displayed on the button that aborts the file load. You can customize this label to provide a message to the user indicating that they can use the button to abort the file load.
18. Button Retry Item Load: This label is displayed on the button that retries the file load. You can customize this label to provide a message to the user indicating that they can use the button to retry the file load.
19. Button Abort Item Processing: This label is displayed on the button that aborts the file processing. You can customize this label to provide a message to the user indicating that they can.
20. Button Undo Item Processing: This label is displayed on a button that allows the user to undo the processing of a file. You can customize this label to provide a message to the user indicating that they can use the button to undo the processing of the file.
21. Button Retry Item Processing: This label is displayed on a button that allows the user to retry the processing of a file. You can customize this label to provide a message to the user indicating that they can use the button to retry the processing of the file.
22. Button Process Item: This label is displayed on a button that initiates the processing of a file. You can customize this label to provide a message to the user indicating that they can use the button to process the file.

Maximum File Admin can set a limit on the number of files that can be uploaded by the user with this option.

Maximum Parallel Upload The Maximum Parallel Upload feature in the advanced file upload field is a feature that allows you to upload multiple files at once, and it can be used to upload large amounts of data

10. File size validation​

By Enabling this option you can customize the file size limitations based on your requirements, which can help you prevent large or small files from being uploaded.

Min File Size: This option specifies the minimum file size that can be uploaded and displays an error message on the uploaded file if the selected file is too small. Also, you can change the error message to your preference. It is applicable only for a single file upload

Max File Size: This option specifies the maximum file size that can be uploaded and displays an error message on the uploaded file if the selected file is too large. Also, you can change the error message to your preference. It is applicable only for a single file upload

Max Total File Size: specifies the maximum total file size that can be uploaded across all selected files and displays an error message if the total size exceeds the specified maximum.

11. File type validation

Enabling this option allows administrators to restrict the types of files that can be uploaded by users. Administrators can also customize the error message that appears when a user attempts to upload a file that is not allowed, ensuring that users are aware of the file type restrictions.

Allowed File Mime Type: The Allowed File Mime Type option in Bit Form allows the administrator to select which file types are allowed to be uploaded through the form submission. The administrator can also add custom file types that are not listed in the dropdown. Each file type should be specified with its full extension, such as .pdf, .txt, etc. Admin can select multiple file types from the drop-down list Types are:

📁 AAC audio (.aac)
📁 AVI: Audio Video Interleave (.avi)
📁 Any kind of binary data (.bin)
📁 Windows OS/2 Bitmap Graphics (.bmp)
📁 Cascading Style Sheets (CSS)
📁 Comma-separated values (CSV)
📁 Microsoft Word (.doc)
📁 Microsoft Word (OpenXML) (.docx)
📁 Electronic publication (EPUB)(.epub)
📁 GZip Compressed Archive (.gz)
📁 Graphics Interchange Format (GIF)(.gif)
📁 HyperText Markup Language (HTML)(.htm .html)
📁 Icon format (.ico)
📁 iCalendar format (.ics)
📁 JPEG images (.jpeg .jpg)
📁 JavaScript (.js)
📁 JSON format (.json)
📁 Musical Instrument Digital Interface (MIDI) (.mid .midi)
📁 JavaScript module (.mjs)
📁 MP3 audio (.mp3)
📁 MP4 video (.mp4)
📁 MPEG Video (.mpeg)
📁 OpenDocument presentation document (.odp)
📁 OpenDocument spreadsheet document (.ods)
📁 OpenDocument text document (.odt)
📁 OGG audio (.oga)
📁 Opus audio (.opus)
📁 Portable Network Graphics (.png)
📁 Adobe Portable Document Format (PDF) (.pdf)
📁 Microsoft PowerPoint (.ppt)
📁 Microsoft PowerPoint (OpenXML) (.pptx)
📁 Rich Text Format (RTF) (.rtf)
📁 Bourne shell script (.sh)
📁 Scalable Vector Graphics (SVG) (.svg)
📁 Small web format (SWF) or Adobe Flash document (.swf)
📁 Tape Archive (TAR) (.tar)
📁 Tagged Image File Format (TIFF) (.tif .tiff)
📁 MPEG transport stream (.ts)
📁 Text, (generally ASCII or ISO 8859-n) (.txt)
📁 Microsoft Visio (.vsd)
📁 Waveform Audio Format (.wav)
📁 WEBM audio (.weba)
📁 WEBM video (.webm)
📁 WEBP image (.webp)
📁 Web Open Font Format (WOFF) (.woff)
📁 Executable File (.exe)
📁 XHTML (.xhtml)
📁 Microsoft Excel (.xls)
📁 Microsoft Excel (OpenXML) (.xlsx)
📁 XML (.xml)
📁 XUL (.xul)
📁 ZIP archive (.zip)
📁 3GPP audio/video container (.3gp)
📁 3GPP2 audio/video container (.3g2)

Invalid File Message Error: This option allows the admin to customize the error message that is displayed on the uploaded file when a user attempts to upload a file that is not of the accepted file type. By using this option, you can set a custom error message of your choice to be displayed on the uploaded file instead of the default error message.

File types Message Error: The message is shown to indicate the allowed file types.

12. Image Preview:

This feature allows users to show a preview of the image(s) being uploaded. It includes the following options:

Image Preview Min Height: This option allows the admin to set the minimum height for the image preview.

Image Preview Max Height: This option allows the admin to set the maximum height for the image preview.

Preview Height: This option allows the admin to set the exact height for the image preview. If you choose this option, the uploaded image will be displayed at the exact height specified.

13. Video/PDF Preview:

This option allows users to preview the PDF/ Video file before submitting the form. When enabled, users can view a preview of the PDF or video file and ensure it is the correct file before submitting it.

14. Image Crop​

By enabling this option the image will be cropped when the user uploads the file and it will crop based on the given Aspect Ratio.

Crop Aspect Ratio: This option allows the admin to set the aspect ratio for the image crop. The aspect ratio determines the width-to-height ratio of the cropped image.

15. Image Resize​

This option allows the admin to resize the uploaded image. Admin can specify the desired width and height of the image. Additionally, you can choose the resize mode which determines how the image will be resized to fit the specified dimensions.

Image Resize Width: Admin can specify the desired width of the image.

Image Resize Height: The admin can specify the desired height of the image.

Image Resize Mode: There are three options for the resize mode Cover, Force, and Contain.

16. Image Transform​

This option allows the admin to transform the output of the uploaded image. You can specify the output type such as JPG, and PNG, and also set the quality of the transformed image using Transform Output Quality.

Client Transforms: Client Transforms are additional image processing options available in Bit Form that can be applied to uploaded images. These options include:

1. Crop: Users can crop the uploaded image based on their preferences in the front end. They can define a specific region of the image to keep while discarding the rest. This allows for precise customization of the image’s appearance.
2. Resize: Users can adjust the dimensions of the uploaded image in the front end. They can specify the desired width and height, and the image will be resized accordingly.

17. Image Validate Size​

By enabling this option, the admin can restrict the size of images that can be uploaded. You can set minimum and maximum values for the image width and height and also define the minimum and maximum image resolution. This option provides flexibility to edit and modify the restrictions as per your preferences by clicking on the edit button.

1. Min Width: This option allows the admin to set the minimum width of the image that can be uploaded by a user. If the user selects an image with a width smaller than the specified minimum width, the selected file will generate an error and be highlighted in red.
2. Max Width: This option allows the admin to set the maximum width of the image that can be uploaded by a user. If the user selects an image with a width larger than the specified maximum width, the selected file will generate an error and be highlighted in red.
3. Min Height: This option allows the admin to set the minimum height of the image that can be uploaded by a user. If the user selects an image with a height smaller than the specified minimum height, the selected file will generate an error and be highlighted in red.
4. Max Height: This option allows the admin to set the maximum height of the image that can be uploaded by a user. If the user selects an image with a height larger than the specified maximum height, the selected file will generate an error and be highlighted in red.
5. Label Format Error Message: This option allows the admin to customize the error message that is displayed if the uploaded file is not in the correct format.
6. Too Small Error Message: This option allows the admin to customize the error message that is displayed if the uploaded image is smaller than the specified minimum size.
7. Too Big Error Message: This option allows the admin to customize the error message that is displayed if the uploaded image is larger than the specified maximum size.
8. Min Size Error Message: This option allows the admin to customize the error message that is displayed if the uploaded image does not meet the specified minimum size.
9. Max Size Error Message: This option allows the admin to customize the error message that is displayed if the uploaded image exceeds the specified maximum size.
10. Min Size Resolution: This option allows the admin to set the minimum resolution of the image that can be uploaded by a user. If the user selects an image with a resolution smaller than the specified minimum resolution, the selected file will generate an error and be highlighted in red.
11. Max Size Resolution: This option allows the admin to set the maximum resolution of the image that can be uploaded by a user. If the user selects an image with a resolution larger than the specified maximum resolution, the selected file will generate an error and be highlighted in red.
12. Resolution too low Error Message: This option allows the admin to customize the error message that is displayed if the uploaded image resolution is smaller than the specified minimum resolution.
13. Resolution too high Error Message: This option allows the admin to customize the error message that is displayed if the uploaded image resolution is larger than the specified maximum resolution.
14. Min Resolution Error Message: This option allows the admin to customize the error message that is displayed if the uploaded image does not meet the specified minimum resolution.
15. Max Resolution Error Message: This option allows the admin to customize the error message that is displayed if the uploaded image exceeds the specified maximum resolution.

18. Required​

The Required Field option allows you to make a form field mandatory for the user to fill out. You can also specify an error message to be displayed if the field is left blank. With the “Custom Error Message” option, you have the flexibility to customize the error message according to your needs. Additionally, you can add Leading and Trailing Icons to the error message for better visual representation.

Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the error message. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.

Asterisk Position: The asterisk symbol position indicating a required field can be set with this option. You can choose to display it before or after the field label and on the right or left side of the field.

19. Helper Text​

It offers further clarification or context to help visitors understand the purpose of the field. This option allows you to guide your user on what kind of information should be entered, any restrictions on the input, and any formatting requirements.

Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the helper text. It serves as a visual cues to help users understand the context of the text. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.

20. ReadOnly​

The read-only field option makes it possible to show information to visitors without giving them the ability to modify it. Visitors can only view the information and not edit it. This is helpful in cases where you want to display important information that should remain unchanged. By setting the field as read-only, the information remains unaltered and accurate.

21. Disabled​

The disables field option disables user input and interaction, ensuring the accuracy and integrity of form data by preventing the visitor from entering or changing any information in the form.

22. Hidden​

This option allows you to make the field hidden when the form is displayed on the front end.