Drag & Drop File Upload

The Drag and Drop File Upload block provides flexible file upload functionality for forms. It supports both drag-and-drop upload for all users and integration with the WordPress Media Library for logged-in users. Key features include image resizing and quality control before upload, as well as customizable file storage options.

The block field is available if the Drag & Drop File Upload JetFormBuilder PRO Addon is installed and activated.

The Drag and Drop File Upload block can be added by pushing the “+” button on the WordPress Dashboard > JetFormBuilder > Add New Form page.

drag and drop file upload block

The Drag and Drop File Upload block has two sections: Settings and Styles.

The Settings of the block are divided into the General, Field, Image Size & Quality, Labels, and Advanced groups of settings.

drag and drop file upload block settings tab

General Settings

Among the General settings are the following fields:

drag and drop file upload block general settings
  • FIELD LABEL 一 a text field that is intended to insert the field label;
  • FORM FIELD NAME 一 a text field that is used to insert the ID of this field. By default, this value is added from the FIELD LABEL value, but it can be changed if needed;
  • FIELD DESCRIPTION 一 a non-required text field that is intended to insert a description displayed under the field.

Field Settings

This tab contains the following settings:

drag and drop file upload block fields settings
  • USER ACCESS — a dropdown to specify what user roles can use this field;
  • Enable Drag-n-Drop Upload UI — a toggle enabled by default. Activates the drag-and-drop upload interface. Note: at least one upload method must be enabled — either this one or the Enable WP Media Library UI below;
enable drag-n-drop upload ui toggle
  • Enable WP Media Library UI — a toggle disabled by default. Enables the native WordPress Media Library interface for file uploads. This option is available only to logged-in users;
enable wp media library ui toggle
  • Insert attachment — disabled by default. When enabled, it allows users to insert uploaded files as attachments. Activating this option reveals the FIELD VALUE dropdown, where one can define how the file data is stored: as an “Attachment ID,” “Attachment URL,” “Array with attachment ID and URL,” or “Array or attachment IDs”;
  • Save uploaded files on server — enabled by default. Saves uploaded files directly on the server. Note: if the Insert attachment toggle is enabled, this option will remain active and cannot be turned off;
  • UPLOAD MODE — defines when the file is uploaded:
    • Upload on form submit — files are sent to the server only upon form submission;
    • Instant upload (immediately) — files are uploaded to the server immediately after selection.
  • MAXIMUM FILES TO UPLOAD — sets the maximum number of files a user can upload. Default value: 1;
  • MAXIMUM FILE SIZE (MB) — specifies the maximum size allowed for a single file upload, in megabytes;
  • MAXIMUM FILE SIZE MESSAGE — sets a custom message displayed to users when the uploaded file exceeds the allowed size;
allowed mime types for Drag & Drop File Upload
  • ALLOWED MIME TYPES — specifies which file types are permitted for upload. If left empty, all file types supported by WordPress will be allowed by default;
  • ALLOWED MIME TYPES MESSAGE — sets a custom message displayed to users indicating which file types are allowed.

Image Size & Quality Settings

The following settings are available under the Image Size & Quality tab:

drag and drop file upload block image size & quality settings
  • MAX IMAGE WIDTH (PX) — sets the maximum allowed image width in pixels;
  • MAX IMAGE HEIGHT (PX) — sets the maximum allowed image height in pixels;
  • IMAGE QUALITY — defines the maximum image quality, ranging from 1 to 100.

Labels Settings

In the Labels tab, the block labels can be customized.

drag and drop file upload block labels settings

Advanced Settings

The Advanced settings are:

drag and drop file upload block advanced settings
  • ADD PREV PAGE BUTTON — a toggle disabled by default. When enabled, it adds a “Prev Page” button after this field;
  • FIELD VISIBILITY — a drop-down list that allows selecting who can observe the block: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME — a field for entering custom CSS classes to style the block as needed.

Style Settings

The Styles of the block can be customized in this section.

drag and drop file upload block style settings

That’s it. Now you know how to manage the Drag and Drop File Upload settings of the Drag & Drop File Upload PRO add-on of JetFormBuilder for WordPress.

Related Docs