Drag and Drop Multiple File Upload – Contact Form 7 Plugin

Drag and Drop Multiple File Uploader is a simple, straightforward WordPress plugin extension for Contact Form7, which allows the user to upload multiple files using the drag-and-drop feature or the common browse-file of your webform.

Here’s a little DEMO.

Features

• File Type Validation
• File Size Validation
• Ajax Uploader
• Limit number of files Upload.
• Limit files size for each field
• Can specify custom file types or extension
• Manage Text and Error message in admin settings
• Drag & Drop or Browse File – Multiple Upload
• Support Multiple Drag and Drop in One Form.
• Able to delete uploaded file before being sent
• Send files as email attachment or as a links. (see note below)
• Support multiple languages
• Mobile Responsive
• Cool Progress Bar
• Compatible with any browser

PLUGIN GUIDE – FREE VERSION

Note: On Free version, all uploaded files moves to a temporary folder (“/wp-content/uploads/wp_dndcf7_uploads”) then attaches the file to the mail and sends it. After that “Drag & Drop File Upload” removes the file from the temporary folder 1 hour after the submission. ( same process with the default “file” upload of Contact Form 7 – See here )

To adjust or disable the auto-deletion feature, we suggest upgrading to the PRO version for more options (see below).

⭐ Premium Features ⭐

Check out the available features in the PRO version.

• Image Preview – Show Thumbnail for images
• Adjust Auto Deletion of Files – After Form Submission
  • (1 hour, 4 hours, 8 hours , days, months etc)
• Zip Files ( Compressed File )
• Save Files to “WordPress Media Library”
• Change WordPress Upload Directory
• Change Upload Folder To:
  • Contact Form 7 – Fields
  • Generated Date & Time – Timestamp
  • Random Folder
  • By User – Required Login
  • Custom Folder
  • Dynamic Folder – user (name, id), post (id, slug), cf7 fields
• Send as Individual Email Attachments, Zip Archive, or Links”
• Chunks Upload ( Break large files into smaller Chunks )
  • Capable of uploading large files.
• set a Max Total Size ( of all Uploaded Files )
• Parallel Upload (No. of files that can be uploaded simultaneously)
• Change Filename Pattern ({filename}, {cf7-field-name}, {ip_address}, {random}, {post_id}, {post_slug}, etc.)
• New – Color Options (File Size, Progress Bar, Filename, etc.)
• New – Disabled the Button to Prevent Duplicate Submissions”
• New – Image preview on email
• New – File Remote Storage (OneDrive, Google Drive, Amazon S3, FTP, Dropbox)
• New – Save Form Entries in the Admin
• New – Select “Dark” or “Light” Theme
• New – Validate Image Sizes (Width & Height)
• Able Resize Image (ie: 800×800) – Standard Version Only
• Automatically Optimizing Images (Standard Version Only)
• Enhanced Security (Updated Regularly)
• Code Optimization and Improved Performance

Pro version is also compatible with:

• Contact Form 7 Add-on – Arshid
• Database for Contact Form 7- Ninja
• Advanced Contact form 7 DB – Vsourz Digital

You can get PRO Version here!

PRO VERSION – PLUGIN OVERVIEW

Other Plugin You May Like

• Drag & Drop Multiple File Upload – WPForms
  An extension for WPForms – Transform your simple file upload into beautiful “Drag & Drop Multiple File Upload”.

• Drag & Drop Multiple File Upload – WooCommerce
  An extension for WooCommerce – Transform your simple file upload into beautiful “Drag & Drop Multiple File Upload”.

Donations

Would you like to support the advancement of this plugin? Donate

To install this plugin see below:

1. Upload the plugin files to the /wp-content/plugins/drag-and-drop-multiple-file-upload-contact-form-7.zip directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the ‘Plugins’ screen in WordPress
3. Go to “Contact > Drag & Drop Upload” for the settings.
4. See Tutorial

1. 

   Generate Upload Field - Admin

