Visual Composer attach media file needed

Question

Do I need to create new param type since there is no "attach_file"-type in https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332#vc_map()-Availabletypevalues

How come this kind of element is missing?

What I need is "Attach file"-button to backend.

Answer 1

I have just had the same issue as you and the is what I came up with.

This allows for adding a visual composer content element in which you can select any file from the WordPress media manager (and remove the file selection).

Separate this from the rest of your functions (use a modular approach).

In your templates functions.php add

/**
 * Visual Composer Functions
 */
require get_template_directory() . '/functions/vc-functions.php';

Add your new shortcode param

In your_template/functions/vc-functions.php add

/**
 * Add file picker shartcode param.
 *
 * @param array $settings   Array of param seetings.
 * @param int   $value      Param value.
 */
function file_picker_settings_field( $settings, $value ) {
  $output = '';
  $select_file_class = '';
  $remove_file_class = ' hidden';
  $attachment_url = wp_get_attachment_url( $value );
  if ( $attachment_url ) {
    $select_file_class = ' hidden';
    $remove_file_class = '';
  }
  $output .= '<div class="file_picker_block">
                <div class="' . esc_attr( $settings['type'] ) . '_display">' .
                  $attachment_url .
                '</div>
                <input type="hidden" name="' . esc_attr( $settings['param_name'] ) . '" class="wpb_vc_param_value wpb-textinput ' .
                 esc_attr( $settings['param_name'] ) . ' ' .
                 esc_attr( $settings['type'] ) . '_field" value="' . esc_attr( $value ) . '" />
                <button class="button file-picker-button' . $select_file_class . '">Select File</button>
                <button class="button file-remover-button' . $remove_file_class . '">Remove File</button>
              </div>
              ';
  return $output;
}
vc_add_shortcode_param( 'file_picker', 'file_picker_settings_field', get_template_directory_uri() . '/vc_extend/file_picker.js' );

@ojrask was right - note the 3rd param of vc_add_shortcode_param. This is where we add the script for the media manager.

Note that this saves the attachment id but shows the url. Using the attachment id is better for use in other WP functions (handy when you want to do things for the front end output).

Add your js

In your_template/vc_extend/file_picker.js add

!function($) {

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment

  $( '#vc_ui-panel-edit-element .file-picker-button' ).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' ).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);

Use your newly created param type

The param can now be used in you vc_map(). This should also go in your_template/functions/vc-functions.php and should be something like

vc_map( array(
  'name' => __( 'your_element_name', 'js_composer' ),
  'base' => 'your_element_base',
  'content_element' => true,
  'class' => '',
  'icon' => 'icon-wpb-images-stack',
  'params' => array(
    array(
      'type' => 'file_picker',
      'class' => '',
      'heading' => __( 'Attach Media', 'js_composer' ),
      'param_name' => 'file_picker',
      'value' => '',
    ),
  ),
) );

Output

To show the output on the front end create the file your_template/vc_templates/your_element_base.php and add something like

echo wp_get_attachment_url( $atts['file_picker'] );

This will output just the url to whatever file was selected.

The following resources were useful in making this:

vc_map docs https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332

creating new param types https://wpbakery.atlassian.net/wiki/display/VC/Create+New+Param+Type

adding the media manager script https://wordpress.stackexchange.com/a/82874/99164