Drag and Drop File Upload

How to Set Up Drag & Drop File Upload Addon

Go to WordPress Dashboard > JetFormBuilder > Addons and find the “Drag & Drop File Upload” addon in the All Available Addons section. Hit the “Install Addon” button next to it.

Once done, the addon will appear in the Your Installed Addons section. Click the “Activate Addon” button.

Drag and Drop File Upload block settings

Head to WordPress Dashboard > JetFormBuilder > Forms and click the “Add New Form” button to build a new form or open the already created one to edit it.

Add the Drag and Drop File Upload block to your form.

In the General settings, you can adjust the following settings:

• FIELD LABEL — a label of the field in the form;
• FORM FIELD NAME — a slug of the field. It will be generated automatically from the FIELD LABEL and can be changed if needed. Ensure that the slug doesn’t contain spaces and uppercase letters, and includes only Latin letters, numbers, underscores, and dashes;
• FIELD DESCRIPTION — a field description that is displayed next to the field.

Proceed to the Field settings tab. Here, you can adjust the following settings:

• USER ACCESS — a dropdown field that allows you to specify what user roles can use this field;
• Enable Drag and Drop Upload UI — a toggle that is activated by default. When enabled, the “drag and drop” upload UI is active. Mind that at least one upload method should be activated: either this one, the “drag and drop” one, or the next, the “WP Media Library” one;
• Enable WP Media Library UI — a toggle that is deactivated by default. When enabled, the WP Media Library UI is active. Mind that this feature works only for logged-in users;
• Insert attachment — a toggle that is deactivated by default. When enabled, it lets users insert files as attachments. If active, the FIELD VALUE field becomes available, letting you select how the field value will be stored: as attachment ID, URL, array with both ID and URL, or array of attachment IDs;
• Save uploaded files to the server — a toggle that is activated by default. With this feature, the uploaded files are saved on the server. Also, mind that if the Insert attachment toggle is activated, the Save uploaded files on server can’t be deactivated;
• UPLOAD MODE — a mode of saving files: “Upload on form submit” means that the files will be sent to the server on form submission, and “Instant upload (immediately)” means uploading files to the server immediately when selected;
• MAXIMUM FILES TO UPLOAD — a maximum number of files allowed to be uploaded. By default, it is set to “1”;

• MAXIMUM FILE SIZE (MB) — a maximum size of one uploaded file in megabytes;
• MAXIMUM FILE SIZE MESSAGE — a message notifying the user about the maximum file size;
• ALLOWED MIME TYPES — allowed field types. If not specified, all the WordPress-supported file types are allowed;
• ALLOWED MIME TYPES MESSAGE — a message about the allowed MIME types that will be shown to the user.

In the following Image Size & Quality tab, the corresponding settings are available:

• MAX IMAGE WIDTH (PX) — a maximum image width in pixels;
• MAX IMAGE HEIGHT (PX) — a maximum image height in pixels;
• IMAGE QUALITY — allows setting the maximum image quality (from “1” to “100”).

In the Labels section, you can change the default labels of the block to the custom ones.

Ultimately, in the Advanced settings block, you can set the CSS classes of the block to style it.

NOTE. Additional settings fields can be displayed here if you have other Crocoblock plugins activated.

• Add Prev Page Button — a toggle that is deactivated by default. When active, adds a “Prev Page” button after this field;
• FIELD VISIBILITY — a field that allows you to set the field visibility: for every user, only for logged-in users, or only for not logged-in users;
• CSS CLASS NAME — a field where the CSS classes can be put in order to stylize the block.

We also add an Action Button block to submit the form.

Once the block is fully customized according to your request and the form is ready, press the “Publish/Save” button to save the result.

Add a form to the page

The form can now be displayed in the preferred page builder with the help of the JetForm widget/block.

Adjust the page settings and save the page by pressing the “Publish” button.

Check the result

Open the just-added page on the front end and press the “Select files” button.

Pick the file either from your computer files or from the Media Library (depending on the previously selected UI).

When the media file is added and the form is completed, you can press the “Submit” button.

That’s all about setting up a Drag & Drop File Upload addon and adjusting the Drag & Drop File Upload block in the JetFormBuilder form.