JetFormBuilder Drag and Drop File Upload: Setup, Settings and Fixes

JetFormBuilder Drag and Drop File Upload is a paid PRO add-on that adds a Drag and Drop File Upload block to the form editor. The add-on page lists it as "Buy from $49". Install it from WordPress Dashboard > JetFormBuilder > Addons and add the block to a form. Then raise MAXIMUM FILES TO UPLOAD, which defaults to 1, and set the allowed MIME types and a size limit per file.

Guests can use the drag-and-drop zone. The WordPress Media Library picker works only for logged-in users. This guide covers the setup steps, every setting, and how to send uploads to featured images, JetEngine meta fields and email attachments. It ends with fixes for the problems people run into most.

• Media Field vs Drag and Drop File Upload
• Install the add-on
• Add the field to a form
• Settings reference
• Choose storage, output and upload mode
• Use uploads in post-submit actions
• Common problems

Media Field vs Drag and Drop File Upload

JetFormBuilder's core Media Field is free and handles basic uploads. Crocoblock built the add-on because customers asked for features the standard field does not have:

Maybe you only want the free field to look better. We have guides for styling the JetFormBuilder file upload field and for adding a progress bar and compression to the Media Field.

Install the add-on

1. Buy the Drag & Drop File Upload add-on on the JetFormBuilder site.
2. In WordPress, go to Dashboard > JetFormBuilder > Addons.
3. Under All Available Addons, find Drag & Drop File Upload and click Install Addon.
4. Under Your Installed Addons, click Activate Addon.

Keep JetFormBuilder core up to date as well. The current core version is 3.6.7, which requires WordPress 6.1+ and PHP 7.0+. Several recent core releases fixed problems that affect upload forms:

• 3.5.2.1 fixed compatibility with this add-on.
• 3.5.3 fixed the featured image not being set when the file came from the WP Library.
• 3.6.5.2, 3.6.6 and 3.6.6.1 patched upload-related security issues, including a Media field access check and unauthenticated Media Library attachment deletion.

Add the field to a form

1. Go to Dashboard > JetFormBuilder > Add New Form, or open an existing form.
2. Click the + button, search for Drag and Drop File Upload and insert the block. It only appears while the add-on is active.
3. In the General settings, enter a FIELD LABEL. FORM FIELD NAME is filled in from the label, and you can edit it. It may contain only lowercase Latin letters, numbers, underscores and dashes, with no spaces. Actions and email macros refer to the field by this name.
4. In the Field settings, set MAXIMUM FILES TO UPLOAD, MAXIMUM FILE SIZE (MB) and ALLOWED MIME TYPES.
5. Add an Action Button block so the form can be submitted.
6. Set up your post-submit actions (see below) and save the form.
7. Place the form on a page with the JetForm widget in Elementor, the JetForm block in the block editor, or the JetForm element in Bricks.
8. Open the page and drag files onto the zone, or click Select files. Each file should show a progress indicator and a preview, and you can reorder the files before you submit.

Settings reference

The block settings are grouped into General, Field, Image Size & Quality, Labels and Advanced. Styling options are in a separate Styles section.

General

FIELD LABEL, FORM FIELD NAME and an optional FIELD DESCRIPTION.

Field

At least one of the two upload interfaces must stay enabled. For public forms, keep the drag-and-drop UI on.

Image Size & Quality

MAX IMAGE WIDTH (PX), MAX IMAGE HEIGHT (PX) and IMAGE QUALITY (1–100). Resizing and quality control happen before upload, so large phone photos arrive at a sensible size and do not fill your storage.

Labels

Replaces the block's default texts, such as the Select files button. Use it to translate the field or match your site's wording.

Advanced

• ADD PREV PAGE BUTTON (off by default) for multi-step forms.
• FIELD VISIBILITY: For all, Only for logged in users, or Only for NOT-logged in users.
• CSS CLASS NAME for custom styling.

