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

Version Description

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

Release Info

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

Code changes from version 1.3.6.3 to 1.3.6.4

Files changed (5) hide show
  1. assets/js/codedropz-uploader-min.js +2 -2
  2. assets/js/codedropz-uploader.js +364 -0
  3. drag-n-drop-upload-cf7.php +2 -2
  4. inc/dnd-upload-cf7.php +6 -1
  5. readme.txt +6 -2
assets/js/codedropz-uploader-min.js CHANGED
@@ -1,8 +1,8 @@
1
  /**
2
- * CodeDropz Uploader v1.3.6.3
3
  * Copyright 2018 Glen Mongaya
4
  * CodeDrop Drag&Drop Uploader
5
- * @version 1.3.6.3
6
  * @author CodeDropz, Glen Don L. Mongaya
7
  * @license The MIT License (MIT)
8
  */
1
  /**
2
+ * CodeDropz Uploader v1.3.6.4
3
  * Copyright 2018 Glen Mongaya
4
  * CodeDrop Drag&Drop Uploader
5
+ * @version 1.3.6.4
6
  * @author CodeDropz, Glen Don L. Mongaya
7
  * @license The MIT License (MIT)
8
  */
assets/js/codedropz-uploader.js ADDED
@@ -0,0 +1,364 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * CodeDropz Uploader v1.3.6.4
3
+ * Copyright 2018 Glen Mongaya
4
+ * CodeDrop Drag&Drop Uploader
5
+ * @version 1.3.6.4
6
+ * @author CodeDropz, Glen Don L. Mongaya
7
+ * @license The MIT License (MIT)
8
+ */
9
+
10
+ // CodeDropz Drag and Drop Plugin
11
+ (function($){
12
+ $.fn.CodeDropz_Uploader = function( settings ){
13
+
14
+ // Support multiple elements
15
+ this.each( function() {
16
+
17
+ // Parent input file type
18
+ var input = $(this);
19
+
20
+ // Extends options
21
+ var options = $.extend({
22
+ handler : input,
23
+ color : "#000",
24
+ background : '',
25
+ server_max_error : 'Uploaded file exceeds the maximum upload size of your server.',
26
+ max_file : input.data('max') ? input.data('max') : 10, // default 10
27
+ max_upload_size : input.data('limit') ? input.data('limit') : '10485760', // should be a bytes it's (5MB)
28
+ supported_type : input.data('type') ? input.data('type') : 'jpg|jpeg|JPG|png|gif|pdf|doc|docx|ppt|pptx|odt|avi|ogg|m4a|mov|mp3|mp4|mpg|wav|wmv|xls',
29
+ text : 'Drag & Drop Files Here',
30
+ separator : 'or',
31
+ button_text : 'Browse Files',
32
+ on_success : ''
33
+ }, settings);
34
+
35
+ // Get storage name
36
+ var dataStorageName = input.data('name') + '_count_files';
37
+
38
+ // File Counter
39
+ localStorage.setItem( dataStorageName, 1);
40
+
41
+ // Template Container
42
+ var cdropz_template = '<div class="codedropz-upload-handler">'
43
+ + '<div class="codedropz-upload-container">'
44
+ + '<div class="codedropz-upload-inner">'
45
+ + '<'+ dnd_cf7_uploader.drag_n_drop_upload.tag +'>'+ options.text +'</'+ dnd_cf7_uploader.drag_n_drop_upload.tag +'>'
46
+ + '<span>'+ options.separator +'</span>'
47
+ +'<div class="codedropz-btn-wrap"><a class="cd-upload-btn" href="javascript:void(0)">'+ options.button_text +'</a></div>'
48
+ +'</div>'
49
+ + '</div>'
50
+ + '<span class="dnd-upload-counter"><span>0</span> '+ dnd_cf7_uploader.dnd_text_counter +' '+ parseInt(options.max_file) +'</span>'
51
+ + '</div>';
52
+
53
+
54
+ // Wrap input fields
55
+ options.handler.wrapAll('<div class="codedropz-upload-wrapper"></div>');
56
+
57
+ // Remove special character
58
+ options.supported_type = options.supported_type.replace(/[^a-zA-Z0-9| ]/g, "");
59
+
60
+ // Element Handler
61
+ var form_handler = options.handler.parents('form'),
62
+ options_handler = options.handler.parents('.codedropz-upload-wrapper'),
63
+ btnOBJ = $('input[type="submit"]', form_handler );
64
+
65
+ // Append Format
66
+ options.handler.after( cdropz_template);
67
+
68
+ // preventing the unwanted behaviours
69
+ $('.codedropz-upload-handler', options_handler ).on( 'drag dragstart dragend dragover dragenter dragleave drop', function( e ){
70
+ e.preventDefault();
71
+ e.stopPropagation();
72
+ })
73
+
74
+ // dragover and dragenter - add class
75
+ $('.codedropz-upload-handler', options_handler ).on( 'dragover dragenter', function( e ){
76
+ $(this).addClass('codedropz-dragover');
77
+ });
78
+
79
+ // dragleave dragend drop - remove class
80
+ $('.codedropz-upload-handler', options_handler ).on( 'dragleave dragend drop', function( e ){
81
+ $(this).removeClass('codedropz-dragover');
82
+ });
83
+
84
+ // Browse button clicked
85
+ $( 'a.cd-upload-btn', options_handler ).on("click", function(e){
86
+ // stops the default action of an element from happening
87
+ e.preventDefault();
88
+
89
+ // Reset value
90
+ options.handler.val(null);
91
+
92
+ // Click input type[file] element
93
+ options.handler.click();
94
+ });
95
+
96
+ // when dropping files
97
+ $('.codedropz-upload-handler', options_handler ).on('drop', function(event){
98
+ // Run the uploader
99
+ DND_Setup_Uploader( event.originalEvent.dataTransfer.files, 'drop' );
100
+ });
101
+
102
+ // Trigger when input type[file] is click/changed
103
+ options.handler.on("change", function(e){
104
+ // Run the uploader
105
+ DND_Setup_Uploader( this.files, 'click' );
106
+ });
107
+
108
+ // Remove accept attribute on mobile devices
109
+ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
110
+ input.removeAttr('accept');
111
+ }
112
+
113
+ // Setup Uploader
114
+ var DND_Setup_Uploader = function( files, action ) {
115
+
116
+ // make sure we have files
117
+ if( ! files.length > 1 ) {
118
+ return;
119
+ }
120
+
121
+ // gathering the form data
122
+ var formData = new FormData();
123
+
124
+ // Append file
125
+ //formData.append('supported_type', options.supported_type ); @note : removed due Vulnerability
126
+ formData.append('size_limit', options.max_upload_size );
127
+ formData.append('action', 'dnd_codedropz_upload' );
128
+ formData.append('type', action );
129
+ formData.append('security', dnd_cf7_uploader.ajax_nonce );
130
+
131
+ // CF7 - upload field name & cf7 id
132
+ formData.append('form_id', input.data('id'));
133
+ formData.append('upload_name', input.data('name'));
134
+
135
+ // remove has error
136
+ $('span.has-error', options.handler ).remove();
137
+
138
+ // Loop files
139
+ $.each( files,function( i, file ) {
140
+
141
+ // Reset upload file type
142
+ if( typeof formData.delete !== 'undefined' ) {
143
+ formData.delete('upload-file');
144
+ }
145
+
146
+ // Limit file upload
147
+ if( localStorage.getItem( dataStorageName ) > options.max_file ) {
148
+ if( ! $('span.has-error-msg', options_handler ).length > 0 ) {
149
+ err_msg = dnd_cf7_uploader.drag_n_drop_upload.max_file_limit;
150
+ options_handler.append('<span class="has-error-msg">'+ err_msg.replace('%count%', options.max_file ) +'</span>');
151
+ }
152
+ return false;
153
+ }
154
+
155
+ // Create progress bar
156
+ var progressBarID = CodeDropz_Object.createProgressBar( file ),
157
+ has_error = false;
158
+
159
+ // File size limit - validation
160
+ if( file.size > options.max_upload_size ) {
161
+ $('.dnd-upload-details', $('#' + progressBarID)).append('<span class="has-error">'+ dnd_cf7_uploader.drag_n_drop_upload.large_file +'</span>');
162
+ has_error = true;
163
+ }
164
+
165
+ // Validate file type
166
+ regex_type = new RegExp("(.*?)\.("+ options.supported_type +")$");
167
+ if ( has_error === false && !( regex_type.test( file.name.toLowerCase() ) ) ) {
168
+ $('.dnd-upload-details', $('#' + progressBarID)).append('<span class="has-error">'+ dnd_cf7_uploader.drag_n_drop_upload.inavalid_type +'</span>');
169
+ has_error = true;
170
+ }
171
+
172
+ // Increment count
173
+ localStorage.setItem( dataStorageName, ( Number( localStorage.getItem( dataStorageName ) ) + 1 ) );
174
+
175
+ // Make sure there's no error
176
+ if( has_error === false ) {
177
+
178
+ // Append file
179
+ formData.append('upload-file', file );
180
+
181
+ // Process ajax upload
182
+ var dnd_ajax_upload = $.ajax({
183
+ url : options.ajax_url,
184
+ type : form_handler.attr('method'),
185
+ data : formData,
186
+ dataType : 'json',
187
+ cache : false,
188
+ contentType : false,
189
+ processData : false,
190
+ xhr : function(){
191
+ //objects to interact with servers.
192
+ var _xhr = new window.XMLHttpRequest();
193
+
194
+ // reference : https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery
195
+ _xhr.upload.addEventListener("progress", function(event){
196
+ if ( event.lengthComputable ) {
197
+ var percentComplete = ( event.loaded / event.total );
198
+ var percentage = parseInt( percentComplete * 100 );
199
+
200
+ // Progress Loading
201
+ CodeDropz_Object.setProgressBar( progressBarID, percentage - 1 );
202
+
203
+ }
204
+ }, false);
205
+
206
+ return _xhr;
207
+ },
208
+ complete : function() {
209
+ // Set progress bar to 100%
210
+ CodeDropz_Object.setProgressBar( progressBarID, 100 );
211
+ },
212
+ success: function(response) {
213
+ if( response.success ) {
214
+
215
+ CodeDropz_Object.setProgressBar( progressBarID, 100 );
216
+
217
+ // Callback on success
218
+ if ( $.isFunction( options.on_success ) ) {
219
+ options.on_success.call( this, input, progressBarID, response );
220
+ }
221
+
222
+ }else {
223
+ $('.dnd-progress-bar', $('#' + progressBarID)).remove();
224
+ $('.dnd-upload-details', $('#' + progressBarID)).append('<span class="has-error">'+ response.data +'</span>');
225
+ $('input[type="submit"]', form_handler ).removeClass('disabled').prop( "disabled", false );
226
+ $('#' + progressBarID ).removeClass('in-progress');
227
+ }
228
+ },
229
+ error: function(xhr,ajax,thrownError ) {
230
+ $('.dnd-progress-bar', $('#' + progressBarID)).remove();
231
+ $('.dnd-upload-details', $('#' + progressBarID)).append('<span class="has-error">'+ options.server_max_error +'</span>');
232
+ $('input[type="submit"]', form_handler ).removeClass('disabled').prop( "disabled", false );
233
+ $('#' + progressBarID ).removeClass('in-progress');
234
+ }
235
+ });
236
+ }
237
+ });
238
+
239
+ }
240
+
241
+ // CodeDropz object and functions
242
+ var CodeDropz_Object = {
243
+
244
+ // Create progress bar
245
+ createProgressBar : function( file ) {
246
+
247
+ // Setup progress bar variable
248
+ var upload_handler = $('.codedropz-upload-handler', options_handler ),
249
+ generated_ID = 'dnd-file-' + Math.random().toString(36).substr(2, 9);
250
+
251
+ // Setup progressbar elements
252
+ var fileDetails = '<div class="dnd-upload-image"><span class="file"></span></div>'
253
+ + '<div class="dnd-upload-details">'
254
+ + '<span class="name"><span>'+ file.name +'</span><em>('+ CodeDropz_Object.bytesToSize( file.size ) +')</em></span>'
255
+ + '<a href="javascript:void(0)" title="'+ dnd_cf7_uploader.drag_n_drop_upload.delete.title +'" class="remove-file" data-storage="'+ dataStorageName +'"><span class="dnd-icon-remove"></span></a>'
256
+ + '<span class="dnd-progress-bar"><span></span></span>'
257
+ + '</div>';
258
+
259
+ // Append Status Bar
260
+ upload_handler.after('<div id="'+ generated_ID +'" class="dnd-upload-status">'+ fileDetails +'</div>');
261
+
262
+ return generated_ID;
263
+ },
264
+
265
+ // Process progressbar ( Animate progress )
266
+ setProgressBar : function( statusbar, percent ) {
267
+ var statusBar = $( '.dnd-progress-bar', $('#' + statusbar) );
268
+ if( statusBar.length > 0 ) {
269
+ // Disable submit button
270
+ CodeDropz_Object.disableBtn( btnOBJ );
271
+
272
+ // Compute Progress bar
273
+ progress_width = ( percent * statusBar.width() / 100);
274
+
275
+ // Set status bar in-progress
276
+ $('#' + statusbar).addClass('in-progress');
277
+
278
+ if( percent == 100 ) {
279
+ $('span', statusBar ).width('100%').text( percent + '% ' );
280
+ }else {
281
+ $('span', statusBar ).animate({ width: progress_width }, 10).text( percent + '% ');
282
+ }
283
+
284
+ if( percent == 100 ) {
285
+ $('#' + statusbar).addClass('complete').removeClass('in-progress');
286
+ }
287
+ }
288
+ return false;
289
+ },
290
+
291
+ // Size Conversion
292
+ bytesToSize : function( bytes ) {
293
+
294
+ if( bytes === 0 )
295
+ return '0';
296
+
297
+ kBytes = (bytes / 1024);
298
+ fileSize = ( kBytes >= 1024 ? ( kBytes / 1024 ).toFixed(2) + 'MB' : kBytes.toFixed(2) + 'KB' );
299
+
300
+ return fileSize;
301
+ },
302
+
303
+ // Disable button
304
+ disableBtn : function( BtnOJB ) {
305
+ if( BtnOJB.length > 0 ) {
306
+ BtnOJB.addClass('disable').prop( "disabled", true );
307
+ }
308
+ }
309
+ };
310
+ });// end each
311
+
312
+ // Remove File
313
+ $(document).on("click",'.dnd-icon-remove',function(e){
314
+ var _self = $(this),
315
+ _dnd_status = _self.parents('.dnd-upload-status'),
316
+ _parent_wrap = _self.parents('.codedropz-upload-wrapper'),
317
+ removeStorageData = _self.parent('a').attr('data-storage'),
318
+ storageCount = Number( localStorage.getItem( removeStorageData ) );
319
+
320
+ // If file upload is in progress don't delete
321
+ if( _dnd_status.hasClass('in-progress')) {
322
+ return false;
323
+ }
324
+
325
+ // Direct remove the file if there's any error.
326
+ if( $( '.has-error', _dnd_status ).length > 0 ) {
327
+ _dnd_status.remove(); localStorage.setItem( removeStorageData, ( storageCount - 1 ) );
328
+ return false;
329
+ }
330
+
331
+ // Change text Status
332
+ _self.addClass('deleting').text( dnd_cf7_uploader.drag_n_drop_upload.delete.text + '...');
333
+
334
+ // Request ajax image delete
335
+ var delData = {
336
+ path : _dnd_status.find('input[type="hidden"]').val(),
337
+ action : 'dnd_codedropz_upload_delete',
338
+ security : dnd_cf7_uploader.ajax_nonce
339
+ };
340
+
341
+ $.post( settings.ajax_url, delData, function(response) {
342
+ if( response.success ) {
343
+
344
+ // Reduce file count and status bar element.
345
+ _dnd_status.remove(); localStorage.setItem( removeStorageData, ( storageCount - 1 ) );
346
+
347
+ // Remove error msg
348
+ if( $('.dnd-upload-status', _parent_wrap ).length <= 1 ) {
349
+ $('span.has-error-msg', _parent_wrap ).remove();
350
+ }
351
+
352
+ // Update Counter
353
+ $('.dnd-upload-counter span', _parent_wrap ).text( Number( localStorage.getItem( removeStorageData ) ) - 1 );
354
+ }
355
+ });
356
+
357
+ // Clear message
358
+ $('span.has-error-msg').remove();
359
+
360
+ });
361
+
362
+ }; // end fn.function
363
+
364
+ }( jQuery ));
drag-n-drop-upload-cf7.php CHANGED
@@ -6,7 +6,7 @@
6
  * Description: This simple plugin create Drag & Drop or choose Multiple File upload in your Confact Form 7 Forms.