2. 

   Form Field Settings - Admin

3. 

   Uploader Settings - Admin

4. 

   Email Attachment- Gmail

5. 

   Email Attachment As links - Gmail

6. 

   Multiple Drag and Drop Fields - Front

7. 

   Remote Storage - Pro Features

1.3.8.1

• Quick Fix – Unable to uncheck “Send file(s) as links” option.

1.3.8.0

• Quick fix to prevent auto-deletion if the “Don’t delete files” setting was overridden by recent updates.

1.3.7.9

• Bug – Added back the “Don’t delete files” option.
• Optimized – Optimized plugin settings by saving them as an array instead of retrieving individual settings from the wp_options table.
• Compatibility check on latest version of Contact Form 7 5.9.5.

1.3.7.8

• Added “index.php” file to plugin upload directories for security enhancement, especially for servers like Nginx that do not support .htaccess files. This prevents unauthorized access to files. (Thanks to @Wordfence team for reporting the issue)
• New – Added an option in the admin “Unique Filename” to randomize or generate unique filename.

1.3.7.7

• Fixes – js/css enabled as default ‘dnd_cf7_load_on_cf7_page’ filter
• Fixes – Remove javascript:void and replaced with ‘#’ on browse and delete for SEO purposes (JS)

1.3.7.6

