- Go to Plugins > Editor
- Select
Jetpack by Wordpress.com
at the top-right - Select
jetpack/modules/contact-form.php
from the list of files on the right (changes the directory) - Select
jetpack/modules/contact-form/grunion-contact-form.php
from the list of files on the right - Search
case 'date'
- Below that case and before
default
, add the following case, replacing***API-KEY-GOES-HERE***
with your filepicker.io API key, and adding any other filepicker.io rules (mime types, file size, etc.) as attributes
case 'filepicker':
$r .= "\n<div>\n";
$r .= "\t\t<label for='" . esc_attr( $field_id ) . "' class='grunion-field-label " . esc_attr( $field_type ) . ( $this->is_error() ? ' form-error' : '' ) . "'>" . esc_html( $field_label ) . ( $field_required ? '<span>' . __( "(required)", 'jetpack' ) . '</span>' : '' ) . "</label>\n";
$r .= "\t\t<input type='filepicker' name='" . esc_attr( $field_id ) . "' id='" . esc_attr( $field_id ) . "' value='" . esc_attr( $field_value ) . "' class='" . esc_attr( $field_type ) . "'/ data-fp-apikey='***API-KEY-GOES-HERE***' data-fp-mimetypes='*/*' data-fp-container='modal' onchange='alert(event.fpfile.url)'>\n";
$r .= "\t</div>\n";
break;
- Select
jetpack/modules/contact-form/grunion-form-view.php
from the list of files on the right - Search
drop down
- After the Website
<option>
add the following
<option value="filepicker"><?php esc_html_e( 'Filepicker', 'jetpack' ); ?></option>
- Go to Appearance > Editor
- Select
Header
from the list of files on the right - Add the following script tag before the closing
</head>
(Remove the space in the opening script tag. Included because of gist restrictions)
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
- While creating a post/page, click the
custom form
icon next to theAdd Media
button above the content area - Add whichever fields you like, and include one of the type
Filepicker
Awesome! once the file is added I get a popup with the link to the file and before hitting submit on the contact form there is nothing show that the file has been added to the message. Is there something I can do to give the uploader confirmation other then the link the the file? Many Thanks