* CodeDropz Uploader v1.3.6.8
* Copyright 2018 Glen Mongaya
* CodeDrop Drag&Drop Uploader
* @author CodeDropz, Glen Don L. Mongaya
* @license The MIT License (MIT)
// CodeDropz Drag and Drop Plugin
$.fn.CodeDropz_Uploader = function( settings ){
// Generate & check nonce
if( $('form.wpcf7-form').length > 0 ){
const form = $('form.wpcf7-form');
$.post( dnd_cf7_uploader.ajax_url, { action: '_wpcf7_check_nonce', _ajax_nonce: dnd_cf7_uploader.ajax_nonce }, function(response){
if( response.success && response.data ){
dnd_cf7_uploader.ajax_nonce = response.data;
// Support multiple elements
// Parent input file type
server_max_error : 'Uploaded file exceeds the maximum upload size of your server.',
max_file : input.data('max') ? input.data('max') : 10, // default 10
max_upload_size : input.data('limit') ? input.data('limit') : '10485760', // should be a bytes it's (5MB)
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',
text : 'Drag & Drop Files Here',
button_text : 'Browse Files',
var dataStorageName = input.data('name') + '_count_files';
localStorage.setItem( dataStorageName, 1);
var cdropz_template = '<div class="codedropz-upload-handler">'
+ '<div class="codedropz-upload-container">'
+ '<div class="codedropz-upload-inner">'
+ '<'+ dnd_cf7_uploader.drag_n_drop_upload.tag +'>'+ options.text +'</'+ dnd_cf7_uploader.drag_n_drop_upload.tag +'>'
+ '<span>'+ options.separator +'</span>'
+'<div class="codedropz-btn-wrap"><a class="cd-upload-btn" href="javascript:void(0)">'+ options.button_text +'</a></div>'
+ '<span class="dnd-upload-counter"><span>0</span> '+ dnd_cf7_uploader.dnd_text_counter +' '+ parseInt(options.max_file) +'</span>'
options.handler.wrapAll('<div class="codedropz-upload-wrapper"></div>');
// Remove special character
options.supported_type = options.supported_type.replace(/[^a-zA-Z0-9| ]/g, "");
var form_handler = options.handler.parents('form'),
options_handler = options.handler.parents('.codedropz-upload-wrapper'),
btnOBJ = $('input[type="submit"]', form_handler );
options.handler.after( cdropz_template);
// preventing the unwanted behaviours
$('.codedropz-upload-handler', options_handler ).on( 'drag dragstart dragend dragover dragenter dragleave drop', function( e ){
// dragover and dragenter - add class
$('.codedropz-upload-handler', options_handler ).on( 'dragover dragenter', function( e ){
$(this).addClass('codedropz-dragover');
// dragleave dragend drop - remove class
$('.codedropz-upload-handler', options_handler ).on( 'dragleave dragend drop', function( e ){
$(this).removeClass('codedropz-dragover');
$( 'a.cd-upload-btn', options_handler ).on("click", function(e){
// stops the default action of an element from happening
options.handler.val(null);
// Click input type[file] element
$('.codedropz-upload-handler', options_handler ).on('drop', function(event){
DND_Setup_Uploader( event.originalEvent.dataTransfer.files, 'drop' );
// Trigger when input type[file] is click/changed
options.handler.on("change", function(e){
DND_Setup_Uploader( this.files, 'click' );
// Remove accept attribute on mobile devices
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
input.removeAttr('accept');
var DND_Setup_Uploader = function( files, action ) {
// make sure we have files
if( ! files.length > 1 ) {
// gathering the form data
var formData = new FormData();
//formData.append('supported_type', options.supported_type ); @note : removed due Vulnerability
//formData.append('size_limit', options.max_upload_size );
formData.append('action', 'dnd_codedropz_upload' );
formData.append('type', action );
formData.append('security', dnd_cf7_uploader.ajax_nonce );
// CF7 - upload field name & cf7 id
formData.append('form_id', input.data('id'));
formData.append('upload_name', input.data('name'));
if( input.data('black-list') ){
formData.append('blacklist-types', input.data('black-list'));
$('span.has-error', options.handler ).remove();
$.each( files,function( i, file ) {
// Reset upload file type
if( typeof formData.delete !== 'undefined' ) {
formData.delete('upload-file');
if( localStorage.getItem( dataStorageName ) > options.max_file ) {
if( ! $('span.has-error-msg', options_handler ).length > 0 ) {
err_msg = dnd_cf7_uploader.drag_n_drop_upload.max_file_limit;
options_handler.append('<span class="has-error-msg">'+ err_msg.replace('%count%', options.max_file ) +'</span>');
var progressBarID = CodeDropz_Object.createProgressBar( file ),
// File size limit - validation
if( file.size > options.max_upload_size ) {
$('.dnd-upload-details', $('#' + progressBarID)).append('<span class="has-error">'+ dnd_cf7_uploader.drag_n_drop_upload.large_file +'</span>');
regex_type = new RegExp("(.*?)\.("+ options.supported_type +")$");
if ( has_error === false && !( regex_type.test( file.name.toLowerCase() ) ) ) {
$('.dnd-upload-details', $('#' + progressBarID)).append('<span class="has-error">'+ dnd_cf7_uploader.drag_n_drop_upload.inavalid_type +'</span>');
localStorage.setItem( dataStorageName, ( Number( localStorage.getItem( dataStorageName ) ) + 1 ) );
// Make sure there's no error
if( has_error === false ) {
formData.append('upload-file', file );
var dnd_ajax_upload = $.ajax({
type : form_handler.attr('method'),
//objects to interact with servers.
var _xhr = new window.XMLHttpRequest();
// reference : https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery
_xhr.upload.addEventListener("progress", function(event){
if ( event.lengthComputable ) {
var percentComplete = ( event.loaded / event.total );
var percentage = parseInt( percentComplete * 100 );
CodeDropz_Object.setProgressBar( progressBarID, percentage - 1 );
// Set progress bar to 100%
CodeDropz_Object.setProgressBar( progressBarID, 100 );
success: function(response) {
CodeDropz_Object.setProgressBar( progressBarID, 100 );
if ( $.isFunction( options.on_success ) ) {
options.on_success.call( this, input, progressBarID, response );
$('.dnd-progress-bar', $('#' + progressBarID)).remove();
$('.dnd-upload-details', $('#' + progressBarID)).append('<span class="has-error">'+ response.data +'</span>');
$('input[type="submit"]', form_handler ).removeClass('disabled').prop( "disabled", false );
$('#' + progressBarID ).removeClass('in-progress');
error: function(xhr,ajax,thrownError ) {
$('.dnd-progress-bar', $('#' + progressBarID)).remove();
$('.dnd-upload-details', $('#' + progressBarID)).append('<span class="has-error">'+ options.server_max_error +'</span>');
$('input[type="submit"]', form_handler ).removeClass('disabled').prop( "disabled", false );
$('#' + progressBarID ).removeClass('in-progress');
// CodeDropz object and functions
createProgressBar : function( file ) {
// Setup progress bar variable
var upload_handler = $('.codedropz-upload-handler', options_handler ),
generated_ID = 'dnd-file-' + Math.random().toString(36).substr(2, 9);
// Setup progressbar elements
var fileDetails = '<div class="dnd-upload-image"><span class="file"></span></div>'
+ '<div class="dnd-upload-details">'
+ '<span class="name"><span>'+ file.name +'</span><em>('+ CodeDropz_Object.bytesToSize( file.size ) +')</em></span>'
+ '<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>'
+ '<span class="dnd-progress-bar"><span></span></span>'
upload_handler.after('<div id="'+ generated_ID +'" class="dnd-upload-status">'+ fileDetails +'</div>');
// Process progressbar ( Animate progress )
setProgressBar : function( statusbar, percent ) {
var statusBar = $( '.dnd-progress-bar', $('#' + statusbar) );
if( statusBar.length > 0 ) {
CodeDropz_Object.disableBtn( btnOBJ );
progress_width = ( percent * statusBar.width() / 100);
// Set status bar in-progress
$('#' + statusbar).addClass('in-progress');
$('span', statusBar ).width('100%').text( percent + '% ' );
$('span', statusBar ).animate({ width: progress_width }, 10).text( percent + '% ');
$('#' + statusbar).addClass('complete').removeClass('in-progress');
bytesToSize : function( bytes ) {
fileSize = ( kBytes >= 1024 ? ( kBytes / 1024 ).toFixed(2) + 'MB' : kBytes.toFixed(2) + 'KB' );
disableBtn : function( BtnOJB ) {
if( BtnOJB.length > 0 ) {
BtnOJB.addClass('disable').prop( "disabled", true );
$(document).on("click",'.dnd-icon-remove',function(e){
_dnd_status = _self.parents('.dnd-upload-status'),
_parent_wrap = _self.parents('.codedropz-upload-wrapper'),
removeStorageData = _self.parent('a').attr('data-storage'),
storageCount = Number( localStorage.getItem( removeStorageData ) );
// If file upload is in progress don't delete
if( _dnd_status.hasClass('in-progress')) {
// Direct remove the file if there's any error.
if( $( '.has-error', _dnd_status ).length > 0 ) {
_dnd_status.remove(); localStorage.setItem( removeStorageData, ( storageCount - 1 ) );
_self.addClass('deleting').text( dnd_cf7_uploader.drag_n_drop_upload.delete.text + '...');
// Request ajax image delete
path : _dnd_status.find('input[type="hidden"]').val(),
action : 'dnd_codedropz_upload_delete',
security : dnd_cf7_uploader.ajax_nonce
$.post( settings.ajax_url, delData, function(response) {
// Reduce file count and status bar element.
_dnd_status.remove(); localStorage.setItem( removeStorageData, ( storageCount - 1 ) );
if( $('.dnd-upload-status', _parent_wrap ).length <= 1 ) {
$('span.has-error-msg', _parent_wrap ).remove();
$('.dnd-upload-counter span', _parent_wrap ).text( Number( localStorage.getItem( removeStorageData ) ) - 1 );
$('span.has-error-msg').remove();