Other active Crocoblock plugins can add more options here. Keep the two access settings apart: USER ACCESS decides which roles can use the field, and FIELD VISIBILITY decides who sees it.

Choose storage, output and upload mode

Decide what happens to the files before you build the actions. The three common setups:

• Files go to posts or meta fields (featured image, JetEngine media field): turn on Insert attachment and pick the FIELD VALUE format the target expects. Save uploaded files on server is forced on in this mode.
• Files are only emailed (a CV for HR, a document for a quote request): turn off Insert attachment and turn off Save uploaded files on server. The file is passed to the Send Email action as base64 and is never saved on your server.
• Files stored but kept out of the Media Library: leave Insert attachment off and Save uploaded files on server on.

For UPLOAD MODE, Upload on form submit sends the files only when the form is submitted. Instant upload (immediately) uploads each file as soon as it is selected, and the form cannot be submitted until the uploads finish. Instant upload makes the final submit faster on big files. Upload on submit avoids storing files from forms that people abandon.

Use uploads in post-submit actions

Featured image with Insert/Update Post

1. Turn on Insert attachment and set FIELD VALUE to Attachment ID. A single ID is the simplest format to map.
2. In the Insert/Update Post action, map the upload field to the post's featured image.
3. If the user uploads several images, the first one becomes the featured image. Users can drag the previews into order before they submit, so they choose the cover.

JetEngine media meta fields

The add-on can update JetEngine Meta Box media fields. The JetEngine field's Value format must match the upload field's FIELD VALUE: Media ID with Attachment ID, Media URL with Attachment URL, and the ID-and-URL array with Array with attachment ID and URL. Use the same format on both sides, or the meta field may not store the value you expect.

Send Email attachments

Add the upload field as an attachment in your Send Email action. Combine this with Save uploaded files on server turned off and the files go out in the email without being stored on your site. That suits forms that collect personal documents.

Common problems

Users can only add one file

MAXIMUM FILES TO UPLOAD defaults to 1. Raise it to the number you need.

The Media Library button is missing

The WP Media Library UI only appears for logged-in users. Guests see the drop zone, so keep Enable Drag-n-Drop Upload UI on for public forms.

The submit button seems stuck

With Instant upload, the form waits until every upload finishes. Large files on slow connections take time. Lower MAX IMAGE WIDTH/HEIGHT or the per-file size, or switch to Upload on form submit.

Featured image not set when the file comes from the WP Library

Fixed in JetFormBuilder core 3.5.3. Update core.

Instant uploads not attached to the new post

Someone has reported on Crocoblock's suggestions tracker that images uploaded with Instant Upload appear unattached to the submitted post. If you need the attachments linked to the post, test with Upload on form submit.

"Validation error" after adding the field to an older form

A user reported on GitHub that adding this field to a form that also had a classic Media Field made submissions fail. The form showed "Validation error" and the form records showed "You are not allowed to upload files". The issue is now closed, and a comment on it says the fix shipped in Drag and Drop File Upload 1.0.6. Update the add-on to 1.0.6 or later. If the error continues, set USER ACCESS on both upload fields to another option, save, then set the option you want and save again. That cleared the error for the reporter. Keep JetFormBuilder core up to date too.

Uploads fail below your size limit

Your server also has its own upload limit, which WordPress shows under Media > Add New. If MAXIMUM FILE SIZE (MB) is higher than that, large files can still be rejected. Keep the block's limit at or below the server's.

Blocked file types

When ALLOWED MIME TYPES is empty, everything WordPress supports gets through. Fill it in to restrict uploads, and write a clear ALLOWED MIME TYPES MESSAGE so users know what to send instead.

To sum up: install the add-on, raise the file limit and decide on storage before you build your actions. Then match FIELD VALUE to whatever receives the file. For a fuller form, pair it with our JetFormBuilder phone field with country flag and auto-detect. The official Drag & Drop File Upload documentation lists every option. If you would rather have someone build the upload form for you, post a request on BoostMyCroco.