7
  * Text Domain: drag-and-drop-multiple-file-upload-contact-form-7
8
  * Domain Path: /languages
9
- * Version: 1.3.6.3
10
  * Author: Glen Don L. Mongaya
11
  * Author URI: http://codedropz.com
12
  * License: GPL2
@@ -21,7 +21,7 @@
21
  define( 'dnd_upload_cf7', true );
22
 
23
  /** Define plugin Version */
24
- define( 'dnd_upload_cf7_version', '1.3.6.3' );
25
 
26
  /** Define constant Plugin Directories */
27
  define( 'dnd_upload_cf7_directory', untrailingslashit( dirname( __FILE__ ) ) );
6
  * Description: This simple plugin create Drag & Drop or choose Multiple File upload in your Confact Form 7 Forms.
7
  * Text Domain: drag-and-drop-multiple-file-upload-contact-form-7
8
  * Domain Path: /languages
9
+ * Version: 1.3.6.4
10
  * Author: Glen Don L. Mongaya
11
  * Author URI: http://codedropz.com
12
  * License: GPL2
21
  define( 'dnd_upload_cf7', true );
22
 
23
  /** Define plugin Version */
24
+ define( 'dnd_upload_cf7_version', '1.3.6.4' );
25
 
26
  /** Define constant Plugin Directories */