• Fixes – Removed inline css and use proper enqueue (https://wordpress.org/support/topic/html-validation-error-21/)
• Minor bug fixes and improvements

1.3.7.5

• Fixes – Fixed JS error for custom button type submit.

1.3.7.4

• Fixes – Security Updates “Unauthenticated Arbitrary File Upload” (Thanks to @István from Wordfence)

1.3.7.3

• New – Added Chinese (Taiwan) Translation (Thanks to: Alex Lion)
• Fixes – Improve I18N issues Reported Here
• Bug – Remove required error message after user uploaded successfully (JS) Topic
• Bug – Clear or reset on multiple form after send (JS) Topic
• Fixes – Fixed error console when there’s no upload field in the form (JS)

1.3.7.2

• Bug – Minor JS fixes ( Max limit validation )

1.3.7.1

• Minor fixes

1.3.7.0

• Tested on WordPress 6.3
• Added new option in “Contact -> Drag & Drop Upload” to use jQuery or Native Javascript
• Optimized javascript into 1 file
• New – Transitioning from jQuery to Native Javascript

1.3.6.9

• Fixes – Quick fix ( Error: Call to a member function id() on null )

1.3.6.8

• Fixes – Added alternative solution for nonce

1.3.6.7

• Fixes – for Mime Type validation

1.3.6.6

• Fixes – Security Fix (CSRF)
• Added – Added security nonce on ajax request for upload and delete

1.3.6.5

• Fixed – security issue (“Unauthenticated File upload Size limit bypass”) thanks to Sanjay Das from “Payatu Security Consulting “
• Added fixes so it should get the size limit on the cf7/admin settings instead of the post request.

1.3.6.4

• Tested on latest version of wordpress 6.0.
• Added Compatibility on Contact Form 7 version 5.6.

1.3.6.3

• Fixed – Security issues (Cross-Site Scripting through SVG files via remote upload)
• New – Filter dnd_cf7_data_options to manualy change the browse text and label text.

1.3.6.2

• Added – Add settings link in the plugin page
• Fixed – Long text/heading is hidden on the container
• Fixed – Min file validation
• Bug – Removed “accept” data attributes in mobile devices

1.3.6.1

• Fixed – Unable to delete if errors will show
• Added “span” & “div” on heading tag option
• Add spam filtering fixes
• Added “Disable Auto Delete” option.

1.3.5.9

• Add accept types data attributes See Here

1.3.5.8

• Fixed German translation (https://wordpress.org/support/topic/german-translation-wrong/)
• Fixes – Bug on file deletion (Reported here – https://wordpress.org/support/topic/deleting-files-not-yet-uploaded-is-breaking/)
• Change delete icon instead of using an iconmoon.
• Minor fixes & Improvement

1.3.5.7

• Bug – Fixed validation issue when “CF7 Conditional Fields” plugin is active.

1.3.5.6

• New – option to change upload heading tag from h1-h6
• Change text-domain to actual plugin slug for plugin internationalization.
• Fixed validation error message for multiple groups. (compatible with CF7 – Conditional Fields)

1.3.5.5.1

• Bug – Fixed Contact Form 7 error notice
  • PHP Deprecated: id property of a WPCF7_ContactForm object is no longer accessible.
  • Reported here – https://wordpress.org/support/topic/bug-notice-id-not-accessible

1.3.5.5

• Fixed – Vulnerability (Thanks to @Sysdream Labs team )
  • Removed “supported type” in POST request so other users cannot override through remote access.
  • The issue was, user able to bypass and upload “.phar & .phpt” file extension by modifying “suported type”
  • Those extensions are enabled by default on a fresh PHP/Apache2 installation.
• Improved – Security (file types condition are based on specified in the admin)

1.3.5.4

• Added – Russian translation (Thanks to “Dan Uchvatoff “)
• Fixed – File counter “of” not translatable.

1.3.5.3

• Fixed – PHP Fatal error on server not supporting mb_check_encoding.
• Fixed – Fatal error: Uncaught Error: Call to a member function scan_form_tags()
  • When “Accept PayPal Payments using Contact Form 7” installed.

1.3.5.2

• Added – Improved sercurity ( Limit the user input to a file name and ignore injected path names )
• Modified – Email links ( display only the filename )

1.3.5.1

• Bug – Quick Fix ( Unable to submit form when acceptance field is set )
  • Issue if “additional settings” section added this line: acceptance_as_validation: on

1.3.5

• Fixed – nonce issues when using Cache plugins.
• Fixed – German Translation for ( Drag & Drop File Upload ) text.
• Fixed – Submit button ( enable/disable ) when acceptance checkbox is added.
• Modified – File Upload error message ( display error code )

1.3.4

• Fixed – Removed uploaded files when item Inbound Messages “Permanently Deleted”.
• Added – Counter of how many files are uploaded ( ie: 4 of 10 )
• New – Features allow to set Minimum File Upload.
• ie : minimum upload:2, max upload:10 = [mfile* upload-file-669 min-file:2 max-file:10]
• New – Added .htaccess file inside “wp_dndcf7_uploads” upload directory. ( prevent from direct access )
• Options: -Indexes \n \n deny from all \n
• Fixed – File Attachments bug ( Issues on additional mail when (file attachment) is removed still send the file )

1.3.3.3.2

• Bugs – Fixed unable to submit form ( 500 Internal Server Error in response )

1.3.3.3.1

• Fixes – Minor updates (packed the wrong file)

1.3.3.3

• Fixed – Security Issues ( Unrestricted File Upload to Remote Code Execution – Thanks to @Austin )
  • Able bypass and upload file (remotely) by renaming to ie: shell.php% and modified supported_type to jpg|png|php%
  • Solution : Added more security, check/validate file type and created new function ‘dnd_cf7_validate_type’ to determine if file name extension is valid or not.
• New – Make ‘deleting…’ and ‘remove’ text translatable ( compatible using WPML String Translation ).

1.3.3.2

• Fixed – PHP warning reported here

1.3.3.1

• Improved Security – ( Check valid filename & extensions, sanitations, Secured File deletions )
• New – Allowed non ASCII file name
• Improved styling on Progress Bar
• Fixed – Conflict with WooCommerce Geo Location

1.3.3

• SECURITY UPDATES ( issues reported by : Robert L Mathews )
• The issues inside dnd_codedropz_upload_delete function, that will execute any POST remotely.
• Fixed – To accept russian, hebrew Filename
• Modify Javascript dnd-upload-cf7.js attach the function to window so it can be available to call.
• Added – Responsive style for Drag & Drop text on mobile devices.
• Minimum Features – Coming Soon

1.3.2

• Fixed – Sanitized Admin Option Fields – For Security Reason
• Added – Filter for wpcf7_posted_data from CF7 to get the full link of the file.

1.3.1

• Fixed – Browser Compatibility ( Error Uploading files in Edge, Safari and Internet Explorer )
• Improved – Removed error text if there are muliple error ( File upload validation )

1.3.0

• Fixed – Multiple Drag & Drop fields in one form ( Validation Issues – Max File not working correctly )
• Added – Added “deleted…” status when removing file.
  • So that the user know that file deletion is in progress…
• Fixed – Responsive issues on Mobile < 767px screen.
• Added – Added ‘/wpcf7-files’ directory inside ‘/wp_dndcf7_uploads’ to temporary store files instead of relying contact form 7.
• Added – Auto delete files inside ‘/wpcf7-files’ dir 1 hour(3200 seconds) after submission.
  • It was a problem with contact form 7 before that files only last 60 seconds and it will automatically deleted.
• Improved – Optimized and Improved Php Code & Javascript structure and functionalities. ( removed redundant code, removed spaces, etc )
• Added – Links going to Pro Version.

1.2.6.0

• Fixed – Allow to upload file with the same filename.
• Fixed – Can’t upload image after deleting (https://wordpress.org/support/topic/cant-upload-image-after-deleting-it/)
• Fixed – Max-file issue (https://wordpress.org/support/topic/max-file-issue/)
• Added – a note message when file reached the max-file Limit ( “To inform user that some of the files are not uploaded” ).
• Added – Better Ajax deletion ( Remove files from the server – Only if Send As Attachment is checked )
• Optimized – Form send loading time has been optimized ( Improved loading time for large attachment )
• Fixed – Bug reported by @palychwp ” remove file still send sends with the form (https://wordpress.org/support/topic/file-uploading-is-working-incorrect/)
• Added – Validate File/Attachment first before the upload start (“some says it’s frustating :)”)
  • (PHP or Server side validation still there for security and better validation)
• Improved file counting via LocalStorage instead of Global variable.

1.2.5.0

• Fixed – Please Update to 1.2.5.0 to fixed disable button issue.

1.2.5

• Fixed – Improved ( Disable button while upload is on progress )
• Fixes – Validate file size limit before uploading the file ( https://wordpress.org/support/topic/file-uploading-is-working-incorrect/ )

1.2.4

• Added – Support WPML using .po and .mo files
• Added – Added to support multilingual ( using Poedit )
• Fixed – Prevent attachment from sending to Mail(2) if field attachment is not set. (https://wordpress.org/support/topic/problem-with-2th-mail-attachment-2/)
• Added – Disable ‘submit’ button while upload is on progress…

1.2.3

• Added – Multiple Drag and Drop fields in a form
• Added – Options in admin for error message
• Added – Option that allow user to send attachment as links
• Added – Added new folder name wp_dndcf7_uploads to separate files from wpcf7_uploads ( When option ‘Send Attachment as links?’ is check ).

1.2.2

• Add – Create admin settings where you can manage or change text in your uploading area. It’s under ‘contacts’ > ‘Drag and Drop’.
• New – Empty or Clear attachment file when Contact Form successfully send.
• Fixes – Fixed remove item bugs when file is greater than file limit.
• Fixes – Changed ‘icon-moon’ fonts to avoid conflict with the other themes.
• New – Added text domain for language translations.

1.2.2

• Issue – fixed bug when file is not required(*).
• Issue – fixed error on ‘wpcf7_mail_components’ components hooks when there’s no file.

1.2.1

• Issue – fixed bug when file is not required(*).
• Issue – fixed error on ‘wpcf7_mail_components’ components hooks when there’s no file.

1.2

• Add admin option to limit the number of files. (Maximum File Upload Limit)

1.1

• This version fixes on user drop validation.
• Optimized Javascript File

1.0

• Initial Release