Drag and Drop Multiple File Upload – Contact Form 7 - Version 1.2.2

Version Description

= 1.2.1 = This version fixed minor issues and bugs.

Download this release

Release Info

Developer glenwpcoder
Plugin Icon 128x128 Drag and Drop Multiple File Upload – Contact Form 7
Version 1.2.2
Comparing to
See all releases

Version 1.2.2

Files changed (10) hide show
  1. assets/css/dnd-upload-cf7.css +134 -0
  2. assets/fonts/icomoon.eot +0 -0
  3. assets/fonts/icomoon.svg +13 -0
  4. assets/fonts/icomoon.ttf +0 -0
  5. assets/fonts/icomoon.woff +0 -0
  6. assets/js/codedropz-uploader-min.js +10 -0
  7. assets/js/dnd-upload-cf7.js +36 -0
  8. drag-n-drop-upload-cf7.php +30 -0
  9. inc/dnd-upload-cf7.php +401 -0
  10. readme.txt +85 -0
assets/css/dnd-upload-cf7.css ADDED
@@ -0,0 +1,134 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @font-face {
2
+ font-family: 'dnd-custom-font';
3
+ src: url('../fonts/icomoon.eot?14xd7m');
4
+ src: url('../fonts/icomoon.eot?14xd7m#iefix') format('embedded-opentype'),
5
+ url('../fonts/icomoon.ttf?14xd7m') format('truetype'),
6
+ url('../fonts/icomoon.woff?14xd7m') format('woff'),
7
+ url('../fonts/icomoon.svg?14xd7m#icomoon') format('svg');
8
+ font-weight: normal;
9
+ font-style: normal;
10
+ }
11
+
12
+ [class^="dnd-icon-"], [class*=" dnd-icon-"] {
13
+ font-family: 'dnd-custom-font' !important;
14
+ speak: none;
15
+ font-style: normal;
16
+ font-weight: normal;
17
+ font-variant: normal;
18
+ text-transform: none;
19
+ line-height: 1;
20
+
21
+ /* Better Font Rendering =========== */
22
+ -webkit-font-smoothing: antialiased;
23
+ -moz-osx-font-smoothing: grayscale;
24
+ }
25
+
26
+ .dnd-icon-blank-file:before { content: "\e900";}
27
+ .dnd-icon-remove:before { content: "\e901";}
28
+ .icon-upload:before { content: "\e902";}
29
+
30
+ .wpcf7-drag-n-drop-file.d-none {
31
+ display:none;
32
+ opacity:0;
33
+ visibility:hidden;
34
+ position:absolute;
35
+ top:0;
36
+ }
37
+
38
+ /* Upload Status */
39
+ .dnd-upload-status {
40
+ display:flex;
41
+ padding:4px 0;
42
+ align-items:center;
43
+ position:relative;
44
+ }
45
+
46
+ /* Progress bar - Image */
47
+ .dnd-upload-status .dnd-upload-image {
48
+ width:40px;
49
+ height:40px;
50
+ border:1px solid #a5a5a5;
51
+ text-align:center;
52
+ border-radius:100%;
53
+ position:relative;
54
+ }
55
+ .dnd-upload-status .dnd-upload-image span {
56
+ font-size:20px;
57
+ color:#222;
58
+ position: absolute;
59
+ top: 50%;
60
+ transform: translate(-50%,-50%);
61
+ -moz-transform: translate(-50%,-50%);
62
+ -webkit-transform: translate(-50%,-50%);
63
+ left: 50%;
64
+ }
65
+
66
+ /* Progress bar - Image Details ( Name and Size ) */
67
+ .dnd-upload-status .dnd-upload-details {
68
+ padding-left:10px;
69
+ width:100%;
70
+ }
71
+ .dnd-upload-status .dnd-upload-details .name {color:#016d98; padding:4px 0; display:block; }
72
+ .dnd-upload-status .dnd-upload-details .name em {color:#444242; font-weight:700; padding-right:20px; }
73
+
74
+ /* Remove Upload File */
75
+ .dnd-upload-status .dnd-upload-details .remove-file {
76
+ position:absolute;
77
+ right:0;
78
+ top:6px;
79
+ text-decoration:none;
80
+ box-shadow:none;
81
+ }
82
+
83
+ .dnd-upload-status .dnd-upload-details span.has-error { color:#f50505; }
84
+
85
+ /* Progress Loading */
86
+ .dnd-upload-status .dnd-upload-details .dnd-progress-bar {
87
+ display: block;
88
+ border-radius: 5px;
89
+ overflow: hidden;
90
+ background: #565555;
91
+ height: 14px;
92
+ }
93
+ .dnd-upload-status .dnd-upload-details .dnd-progress-bar span {
94
+ background: #4CAF50;
95
+ display: block;
96
+ font-size: 11px;
97
+ text-align: right;
98
+ color: #fff;
99
+ height: 100%;
100
+ width:0;
101
+ line-height:14px;
102
+ }
103
+ .dnd-upload-status .dnd-upload-details .dnd-progress-bar span.complete { width:100%!important; padding-right:5px; }
104
+
105
+ /* CodeDropz Upload Plugin */
106
+ .codedropz-upload-handler {
107
+ border:2px dashed #c5c5c5;
108
+ border-radius:5px;
109
+ margin-bottom:10px;
110
+ }
111
+ .codedropz-upload-container {
112
+ padding:15px 20px;
113
+ }
114
+
115
+ .codedropz-upload-inner {
116
+ overflow:hidden;
117
+ width:100%;
118
+ white-space: nowrap;
119
+ text-align:center;
120
+ text-overflow: ellipsis;
121
+ font-weight:inherit;
122
+ }
123
+ .codedropz-upload-inner .codedropz-btn-wrap a.cd-upload-btn {
124
+ text-decoration:none;
125
+ box-shadow:none;
126
+ }
127
+ .codedropz-upload-inner h3 {
128
+ margin:5px 0;
129
+ }
130
+
131
+ /* Add border on dragenter, drag etc */
132
+ .codedropz-dragover {
133
+ border-color:#6b6a6a;
134
+ }
assets/fonts/icomoon.eot ADDED
Binary file
assets/fonts/icomoon.svg ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
+ <svg xmlns="http://www.w3.org/2000/svg">
4
+ <metadata>Generated by IcoMoon</metadata>
5
+ <defs>
6
+ <font id="icomoon" horiz-adv-x="1024">
7
+ <font-face units-per-em="1024" ascent="960" descent="-64" />
8
+ <missing-glyph horiz-adv-x="1024" />
9
+ <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
10
+ <glyph unicode="&#xe900;" glyph-name="blank-file" d="M640 960h-512v-1024h768v768l-256 256zM576 640h256v-640h-640v896h384v-256zM640 704v192l192-192h-192z" />
11
+ <glyph unicode="&#xe901;" glyph-name="remove" d="M510 962c-282.773 0-512-229.227-512-512s229.227-512 512-512 512 229.227 512 512c-0.336 282.633-229.367 511.664-512 512zM510 2c-247.422 0-448 200.578-448 448s200.578 448 448 448 448-200.578 448-448c-0.266-247.313-200.688-447.734-448-448zM758.898 698.898c-12.5 12.492-32.758 12.492-45.25 0l-203.648-203.648-203.648 203.648c-12.281 12.711-32.539 13.063-45.25 0.781-12.711-12.273-13.063-32.531-0.781-45.242 0.258-0.266 0.516-0.531 0.781-0.789l203.648-203.648-203.648-203.648c-12.711-12.273-13.063-32.531-0.781-45.25 12.273-12.711 32.531-13.063 45.242-0.781 0.266 0.258 0.531 0.516 0.789 0.781l203.648 203.648 203.648-203.648c12.711-12.273 32.969-11.922 45.242 0.789 11.977 12.398 11.977 32.063 0 44.461l-203.641 203.648 203.648 203.648c12.492 12.492 12.492 32.75 0 45.25z" />
12
+ <glyph unicode="&#xe902;" glyph-name="upload" d="M338.082 751.396c4.443 0 8.886 1.701 12.271 5.085l144.282 144.282v-617.639c0-9.598 7.758-17.356 17.356-17.356s17.356 7.758 17.356 17.356v617.639l143.571-143.571c6.786-6.786 17.755-6.786 24.542 0s6.786 17.755 0 24.542l-173.18 173.18c-1.597 1.614-3.523 2.881-5.675 3.766-4.235 1.753-9.008 1.753-13.26 0-2.135-0.885-4.061-2.17-5.658-3.766l-173.875-173.892c-6.786-6.786-6.786-17.755 0-24.542 3.384-3.402 7.828-5.085 12.271-5.085zM633.485 682.318c-9.598 0-17.356-7.758-17.356-17.356s7.758-17.356 17.356-17.356h225.631v-676.893h-694.249v676.893h225.631c9.598 0 17.356 7.758 17.356 17.356s-7.758 17.356-17.356 17.356h-260.343v-746.318h763.674v746.318h-260.343z" />
13
+ </font></defs></svg>
assets/fonts/icomoon.ttf ADDED
Binary file
assets/fonts/icomoon.woff ADDED
Binary file
assets/js/codedropz-uploader-min.js ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * CodeDropz Uploader v1.0
3
+ * Copyright 2018 Glen Mongaya
4
+ * CodeDrop Drag&Drop Uploader
5
+ * @version 1.0
6
+ * @author CodeDropz, Glen Don L. Mongaya
7
+ * @license The MIT License (MIT)
8
+ */
9
+
10
+ !function(e){e.fn.CodeDropz_Uploader=function(a){var d=e.extend({handler:this,color:"#000",background:"",max_file:10,text:"Drag & Drop Files Here",separator:"or",button_text:"Browse Files",max_upload_size:"5242880",supported_type:"jpg|jpeg|png|gif|pdf|doc|docx|ppt|pptx|odt|avi|ogg|m4a|mov|mp3|mp4|mpg|wav|wmv",on_success:""},a),o=0,n='<div class="codedropz-upload-handler"><div class="codedropz-upload-container"><div class="codedropz-upload-inner"><h3>'+d.text+"</h3><span>"+d.separator+'</span><div class="codedropz-btn-wrap"><a class="cd-upload-btn" href="javascript:void(0)">'+d.button_text+"</a></div></div></div></div>",r=d.handler.parents("form");d.handler.wrapAll('<div class="codedropz-upload-wrapper"></div>'),d.handler.after(n),e(".codedropz-upload-handler",r).on("drag dragstart dragend dragover dragenter dragleave drop",function(e){e.preventDefault(),e.stopPropagation()}),e(".codedropz-upload-handler",r).on("dragover dragenter",function(a){e(this).addClass("codedropz-dragover")}),e(".codedropz-upload-handler",r).on("dragleave dragend drop",function(a){e(this).removeClass("codedropz-dragover")}),e("a.cd-upload-btn",r).on("click",function(e){e.preventDefault(),d.handler.click()}),e(".codedropz-upload-handler",r).on("drop",function(e){t(e.originalEvent.dataTransfer.files,"drop"),d.handler.trigger("change")}),d.handler.on("change",function(e){t(this.files,"click")});var t=function(a,n){if(!(!a.length>1)){var t=new FormData;e.each(a,function(a,p){if(o++>=d.max_file)return!1;var i,l,c,u,v,f=(i=p,l=e(".codedropz-upload-handler",r),c="dnd-file-"+Math.random().toString(36).substr(2,9),u='<div class="dnd-upload-image"><span class="dnd-icon-blank-file"></span></div><div class="dnd-upload-details"><span class="name">'+i.name+" <em>("+(0===(v=i.size)?"0":(kBytes=v/1024,fileSize=kBytes>=1024?(kBytes/1024).toFixed(2)+"MB":kBytes.toFixed(2)+"KB",fileSize))+')</em></span><a href="javascript:void(0)" title="Remove" class="remove-file"><span class="dnd-icon-remove"></span></a><span class="dnd-progress-bar"><span></span></span></div>',l.after('<div id="'+c+'" class="dnd-upload-status">'+u+"</div>"),c);t.append("upload-file",p),t.append("supported_type",d.supported_type),t.append("size_limit",d.max_upload_size),t.append("action","dnd_codedropz_upload"),t.append("type",n);e.ajax({url:d.ajax_url,type:r.attr("method"),data:t,dataType:"json",cache:!1,contentType:!1,processData:!1,xhr:function(){var e=new window.XMLHttpRequest;return e.upload.addEventListener("progress",function(e){if(e.lengthComputable){var a=e.loaded/e.total,d=parseInt(100*a);s(f,d)}},!1),e},complete:function(){s(f,100)},success:function(a){a.success?e.isFunction(d.on_success)&&d.on_success.call(this,f,a):(e(".dnd-progress-bar",e("#"+f)).remove(),e(".dnd-upload-details",e("#"+f)).append('<span class="has-error">'+a.data+"</span>"))},error:function(e,a,d){alert("The uploaded file exceeds the Upload Max File size")}})})}};function s(a,d){var o=e(".dnd-progress-bar",e("#"+a));return o.length>0&&(progress_width=d*o.width()/100,e("span",o).animate({width:progress_width},10).text(d+"% "),100==d&&e("span",o).addClass("complete")),!1}e(document).on("click",".dnd-icon-remove",function(){e(this).parents(".dnd-upload-status").remove(),o-=1,alert(o)})}}(jQuery);
assets/js/dnd-upload-cf7.js ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ jQuery(document).ready(function($){
2
+
3
+ var Cf7myUploadFile = $('.wpcf7-drag-n-drop-file'),
4
+ TextOJB = dnd_cf7_uploader.drag_n_drop_upload
5
+
6
+ Cf7myUploadFile.CodeDropz_Uploader({
7
+ 'color' : '#fff',
8
+ 'ajax_url' : dnd_cf7_uploader.ajax_url,
9
+ 'max_upload_size' : Cf7myUploadFile.data('limit'),
10
+ 'supported_type' : Cf7myUploadFile.data('type'),
11
+ 'max_file' : Cf7myUploadFile.data('max'),
12
+ 'text' : TextOJB.text,
13
+ 'separator' : TextOJB.or_separator,
14
+ 'button_text' : TextOJB.browse,
15
+ 'on_success' : function( progressBar, response ){
16
+
17
+ // Progressbar Object
18
+ var progressDetails = $('#' + progressBar );
19
+
20
+ // Append hidden input field
21
+ progressDetails
22
+ .find('.dnd-upload-details')
23
+ .append('<span><input type="hidden" name="'+ Cf7myUploadFile.attr('name') +'[]" value="'+ response.data.path +'/'+ response.data.file +'"></span>');
24
+ }
25
+ });
26
+
27
+ // Fires when an Ajax form submission has completed successfully, and mail has been sent.
28
+ document.addEventListener( 'wpcf7mailsent ', function( event ) {
29
+ // Reset upload list
30
+ $('.dnd-upload-status', $('span.' + Cf7myUploadFile.attr('name'))).remove();
31
+
32
+ // Reset count files
33
+ count_files=0;
34
+ }, false );
35
+
36
+ });
drag-n-drop-upload-cf7.php ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ /**
4
+ * Plugin Name: Drag and Drop Multiple File Upload - Contact Form 7
5
+ * Plugin URI: https://profiles.wordpress.org/glenwpcoder
6
+ * Description: This simple plugin create Drag & Drop or choose Multiple File upload in your Confact Form 7 Forms.
7
+ * Text Domain: dnd-upload-cf7
8
+ * Domain Path: /languages
9
+ * Version: 1.2.2
10
+ * Author: Glen Don L. Mongaya
11
+ * Author URI: http://codedropz.com
12
+ * License: GPL2
13
+ **/
14
+
15
+ /** This protect the plugin file from direct access */
16
+ if ( ! defined( 'WPINC' ) ) {
17
+ die;
18
+ }
19
+
20
+ /** Set plugin constant to true **/
21
+ define( 'dnd_upload_cf7', true );
22
+
23
+ /** Define plugin Version */
24
+ define( 'dnd_upload_cf7_version', '1.2.2' );
25
+
26
+ /** Define constant Plugin Directories */
27
+ define( 'dnd_upload_cf7_directory', untrailingslashit( dirname( __FILE__ ) ) );
28
+
29
+ // require plugin core file
30
+ require_once( dnd_upload_cf7_directory .'/inc/dnd-upload-cf7.php' );
inc/dnd-upload-cf7.php ADDED
@@ -0,0 +1,401 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ /**
4
+ * @Description : Plugin main core
5
+ * @Package : Drag & Drop Multiple File Upload - Contact Form 7
6
+ * @Author : Glen Don L. Mongaya
7
+ */
8
+
9
+ if ( ! defined( 'ABSPATH' ) || ! defined('dnd_upload_cf7') ) {
10
+ exit;
11
+ }
12
+
13
+ /**
14
+ * Begin : begin plugin hooks
15
+ */
16
+
17
+ add_action( 'wpcf7_init', 'dnd_cf7_upload_add_form_tag_file' );
18
+ add_action( 'wp_enqueue_scripts', 'dnd_cf7_scripts' );
19
+
20
+ // Ajax Upload
21
+ add_action( 'wp_ajax_dnd_codedropz_upload', 'dnd_upload_cf7_upload' );
22
+ add_action( 'wp_ajax_nopriv_dnd_codedropz_upload', 'dnd_upload_cf7_upload' );
23
+
24
+ // Hook mail
25
+ add_action('wpcf7_mail_components','mycustom_wpcf7_mail_components', 50, 2);
26
+
27
+ // Add Submenu - Settings
28
+ add_action('admin_menu', 'dnd_admin_settings');
29
+
30
+ // Hooks for admin settings
31
+ function dnd_admin_settings() {
32
+ add_submenu_page( 'wpcf7', 'Drag & Drop Uploader - Settings', 'Drag & Drop Upload', 'manage_options', 'drag-n-drop-upload','dnd_upload_admin_settings');
33
+ add_action('admin_init','dnd_upload_register_settings');
34
+ }
35
+
36
+ // hooks - Custom cf7 Mail components
37
+ function mycustom_wpcf7_mail_components( $components, $form ) {
38
+
39
+ // get all form fields
40
+ $fields = $form->scan_form_tags();
41
+ $user_fields = wp_list_pluck( $fields, 'name','basetype' );
42
+
43
+ // Make sure mfile field is set.
44
+ if( ! isset( $_POST[ $user_fields['mfile'] ] ) ) {
45
+ return $components;
46
+ }
47
+
48
+ // Get uploaded files
49
+ $uploaded_files = ( isset( $_POST[ $user_fields['mfile'] ] ) ? $_POST[ $user_fields['mfile'] ] : null );
50
+
51
+ // Mail Files
52
+ if( ! is_null( $uploaded_files ) && count( $uploaded_files ) > 0 ) {
53
+ $counter = 0;
54
+
55
+ // Confirm upload dir
56
+ wpcf7_init_uploads();
57
+
58
+ // Get cf7 upload directory
59
+ $uploads_dir = wpcf7_upload_tmp_dir();
60
+
61
+ // cf7 - Submission Object
62
+ $submission = WPCF7_Submission::get_instance();
63
+
64
+ // Loop and add our files
65
+ foreach( $uploaded_files as $_file ) {
66
+ $new_file_name = path_join( $uploads_dir, $_file );
67
+ if ( $submission && file_exists( $new_file_name ) ) {
68
+ $components['attachments'][] = $new_file_name;
69
+ }
70
+ }
71
+ }
72
+
73
+ return $components;
74
+ }
75
+
76
+ // Load js and css
77
+ function dnd_cf7_scripts() {
78
+
79
+ // enque script
80
+ wp_enqueue_script( 'codedropz-uploader', plugins_url ('/assets/js/codedropz-uploader-min.js', dirname(__FILE__) ), array('jquery'), '1.1.2', true );
81
+ wp_enqueue_script( 'dnd-upload-cf7', plugins_url ('/assets/js/dnd-upload-cf7.js', dirname(__FILE__) ), array('jquery','codedropz-uploader'), '1.1.2', true );
82
+
83
+ // registered script with data for a JavaScript variable.
84
+ wp_localize_script( 'dnd-upload-cf7', 'dnd_cf7_uploader',
85
+ array(
86
+ 'ajax_url' => admin_url( 'admin-ajax.php' ),
87
+ 'drag_n_drop_upload' => array(
88
+ 'text' => ( get_option('drag_n_drop_text') ? get_option('drag_n_drop_text') : 'Drag & Drop Files Here' ),
89
+ 'or_separator' => ( get_option('drag_n_drop_separator') ? get_option('drag_n_drop_separator') : 'or' ),
90
+ 'browse' => ( get_option('drag_n_drop_browse_text') ? get_option('drag_n_drop_browse_text') : 'Browse Files' ),
91
+ )
92
+ )
93
+ );
94
+
95
+ // enque style
96
+ wp_enqueue_style( 'dnd-upload-cf7', plugins_url ('/assets/css/dnd-upload-cf7.css', dirname(__FILE__) ), '', '1.0' );
97
+ }
98
+
99
+ // Generate tag
100
+ function dnd_cf7_upload_add_form_tag_file() {
101
+ wpcf7_add_form_tag( array( 'mfile ', 'mfile*'), 'dnd_cf7_upload_form_tag_handler', array( 'name-attr' => true ) );
102
+ }
103
+
104
+ // Form tag handler from the tag - callback
105
+ function dnd_cf7_upload_form_tag_handler( $tag ) {
106
+
107
+ // check and make sure tag name is not empty
108
+ if ( empty( $tag->name ) ) {
109
+ return '';
110
+ }
111
+
112
+ // Validate our fields
113
+ $validation_error = wpcf7_get_validation_error( $tag->name );
114
+
115
+ // Generate class
116
+ $class = wpcf7_form_controls_class( 'drag-n-drop-file d-none' );
117
+
118
+ // Add not-valid class if there's an error.
119
+ if ( $validation_error ) {
120
+ $class .= ' wpcf7-not-valid';
121
+ }
122
+
123
+ // Setup element attributes
124
+ $atts = array();
125
+
126
+ $atts['size'] = $tag->get_size_option( '40' );
127
+ $atts['class'] = $tag->get_class_option( $class );
128
+ $atts['id'] = $tag->get_id_option();
129
+ $atts['tabindex'] = $tag->get_option( 'tabindex', 'signed_int', true );
130
+
131
+ // If file is required
132
+ if ( $tag->is_required() ) {
133
+ $atts['aria-required'] = 'true';
134
+ }
135
+
136
+ // Set invalid attributes if there's validation error
137
+ $atts['aria-invalid'] = $validation_error ? 'true' : 'false';
138
+
139
+ // Set input type and name
140
+ $atts['type'] = 'file';
141
+ $atts['name'] = $tag->name;
142
+ $atts['multiple'] = 'multiple';
143
+ $atts['data-type'] = $tag->get_option( 'filetypes','', true);
144
+ $atts['data-limit'] = $tag->get_option( 'limit','', true);
145
+ $atts['data-max'] = $tag->get_option( 'max-file','', true);
146
+
147
+ // Combine and format attrbiutes
148
+ $atts = wpcf7_format_atts( $atts );
149
+
150
+ // Return our element and attributes
151
+ return sprintf('<span class="wpcf7-form-control-wrap %1$s"><input %2$s />%3$s</span>', sanitize_html_class( $tag->name ), $atts, $validation_error );
152
+ }
153
+
154
+ // Encode type filter to support multipart since this is input type file
155
+ add_filter( 'wpcf7_form_enctype', 'dnd_upload_cf7_form_enctype_filter' );
156
+
157
+ function dnd_upload_cf7_form_enctype_filter( $enctype ) {
158
+ $multipart = (bool) wpcf7_scan_form_tags( array( 'type' => array( 'drag_drop_file', 'drag_drop_file*' ) ) );
159
+
160
+ if ( $multipart ) {
161
+ $enctype = 'multipart/form-data';
162
+ }
163
+
164
+ return $enctype;
165
+ }
166
+
167
+ // Validation + upload handling filter
168
+ add_filter( 'wpcf7_validate_mfile', 'dnd_upload_cf7_validation_filter', 10, 2 );
169
+ add_filter( 'wpcf7_validate_mfile*', 'dnd_upload_cf7_validation_filter', 10, 2 );
170
+
171
+ function dnd_upload_cf7_validation_filter( $result, $tag ) {
172
+ $name = $tag->name;
173
+ $id = $tag->get_id_option();
174
+
175
+ $file = isset( $_FILES[$name] ) ? $_FILES[$name] : null;
176
+ $multiple_files = ( isset( $_POST[ $name ] ) ? $_POST[ $name ] : null );
177
+
178
+ // No file
179
+ if ( $file['error'] && UPLOAD_ERR_NO_FILE != $file['error'] ) {
180
+ $result->invalidate( $tag, wpcf7_get_message( 'upload_failed_php_error' ) );
181
+ return $result;
182
+ }
183
+
184
+ // Check if we have files or if it's empty
185
+ if( ( is_null( $multiple_files ) || count( $multiple_files ) == 0 ) && $tag->is_required() ) {
186
+ $result->invalidate( $tag, wpcf7_get_message( 'invalid_required' ) );
187
+ return $result;
188
+ }
189
+
190
+ //Empty file should be required.
191
+ if ( empty( $file['tmp_name'] ) && $tag->is_required() && is_null( $multiple_files ) ) {
192
+ $result->invalidate( $tag, wpcf7_get_message( 'invalid_required' ) );
193
+ return $result;
194
+ }
195
+
196
+ return $result;
197
+ }
198
+
199
+ // Generate Admin From Tag
200
+ add_action( 'wpcf7_admin_init', 'dnd_upload_cf7_add_tag_generator', 50 );
201
+
202
+ function dnd_upload_cf7_add_tag_generator() {
203
+ $tag_generator = WPCF7_TagGenerator::get_instance();
204
+ $tag_generator->add( 'upload-file', __( 'multiple file upload', 'dnd-upload-cf7' ),'dnd_upload_cf7_tag_generator_file' );
205
+ }
206
+
207
+ // Display form in admin
208
+ function dnd_upload_cf7_tag_generator_file( $contact_form, $args = '' ) {
209
+
210
+ // Parse data and get our options
211
+ $args = wp_parse_args( $args, array() );
212
+
213
+ // Our multiple upload field
214
+ $type = 'mfile';
215
+
216
+ $description = __( "Generate a form-tag for a file uploading field. For more details, see %s.", 'contact-form-7' );
217
+ $desc_link = wpcf7_link( __( 'https://contactform7.com/file-uploading-and-attachment/', 'contact-form-7' ), __( 'File Uploading and Attachment', 'contact-form-7' ) );
218
+
219
+ ?>
220
+
221
+ <div class="control-box">
222
+ <fieldset>
223
+ <legend><?php echo sprintf( esc_html( $description ), $desc_link ); ?></legend>
224
+ <table class="form-table">
225
+ <tbody>
226
+ <tr>
227
+ <th scope="row"><?php echo esc_html( __( 'Field type', 'contact-form-7' ) ); ?></th>
228
+ <td>
229
+ <fieldset>
230
+ <legend class="screen-reader-text"><?php echo esc_html( __( 'Field type', 'contact-form-7' ) ); ?></legend>
231
+ <label><input type="checkbox" name="required" /> <?php echo esc_html( __( 'Required field', 'contact-form-7' ) ); ?></label>
232
+ </fieldset>
233
+ </td>
234
+ </tr>
235
+ <tr>
236
+ <th scope="row"><label for="<?php echo esc_attr( $args['content'] . '-name' ); ?>"><?php echo esc_html( __( 'Name', 'contact-form-7' ) ); ?></label></th>
237
+ <td><input type="text" name="name" class="tg-name oneline" id="<?php echo esc_attr( $args['content'] . '-name' ); ?>" /></td>
238
+ </tr>
239
+ <tr>
240
+ <th scope="row"><label for="<?php echo esc_attr( $args['content'] . '-limit' ); ?>"><?php echo esc_html( __( "File size limit (bytes)", 'contact-form-7' ) ); ?></label></th>
241
+ <td><input type="text" name="limit" class="filesize oneline option" id="<?php echo esc_attr( $args['content'] . '-limit' ); ?>" /></td>
242
+ </tr>
243
+ <tr>
244
+ <th scope="row"><label for="<?php echo esc_attr( $args['content'] . '-filetypes' ); ?>"><?php echo esc_html( __( 'Acceptable file types', 'contact-form-7' ) ); ?></label></th>
245
+ <td><input type="text" name="filetypes" class="filetype oneline option" placeholder="jpeg|png|jpg|gif" id="<?php echo esc_attr( $args['content'] . '-filetypes' ); ?>" /></td>
246
+ </tr>
247
+ <tr>
248
+ <th scope="row"><label for="<?php echo esc_attr( $args['content'] . '-max-file' ); ?>"><?php echo esc_html( __( 'Max file upload', 'contact-form-7' ) ); ?></label></th>
249
+ <td><input type="text" name="max-file" class="filetype oneline option" placeholder="10" id="<?php echo esc_attr( $args['content'] . '-max-file' ); ?>" /></td>
250
+ </tr>
251
+ <tr>
252
+ <th scope="row"><label for="<?php echo esc_attr( $args['content'] . '-id' ); ?>"><?php echo esc_html( __( 'Id attribute', 'contact-form-7' ) ); ?></label></th>
253
+ <td><input type="text" name="id" class="idvalue oneline option" id="<?php echo esc_attr( $args['content'] . '-id' ); ?>" /></td>
254
+ </tr>
255
+ <tr>
256
+ <th scope="row"><label for="<?php echo esc_attr( $args['content'] . '-class' ); ?>"><?php echo esc_html( __( 'Class attribute', 'contact-form-7' ) ); ?></label></th>
257
+ <td><input type="text" name="class" class="classvalue oneline option" id="<?php echo esc_attr( $args['content'] . '-class' ); ?>" /></td>
258
+ </tr>
259
+ </tbody>
260
+ </table>
261
+ </fieldset>
262
+ </div>
263
+
264
+ <div class="insert-box">
265
+ <input type="text" name="<?php echo $type; ?>" class="tag code" readonly="readonly" onfocus="this.select()" />
266
+ <div class="submitbox">
267
+ <input type="button" class="button button-primary insert-tag" value="<?php echo esc_attr( __( 'Insert Tag', 'contact-form-7' ) ); ?>" />
268
+ </div>
269
+ <br class="clear" />
270
+ <p class="description mail-tag">
271
+ <label for="<?php echo esc_attr( $args['content'] . '-mailtag' ); ?>"><?php echo sprintf( esc_html( __( "To attach the file uploaded through this field to mail, you need to insert the corresponding mail-tag (%s) into the File Attachments field on the Mail tab.", 'contact-form-7' ) ), '<strong><span class="mail-tag"></span></strong>' ); ?><input type="text" class="mail-tag code hidden" readonly="readonly" id="<?php echo esc_attr( $args['content'] . '-mailtag' ); ?>" /></label>
272
+ </p>
273
+ </div>
274
+
275
+ <?php
276
+ }
277
+
278
+ // Begin process upload
279
+ function dnd_upload_cf7_upload() {
280
+
281
+ // input type file 'name'
282
+ $name = 'upload-file';
283
+
284
+ $file = isset( $_FILES[$name] ) ? $_FILES[$name] : null;
285
+
286
+ // Tells whether the file was uploaded via HTTP POST
287
+ if ( ! is_uploaded_file( $file['tmp_name'] ) ) {
288
+ wp_send_json_error( __('Uploading a file fails for any reason','dnd-upload-cf7') );
289
+ }
290
+
291
+ /* File type validation */
292
+ $file_type_pattern = dnd_upload_cf7_filetypes( $_POST['supported_type'] );
293
+
294
+ // validate file type
295
+ if ( ! preg_match( $file_type_pattern, $file['name'] ) ) {
296
+ wp_send_json_error( __('Uploaded file is not allowed for file type','dnd-upload-cf7') );
297
+ }
298
+
299
+ // validate file size limit
300
+ if( $file['size'] > (int)$_POST['size_limit'] ) {
301
+ wp_send_json_error( __('Uploaded file is too large','dnd-upload-cf7') );
302
+ }
303
+
304
+ wpcf7_init_uploads(); // Confirm upload dir
305
+ $uploads_dir = wpcf7_upload_tmp_dir();
306
+ $uploads_dir = wpcf7_maybe_add_random_dir( $uploads_dir );
307
+
308
+ $filename = $file['name'];
309
+ $filename = wpcf7_canonicalize( $filename, 'as-is' );
310
+ $filename = wpcf7_antiscript_file_name( $filename );
311
+
312
+ $filename = apply_filters( 'wpcf7_upload_file_name', $filename, $file['name'] );
313
+
314
+ // Generate new filename
315
+ $filename = wp_unique_filename( $uploads_dir, $filename );
316
+ $new_file = path_join( $uploads_dir, $filename );
317
+
318
+ // Upload File
319
+ if ( false === move_uploaded_file( $file['tmp_name'], $new_file ) ) {
320
+ wp_send_json_error( __('Uploading a file fails for any reason','dnd-upload-cf7') );
321
+ }else{
322
+
323
+ $files = array(
324
+ 'path' => basename($uploads_dir),
325
+ 'file' => str_replace('/','-', $filename )
326
+ );
327
+
328
+ // Change file permission to 0400
329
+ chmod( $new_file, 0400 );
330
+
331
+ wp_send_json_success( $files );
332
+ }
333
+
334
+ die;
335
+ }
336
+
337
+ // Setup file type pattern for validation
338
+ function dnd_upload_cf7_filetypes( $types ) {
339
+ $file_type_pattern = '';
340
+
341
+ // If contact form 7 5.0 and up
342
+ if( function_exists('wpcf7_acceptable_filetypes') ) {
343
+ $file_type_pattern = wpcf7_acceptable_filetypes( $types, 'regex' );
344
+ $file_type_pattern = '/\.(' . $file_type_pattern . ')$/i';
345
+ }else{
346
+ $allowed_file_types = array();
347
+ $file_types = explode( '|', $types );
348
+
349
+ foreach ( $file_types as $file_type ) {
350
+ $file_type = trim( $file_type, '.' );
351
+ $file_type = str_replace( array( '.', '+', '*', '?' ), array( '\.', '\+', '\*', '\?' ), $file_type );
352
+ $allowed_file_types[] = $file_type;
353
+ }
354
+
355
+ $allowed_file_types = array_unique( $allowed_file_types );
356
+ $file_type_pattern = implode( '|', $allowed_file_types );
357
+
358
+ $file_type_pattern = trim( $file_type_pattern, '|' );
359
+ $file_type_pattern = '(' . $file_type_pattern . ')';
360
+ $file_type_pattern = '/\.' . $file_type_pattern . '$/i';
361
+ }
362
+
363
+ return $file_type_pattern;
364
+ }
365
+
366
+ // Admin Settings
367
+ function dnd_upload_admin_settings( ) {
368
+ echo '<div class="wrap">';
369
+ echo '<h1>Drag & Drop Uploader - Settings</h1>';
370
+ echo '<form method="post" action="options.php"> ';
371
+ settings_fields( 'drag-n-drop-upload-file-cf7' );
372
+ do_settings_sections( 'drag-n-drop-upload-file-cf7' );
373
+ ?>
374
+ <table class="form-table">
375
+ <tr valign="top">
376
+ <th scope="row"><?php _e('Drag & Drop Text','dnd-upload-cf7'); ?></th>
377
+ <td><input type="text" name="drag_n_drop_text" class="regular-text" value="<?php echo esc_attr( get_option('drag_n_drop_text') ); ?>" placeholder="Drag & Drop Files Here" /></td>
378
+ </tr>
379
+ <tr valign="top">
380
+ <th scope="row"></th>
381
+ <td><input type="text" name="drag_n_drop_separator" value="<?php echo esc_attr( get_option('drag_n_drop_separator') ); ?>" placeholder="or" /></td>
382
+ </tr>
383
+ <tr valign="top">
384
+ <th scope="row"><?php _e('Browse Text','dnd-upload-cf7'); ?></th>
385
+ <td><input type="text" name="drag_n_drop_browse_text" class="regular-text" value="<?php echo esc_attr( get_option('drag_n_drop_browse_text') ); ?>" placeholder="Browse Files" /></td>
386
+ </tr>
387
+ </table>
388
+
389
+ <?php submit_button(); ?>
390
+
391
+ <?php
392
+ echo '</form>';
393
+ echo '</div>';
394
+ }
395
+
396
+ // Save admin settings
397
+ function dnd_upload_register_settings() {
398
+ register_setting( 'drag-n-drop-upload-file-cf7', 'drag_n_drop_text' );
399
+ register_setting( 'drag-n-drop-upload-file-cf7', 'drag_n_drop_separator' );
400
+ register_setting( 'drag-n-drop-upload-file-cf7', 'drag_n_drop_browse_text' );
401
+ }
readme.txt ADDED
@@ -0,0 +1,85 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Drag and Drop Multiple File Upload - Contact Form 7 ===
2
+ Donate link : http://codedropz.com/donation
3
+ Tags: drag and drop, contact form 7, ajax uploader, multiple file, upload, contact form 7 uploader
4
+ Requires at least: 3.0.1
5
+ Tested up to: 5.0
6
+ Stable tag: 1.2.2
7
+ Requires PHP: 5.2.4
8
+ License: GPLv2 or later
9
+ License URI: https://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ == Description ==
12
+
13
+ Drag and Drop Uploader a simple Wordpress plugin extension for Contact Form 7, this will allow you to Upload multiple files using "Drag & Drop" or "Browse Multiple" in uploading area of your form.
14
+
15
+ Here's a little demo [here](http://codedropz.com/contact).
16
+
17
+ = Features =
18
+
19
+ * File Type Validation
20
+ * File Size Validation
21
+ * Ajax Upload
22
+ * Drag & Drop or Browse File - Multiple Upload
23
+ * Mobile Responsive
24
+ * Cool Progress Bar
25
+ * Limit number of files Upload.
26
+ * Browser Compatability
27
+
28
+ == Frequently Asked Questions ==
29
+
30
+ = How can I send feedback or get help with a bug? =
31
+
32
+ For any bug reports go to <a href="https://wordpress.org/support/plugin/drag-and-drop-multiple-file-upload-contact-form-7">Support</a> page.
33
+
34
+ = How can I limit file size? =
35
+
36
+ To limit file size in `multiple file upload` field generator under Contact Form 7, there's a field `File size limit (bytes)`. Please take note it should be `Bytes` you may use any converter just Google (MB to Bytes converter) default of this plugin is 5MB(5242880 Bytes).
37
+
38
+ = How can I limit the number of files in my Upload? =
39
+
40
+ You can limit the number of files in your file upload by adding this parameter `max-file:3` to your shortcode :
41
+
42
+ Example: (limit - 3): `[mfile upload-file-344 max-file:3]`
43
+
44
+ = How can I Add or Limit file types =
45
+
46
+ You can add or change file types in cf7 Form-tag Generator Options by adding `jpeg|png|jpg|gif` in `Acceptable file types field`.
47
+
48
+ Example : [mfile upload-file-433 filetypes:jpeg|png|jpg|gif]
49
+
50
+ == Installation ==
51
+
52
+ To install this plugin see below:
53
+
54
+ 1. Upload the plugin files to the `/wp-content/plugins/drag-n-drop-upload-cf7.zip` directory, or install the plugin through the WordPress plugins screen directly.
55
+ 2. Activate the plugin through the 'Plugins' screen in WordPress
56
+
57
+ == Screenshots ==
58
+
59
+ 1. Generate Upload Field - Admin
60
+ 2. Form Field Settings - Admin
61
+
62
+ == Changelog ==
63
+
64
+ = 1.0 =
65
+ * Initial Release
66
+
67
+ = 1.1 =
68
+ - This version fixes on user drop validation.
69
+ - Optimized Javascript File
70
+
71
+ = 1.2 =
72
+ - Add admin option to limit the number of files. (Maximum File Upload Limit)
73
+
74
+ = 1.2.1 =
75
+ * Issue - fixed bug when file is not required(*).
76
+ * Issue - fixed error on 'wpcf7_mail_components' components hooks when there's no file.
77
+
78
+ == Upgrade Notice ==
79
+
80
+ = 1.2.1 =
81
+ This version fixed minor issues and bugs.
82
+
83
+ == Donations ==
84
+
85
+ Would you like to support the advancement of this plugin? [Donate](http://codedropz.com/donation)