27
  define( 'dnd_upload_cf7_directory', untrailingslashit( dirname( __FILE__ ) ) );
inc/dnd-upload-cf7.php CHANGED
@@ -525,7 +525,7 @@
525
  $atts = wpcf7_format_atts( $atts );
526
 
527
  // Return our element and attributes
528
- return sprintf('<span class="wpcf7-form-control-wrap %1$s"><input %2$s />%3$s</span>', sanitize_html_class( $tag->name ), $atts, $validation_error );
529
  }
530
 
531
  // Encode type filter to support multipart since this is input type file
@@ -806,6 +806,7 @@
806
  wp_send_json_error( '('. $file['error'] .') ' . ( $failed_error ? $failed_error : dnd_cf7_error_msg('failed_upload') ) );
807
  }else{
808
 
 
809
  $files = array(
810
  'path' => basename( $path['upload_dir'] ),
811
  'file' => str_replace('/','-', $filename)
@@ -814,6 +815,10 @@
814
  // Change file permission to 0400
815
  chmod( $new_file, 0644 );
816
 
 
 
 
 
817
  wp_send_json_success( $files );
818
  }
819
 
525
  $atts = wpcf7_format_atts( $atts );
526
 
527
  // Return our element and attributes
528
+ return sprintf('<span class="wpcf7-form-control-wrap" data-name="%1$s"><input %2$s />%3$s</span>', sanitize_html_class( $tag->name ), $atts, $validation_error );
529
  }
