Visual Composer by default doesn’t support “attach_file” type. Therefore, at any of point of time if we need to add files, we should add new attribute type for content element attributes that can attach file.
The vc_add_shortcode_param() function is used to register an attribute type handler which will form html markup for settings form in WPBakery Page Builder edit element form. It takes three parameters:
- the attribute type name (String used in vc_map() mapping function in type parameter),
- the callback function name and
- the javascript file absolute url.
vc_add_shortcode_param( $name , $form_field_callback, $script_url );
In this article, we are adding new attribute type “attach_file” type to upload files in the Visual Composer.
Lets create callback function and register it with vc_add_shortcode_param() function call.
function file_picker_settings_field( $settings, $value ) {
$select_file_class = '';
$remove_file_class = ' hidden';
$attachment_url = wp_get_attachment_url( $value );
if ( $attachment_url ) {
$select_file_class = ' hidden';
$remove_file_class = '';
}
ob_start();
?>
<div class="file_picker_block">
<div class="<?php esc_attr_e( $settings['type'] )?>_display"><?=$attachment_url?></div>
<input type="hidden" name="<?php esc_attr_e( $settings['param_name'] ); ?>"
class="wpb_vc_param_value wpb-textinput <?php esc_attr_e( $settings['param_name'],' ' ); ?>
<?php esc_attr_e( $settings['type'] )?>_field" value="<?php esc_attr_e( $value ); ?>" />
<button class="button file-picker-button">Select File</button>
<button class="button file-remover-button">Remove File</button>
</div>
<script>
!function($) {
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment
// $(document).on('click','#vc_ui-panel-edit-element .file-picker-button'
$('#vc_ui-panel-edit-element .file-picker-button').on('click', function( e ) {
var send_attachment_bkp = wp.media.editor.send.attachment,
file_picker_button = $( this ),
file_remover_button = $( this ).parent().find( '.file-remover-button' ),
input = $( this ).parent().find( '.file_picker_field' ),
display = $( this ).parent().find( '.file_picker_display' );
_custom_media = true;
wp.media.editor.send.attachment = function( props, attachment ) {
if ( _custom_media ) {
display.html( attachment.url );
input.val( attachment.id );
file_picker_button.addClass( 'hidden' );
file_remover_button.removeClass( 'hidden' );
} else {
return _orig_send_attachment.apply( this, [props, attachment] );
};
}
wp.media.editor.open( file_picker_button );
return false;
});
$('#vc_ui-panel-edit-element .file-remover-button').on('click', function( e ) {
var file_picker_button = $( this ).parent().find( '.file-picker-button' ),
file_remover_button = $( this ),
input = $( this ).parent().find( '.file_picker_field' ),
display = $( this ).parent().find( '.file_picker_display' );
display.html( '' );
input.val( '' );
file_picker_button.removeClass( 'hidden' );
file_remover_button.addClass( 'hidden' );
});
$( '.add_media' ).on( 'click', function() {
_custom_media = false;
} );
}(window.jQuery);
</script>
<?php
$output = ob_get_contents();
ob_end_clean();
return $output;
}
vc_add_shortcode_param( 'file_picker', 'file_picker_settings_field');
We have added the script for media manager in the callback function . But, we can also create a separate script file and add the script url in the third parameter of vc_add_shortcode_param().
i.e. vc_add_shortcode_param( ‘file_picker’, ‘file_picker_settings_field’,get_template_directory_uri().’/vc_extend/file_picker.js’)
Note, that script saves the attachment id but shows the url. Using the attachment id, we can get the attachement url.
That’s it!! Now, we can use this field in vc_map() function. Here, is an example with the new param added to the “params” array using our custom attribute type “file_picker”:
add_action( 'vc_before_init', 'app_single_doc' );
function app_single_doc() {
vc_map([
'name' => "Upload Single Document ",
'base' => "wpbe_single_document",
'description' => "Uploads for single doc",
'category' => __( 'Customized Block', 'wpbe' ),
"icon" => plugins_url('/assets/img/pdf-icon.png', dirname(__FILE__));
'params' => [
[
'type' => 'file_picker',
'heading' => __( 'Attach File', 'wpbe' ),
'param_name' => 'file_picker',
'value' => '',
'description' => __('Upload file', 'wpbe'),
]
]
]);
}
Finally, add shortcode to display the attach file.
add_shortcode("wpbe_single_document","wpbe_single_document_callback");
function wpbe_single_document_callback() {
extract(shortcode_atts(array(
'file_picker' => '',
), $attr));
ob_start();
if($file_picker):
$file = wp_get_attachment_url($file_picker);
echo $file;
endif;
$output = ob_get_contents();
ob_end_clean();
return $output;
}
Note : Create a separate file for the visual composer code, so that you can separate it from the rest of your function.
To upload multiple files we can Use Param Group in Elements. Let’ see the example :
add_action( 'vc_before_init', 'app_multiple_doc' );
function app_multiple_doc() {
vc_map([
'name' => "Upload Single Document ",
'base' => "wpbe_multiple_document",
'description' => "Uploads for single doc",
'category' => __( 'Customized Block', 'wpbe' ),
"icon" => plugins_url('/assets/img/pdf-icon.png', dirname(__FILE__));
'params' => [
[
'type' => 'param_group',
'heading' => __('Upload PDF Files', 'wpbe'),
'param_name' => 'pdf_files',
'description' => __("", 'wpbe'),
'group' => __('PDF Files', 'wpbe'),
'value' => '',
'params' => [
[
'type' => 'textfield',
'heading' => __('Title', 'wpbe'),
'param_name' => 'title',
'description' => __('Enter title here.', 'wpbe'),
'admin_label' => true,
],
[
'type' => 'file_picker',
'heading' => __( 'Attach File', 'wpbe' ),
'param_name' => 'file_picker',
'value' => '',
'description' => __('Upload file', 'wpbe'),
]
],
]
]
]);
}
Shortcode to display the multiple file uploaded :
add_shortcode("wpbe_multiple_document","wpbe_multiple_document_callback");
function wpbe_multiple_document() {
extract(shortcode_atts(array(
'pdf_files' => '',
), $attr));
ob_start();
if($pdf_files) {
$pdfFiles = vc_param_group_parse_atts($pdf_files);
$pdfFiles = array_filter($pdfFiles);
?>
<ul>
<?php
foreach ($pdfFiles as $pdf) :
$pdfTitle = $pdf['title'];
$file = $pdf['file_picker'];
$file = wp_get_attachment_url($file);
?>
<li><a href="<?=$file?>"> <strong><?=$pdfTitle?></strong></a></li>
<?php
endforeach; ?>
</ul>
<?php
}
$output = ob_get_contents();
ob_end_clean();
return $output;
}
To parse this values in param_group , we use the helper function vc_param_group_parse_atts(). vc_param_group_parse_atts() generates indexed array of arrays with [key=value] which is iterated to output the values.
Reference : Stackoverflow
Views: 968