| 1 |
jQuery(document).ready(function(){ |
| 2 |
validate_simple_upload(); |
| 3 |
|
| 4 |
jQuery(document).on( 'click', '.wppb-rpf-add', function( event ){ |
| 5 |
validate_simple_upload(); |
| 6 |
}); |
| 7 |
|
| 8 |
if( typeof wp !== "undefined" && typeof wp.media !== "undefined" ){ |
| 9 |
// Uploading files |
| 10 |
var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id |
| 11 |
|
| 12 |
jQuery(document).on( 'click', '.wppb_upload_button', function( event ){ |
| 13 |
event.preventDefault(); |
| 14 |
|
| 15 |
var set_to_post_id = ''; // Set this |
| 16 |
|
| 17 |
var file_frame; |
| 18 |
var uploadInputId = jQuery( this ).data( 'upload_input' ); |
| 19 |
var uploadButton = jQuery( this ); |
| 20 |
|
| 21 |
/* set default tab to upload file */ |
| 22 |
wp.media.controller.Library.prototype.defaults.contentUserSetting = false; |
| 23 |
wp.media.controller.Library.prototype.defaults.router = false; |
| 24 |
wp.media.controller.Library.prototype.defaults.searchable = true; |
| 25 |
wp.media.controller.Library.prototype.defaults.sortable = false; |
| 26 |
wp.media.controller.Library.prototype.defaults.date = false; |
| 27 |
|
| 28 |
// If the media frame already exists, reopen it. |
| 29 |
if ( file_frame ) { |
| 30 |
// Set the post ID to what we want |
| 31 |
file_frame.uploader.uploader.param( 'post_id', set_to_post_id ); |
| 32 |
// Open frame |
| 33 |
file_frame.open(); |
| 34 |
return; |
| 35 |
} else { |
| 36 |
// Set the wp.media post id so the uploader grabs the ID we want when initialised |
| 37 |
wp.media.model.settings.post.id = set_to_post_id; |
| 38 |
} |
| 39 |
|
| 40 |
// Create the media frame. |
| 41 |
file_frame = wp.media.frames.file_frame = wp.media({ |
| 42 |
title: jQuery( this ).data( 'uploader_title' ), |
| 43 |
button: { |
| 44 |
text: jQuery( this ).data( 'uploader_button_text' ) |
| 45 |
}, |
| 46 |
multiple: false // Set to true to allow multiple files to be selected |
| 47 |
}); |
| 48 |
|
| 49 |
/* send the meta_name of the field */ |
| 50 |
file_frame.uploader.options.uploader['params']['wppb_upload'] = 'true'; |
| 51 |
file_frame.uploader.options.uploader['params']['meta_name'] = jQuery( this ).data( 'upload_mn' ); |
| 52 |
|
| 53 |
// When an image is selected, run a callback. |
| 54 |
file_frame.on( 'select', function() { |
| 55 |
// We set multiple to false so only get one image from the uploader |
| 56 |
attachments = file_frame.state().get('selection').toJSON(); |
| 57 |
var attids = []; |
| 58 |
|
| 59 |
for( var i=0;i < attachments.length; i++ ){ |
| 60 |
// Do something with attachment.id and/or attachment.url here |
| 61 |
attids.push( attachments[i].id ); |
| 62 |
result = '<div class="upload-field-details" id="'+ uploadInputId +'_info_container" data-attachment_id="'+ attachments[i].id +'">'; |
| 63 |
if( attachments[i].sizes != undefined ){ |
| 64 |
if( attachments[i].sizes.thumbnail != undefined ) |
| 65 |
thumb = attachments[i].sizes.thumbnail; |
| 66 |
else |
| 67 |
thumb = attachments[i].sizes.full; |
| 68 |
thumbnailUrl = thumb.url; |
| 69 |
} |
| 70 |
else{ |
| 71 |
thumbnailUrl = attachments[i].icon; |
| 72 |
} |
| 73 |
|
| 74 |
result += '<div class="file-thumb">'; |
| 75 |
result += '<a href="'+ attachments[i].url +'" target="_blank" class="wppb-attachment-link">'; |
| 76 |
result += '<img width="80" height="80" src="'+ thumbnailUrl +'"/>'; |
| 77 |
result += '</a>'; |
| 78 |
result += '</div>'; |
| 79 |
result += '<p><span class="file-name">'+attachments[i].filename+'</span><span class="file-type">'+attachments[i].mime +'</span><span class="wppb-remove-upload" tabindex="0">'+wppb_upload_script_vars.remove_link_text+'</span></p></div>'; |
| 80 |
|
| 81 |
// if multiple upload false remove previous upload details |
| 82 |
if( uploadButton.data( 'multiple_upload' ) == false ){ |
| 83 |
jQuery( '.upload-field-details', uploadButton.parent() ).remove(); |
| 84 |
} |
| 85 |
|
| 86 |
uploadButton.before( result ); |
| 87 |
uploadButton.hide(); |
| 88 |
|
| 89 |
} |
| 90 |
// turn into comma separated string |
| 91 |
attids = attids.join(','); |
| 92 |
jQuery( 'input[id="'+uploadInputId+'"]', uploadButton.parent() ).val( attids ); |
| 93 |
|
| 94 |
// Restore the main post ID |
| 95 |
wp.media.model.settings.post.id = wp_media_post_id; |
| 96 |
|
| 97 |
jQuery(document).trigger( 'wppb_file_uploaded' ) |
| 98 |
|
| 99 |
}); |
| 100 |
|
| 101 |
// Finally, open the modal |
| 102 |
file_frame.open(); |
| 103 |
// remove tabs from the top ( this is done higher in the code when setting router to false ) |
| 104 |
//jQuery('.media-frame-router').remove(); |
| 105 |
|
| 106 |
jQuery('.media-frame-title').append('<style type="text/css">label.setting, .edit-attachment{display:none !important;}</style>'); |
| 107 |
}); |
| 108 |
|
| 109 |
// Restore the main ID when the add media button is pressed |
| 110 |
jQuery('a.add_media').on('click', function() { |
| 111 |
wp.media.model.settings.post.id = wp_media_post_id; |
| 112 |
}); |
| 113 |
} |
| 114 |
|
| 115 |
// Bind independently of wp.media: users without upload_files get the simple |
| 116 |
// file input and never load the media gallery scripts. |
| 117 |
jQuery(document).on('keypress', '.wppb-remove-upload', function(e){ |
| 118 |
if(e.which == 13) { |
| 119 |
jQuery(this).trigger('click'); |
| 120 |
} |
| 121 |
}); |
| 122 |
|
| 123 |
jQuery(document).on('click', '.wppb-remove-upload', function(e){ |
| 124 |
if( confirm( 'Are you sure ?' ) ){ |
| 125 |
/* update hidden input */ |
| 126 |
simple_upload_button = jQuery(this).closest('li, td, p.form-row, div.form-row').find('input[type="file"]'); |
| 127 |
if (simple_upload_button.attr('name')) { |
| 128 |
upload_input_id = simple_upload_button.attr('name').split('_').slice(2).join('_'); |
| 129 |
upload_input_id = upload_input_id.split('-').join('_'); |
| 130 |
upload_input = jQuery("#" + upload_input_id); |
| 131 |
} |
| 132 |
else{ |
| 133 |
upload_input = jQuery(this).closest('li, td, p.form-row, div.form-row').find('input[type="hidden"]'); |
| 134 |
} |
| 135 |
removedAttachement = jQuery(this).parent().parent('.upload-field-details').data('attachment_id'); |
| 136 |
uploadAttachemnts = upload_input.val(); |
| 137 |
uploadAttachemntsArray = uploadAttachemnts.split(','); |
| 138 |
newuploadAttachments = []; |
| 139 |
for (var i = 0; i < uploadAttachemntsArray.length; i++) { |
| 140 |
if (uploadAttachemntsArray[i] != removedAttachement) |
| 141 |
newuploadAttachments.push(uploadAttachemntsArray[i]); |
| 142 |
} |
| 143 |
newuploadAttachments = newuploadAttachments.join(','); |
| 144 |
upload_input.val(newuploadAttachments); |
| 145 |
|
| 146 |
/* remove the attachment details */ |
| 147 |
jQuery(this).parent().parent('.upload-field-details').next('a').show(); |
| 148 |
simple_upload_button.show(); |
| 149 |
simple_upload_button.val(''); |
| 150 |
jQuery(this).parent().parent('.upload-field-details').remove(); |
| 151 |
|
| 152 |
jQuery(document).trigger( 'wppb_removed_uploaded_file' ) |
| 153 |
|
| 154 |
} |
| 155 |
}); |
| 156 |
}); |
| 157 |
|
| 158 |
function validate_simple_upload(){ |
| 159 |
jQuery("input:file").on('change', function(e){ |
| 160 |
//handle simple upload |
| 161 |
var uploadInputName = jQuery(this).attr('name'); |
| 162 |
var uploadButton = jQuery(this); |
| 163 |
var oFReader = new FileReader(); |
| 164 |
var attachment = e.target.files[0]; |
| 165 |
oFReader.readAsDataURL(attachment); |
| 166 |
oFReader.onload = function (oFREvent) { |
| 167 |
var src = oFREvent.target.result; |
| 168 |
var error = ''; |
| 169 |
jQuery("#p_" + uploadInputName).text(error); |
| 170 |
uploadInputId = uploadInputName.split('-').join('_'); |
| 171 |
//Check allowed upload type by wordpress |
| 172 |
allowed_mime_types = wppb_allowed_wordpress_formats.allowed_wordpress_formats; |
| 173 |
allowed_by_wordpress = false; |
| 174 |
for (var key in allowed_mime_types){ |
| 175 |
allowed_type = allowed_mime_types[key]; |
| 176 |
if (attachment.type === allowed_type){ |
| 177 |
allowed_by_wordpress = true; |
| 178 |
possible_extensions = key.split('|'); |
| 179 |
} |
| 180 |
} |
| 181 |
if (allowed_by_wordpress) { |
| 182 |
//Check allowed extensions |
| 183 |
allowed_extensions = jQuery("#allowed_extensions_" + uploadInputId).val(); |
| 184 |
if (allowed_extensions !== '') { |
| 185 |
var allowed = false; |
| 186 |
allowed_extensions = allowed_extensions.split(','); |
| 187 |
for (var i = 0; i < allowed_extensions.length; i++) { |
| 188 |
if (possible_extensions.includes(allowed_extensions[i])) { |
| 189 |
allowed = true; |
| 190 |
} |
| 191 |
} |
| 192 |
if (allowed == false) { |
| 193 |
error = wppb_error_messages.upload_type_error_message; |
| 194 |
} |
| 195 |
} |
| 196 |
//Check size limit — prefer per-field limit, fall back to global |
| 197 |
var perFieldLimit = jQuery("#size_limit_" + uploadInputId).val(); |
| 198 |
var allowed_size_limit = perFieldLimit ? parseFloat(perFieldLimit) : wppb_limit.size_limit; |
| 199 |
if (attachment.size > allowed_size_limit) { |
| 200 |
var limit = allowed_size_limit / (1024 * 1024); |
| 201 |
error = wppb_error_messages.limit_error_message + limit + 'MB.'; |
| 202 |
} |
| 203 |
} |
| 204 |
else{ |
| 205 |
error = wppb_error_messages.upload_type_error_message; |
| 206 |
} |
| 207 |
if (error !== '') { |
| 208 |
jQuery("#p_" + uploadInputName).text(error); |
| 209 |
uploadButton.val(''); |
| 210 |
} else { |
| 211 |
var fieldName = uploadInputName.replace(/^(simple_upload_)/,'').replace(/-/g,'_'); |
| 212 |
var formData = new FormData(); |
| 213 |
/* Route to the correct AJAX action based on the field type. Rely on the |
| 214 |
data-field_type attribute (set for both Upload and Avatar fields) so the |
| 215 |
routing is correct regardless of layout. Fall back to the container check |
| 216 |
for older markup that doesn't expose the attribute. The back-end user page |
| 217 |
doesn't wrap fields in .wppb-upload, so the container check alone would |
| 218 |
wrongly send Upload fields to the avatar handler. */ |
| 219 |
var fieldType = uploadButton.data('field_type'); |
| 220 |
var uploadAction; |
| 221 |
if ( fieldType === 'Upload' ) { |
| 222 |
uploadAction = 'wppb_ajax_simple_upload'; |
| 223 |
} else if ( fieldType === 'Avatar' ) { |
| 224 |
uploadAction = 'wppb_ajax_simple_avatar'; |
| 225 |
} else { |
| 226 |
uploadAction = uploadButton.closest('.wppb-upload').length > 0 ? 'wppb_ajax_simple_upload' : 'wppb_ajax_simple_avatar'; |
| 227 |
} |
| 228 |
formData.append('action', uploadAction); |
| 229 |
formData.append(fieldName, jQuery(e.target).prop('files')[0]); |
| 230 |
formData.append('nonce', wppb_upload_script_vars.nonce); |
| 231 |
formData.append('name', fieldName); |
| 232 |
|
| 233 |
var simpleUploadFields = uploadButton.closest('.wppb-user-forms').find('.wppb_simple_upload'); |
| 234 |
|
| 235 |
simpleUploadFields.each(function() { |
| 236 |
jQuery( this ).prop( 'disabled', true ); |
| 237 |
}); |
| 238 |
|
| 239 |
var submitAlreadyDisabled = false; |
| 240 |
var submitButtonText = uploadButton.closest('.wppb-user-forms').find('.submit.button').val(); |
| 241 |
jQuery("input#"+fieldName).closest('.wppb-user-forms').find('.submit.button').val( 'Uploading file...' ); |
| 242 |
if ( jQuery( 'p.form-submit .submit.button' ).prop( 'disabled' ) ) { |
| 243 |
submitAlreadyDisabled = true; |
| 244 |
} else { |
| 245 |
jQuery( 'p.form-submit .submit.button' ).prop( 'disabled', true ); |
| 246 |
} |
| 247 |
|
| 248 |
jQuery.ajax({ |
| 249 |
url: wppb_upload_script_vars.ajaxUrl, |
| 250 |
type: 'POST', |
| 251 |
contentType: false, |
| 252 |
processData: false, |
| 253 |
data: formData, |
| 254 |
success: function(response){ |
| 255 |
var parsed = JSON.parse(response); |
| 256 |
|
| 257 |
if ( parsed && parsed.errors ) { |
| 258 |
jQuery("input#"+fieldName).val(null); |
| 259 |
jQuery('.wppb_simple_upload', jQuery("input#"+fieldName).parent()).val(null); |
| 260 |
} else { |
| 261 |
jQuery("input#"+fieldName).val(parsed); |
| 262 |
} |
| 263 |
|
| 264 |
if ( !submitAlreadyDisabled ) { |
| 265 |
jQuery("p.form-submit .submit.button").prop('disabled', false); |
| 266 |
} |
| 267 |
simpleUploadFields.each(function() { |
| 268 |
jQuery( this ).prop( 'disabled', false ); |
| 269 |
}); |
| 270 |
jQuery("input#"+fieldName).closest('.wppb-user-forms').find('.submit.button').val( submitButtonText ); |
| 271 |
}, |
| 272 |
}); |
| 273 |
} |
| 274 |
}; |
| 275 |
}); |
| 276 |
} |