530
 
531
  // Encode type filter to support multipart since this is input type file
806
  wp_send_json_error( '('. $file['error'] .') ' . ( $failed_error ? $failed_error : dnd_cf7_error_msg('failed_upload') ) );
807
  }else{
808
 
809
+ // Setup path and files url
810
  $files = array(
811
  'path' => basename( $path['upload_dir'] ),
812
  'file' => str_replace('/','-', $filename)
815
  // Change file permission to 0400
816
  chmod( $new_file, 0644 );
817
 
818
+ // Allow other plugin to hook
819
+ do_action('wpcf7_upload_file_name_custom', $new_file, $filename );
820
+
821
+ // Return json files
822
  wp_send_json_success( $files );
823
  }
824
 
readme.txt CHANGED
@@ -3,8 +3,8 @@ Contributors: glenwpcoder, yordansoares
3
  Donate link : http://codedropz.com/donation
4
  Tags: drag and drop, contact form 7, ajax uploader, multiple file, upload, contact form 7 uploader
5
  Requires at least: 3.0.1
6
- Tested up to: 5.9
7
- Stable tag: 1.3.6.3
8
  Requires PHP: 5.2.4
9
  License: GPLv2 or later
10
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -157,6 +157,10 @@ To install this plugin see below:
157
 
158
  == Changelog ==
159
 
 
 
 
 
160
  = 1.3.6.3 =
161
  - Fixed - Security issues (Cross-Site Scripting through SVG files via remote upload)
162
  - New - Filter `dnd_cf7_data_options` to manualy change the browse text and label text.
3
  Donate link : http://codedropz.com/donation
4
  Tags: drag and drop, contact form 7, ajax uploader, multiple file, upload, contact form 7 uploader
5
  Requires at least: 3.0.1
6
+ Tested up to: 6.0
7
+ Stable tag: 1.3.6.4
8
  Requires PHP: 5.2.4
9
  License: GPLv2 or later
10
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
157
 
158
  == Changelog ==
159
 
160
+ = 1.3.6.4 =
161
+ - Tested on latest version of wordpress 6.0.
162
+ - Added Compatibility on Contact Form 7 version 5.6.
163
+
164
  = 1.3.6.3 =
165
  - Fixed - Security issues (Cross-Site Scripting through SVG files via remote upload)
166
  - New - Filter `dnd_cf7_data_options` to manualy change the browse text and label text.