jboullion, Author at JBoullion

Upload Images Using JS

I recently needed to update a form to update through AJAX so the page didn’t reload when submitted. The issue was that we had some images on this form. In the past I have used things like plupload, but that didn’t seem like the right approach in this instance.

At first I looked into the “fetch” api and saw a good post from Tania Rascia, but unfortunately the fetch API still isn’t fully adopted…DAMN YOU MICROSOFT!

Thankfully I was able to find a jQuery version of this same idea over on Makeitweb.com by Yogesh Singh.

I also needed to make sure I sent along post data with the FormData to update the rest of the form. Here is an example of the JS code I ended up using:

var $agentEditForm = $('#agent-edit-form');
$agentEditForm.submit(function(e){
	e.preventDefault();
        
        //disable our button so we don't submit twice
	$(this).find('button.save-form').prop('disabled', true);
        
        // Serialize our form into a usable object
	var formData = $(this).serializeObject();
        //our PHP script we are sending the info to
	var url = '/update-agent.php';
        //Create a FormData object
	var fd = new FormData();
        //get the files from our input[type=file]
	var files = $('#profile-image')[0].files[0];
        //if someone as uploaded an image let's attach it to our formdata
	if(files){
		fd.append('profile_image',files);
	}

	// Unfortunately we cannot attach an object to our form data, so lets loop through our formData and attach our variables
	for(var propertyName in formData) {
		fd.append(propertyName,formData[propertyName]);
	}

        // Send our data off to our server script
	$.ajax({
		url: url,
		type: 'post',
		data: fd,
		contentType: false,
		processData: false,
		success: function(response){

			if(response != 0){
				//success
			}else{
				//fail
			}
                        
                        // Remember to re-enable our submit button 
			$agentEditForm.find('button.save-form').prop('disabled', false);
		},
	});

	return false;
});

var $agentEditForm = $('#agent-edit-form');

$agentEditForm.submit(function(e){

e.preventDefault();

//disable our button so we don't submit twice

$(this).find('button.save-form').prop('disabled', true);

// Serialize our form into a usable object

var formData = $(this).serializeObject();

//our PHP script we are sending the info to

var url = '/update-agent.php';

//Create a FormData object

var fd = new FormData();

//get the files from our input[type=file]

var files = $('#profile-image')[0].files[0];

//if someone as uploaded an image let's attach it to our formdata

if(files){

fd.append('profile_image',files);

}

// Unfortunately we cannot attach an object to our form data, so lets loop through our formData and attach our variables

for(var propertyName in formData) {

fd.append(propertyName,formData[propertyName]);

}

// Send our data off to our server script

$.ajax({

url: url,

type: 'post',

data: fd,

contentType: false,

processData: false,

success: function(response){

if(response != 0){

//success

}else{

//fail

}

// Remember to re-enable our submit button

$agentEditForm.find('button.save-form').prop('disabled', false);

});

return false;

});

On the server script you can access this data just like any other form submission.

PHP

print_r($_FILES);
print_r($_POST);

1 2	print_r($_FILES); print_r($_POST);

There we go! Now we can submit our form, including images, to our server script!

NOTE: We are using a custom function to serialize our form data. You can find that function here.

Cross Browser HTML5 Date Input

I have been waiting for the day when using <input type=”date” /> would be common…alas, 3 years after the standards were written it is still not supported in IE or Safari.

UNFORTUNATELY we still have to support these browsers…

Traditionally I have been using a third party datepicker (jQuery UI, Bootstrap Datepicker, etc) but I REALLY wanted to just use the default type=”date” this time.

I found a great solution over on Stack Overflow from Kashif Latif.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {type: 'date'});
  webshims.setOptions('forms-ext', {type: 'time'});
  webshims.polyfill('forms forms-ext');
</script>

webshims.setOptions('waitReady', false);

webshims.setOptions('forms-ext', {type: 'date'});

webshims.setOptions('forms-ext', {type: 'time'});

webshims.polyfill('forms forms-ext');

</script>

BAM! We have a polyfill. As far as I can tell this does the trick.

A Better GForms Repeater Example

The Gravity Forms repeater field example is helpful, but has multiple issues that don’t make themselves apparent until you try to implement it.

Thankfully Giorgos Sarigiannidis has a better repeater example that solves some of the most troubling issues of the repeater field.

Here is my example of the same idea, but using a different form as the fields in the repeater. This allows the client to update the fields in the repeater themselves.

add_filter( 'gform_form_post_get_meta_30', 'jb_add_repeater' ); 
function jb_add_repeater( $form ) { 

	$field_id = 1000;

    $another_form = GFAPI::get_form( 35 );
    foreach ( $another_form['fields'] as $field ) {
        $field->id = $field_id += 1;
        $field->formId = $form['id'];
            if ( is_array( $field->inputs ) ) {
            foreach ( $field->inputs as &$input ) {
                $input['id'] = (string) ( $input['id'] + 1000 );
            }
        }  
    }

	$repeater = GF_Fields::create(
		[
			'type'             => 'repeater',
			'description'      => '',
			'id'               => $field_id,
			'formId'           => $form['id'],
			'label'            => 'Attendees:',
			'addButtonText'    => 'Add Attendee',
			'removeButtonText' => 'Remove Attendee',
			//'maxItems'         => 5,
			'pageNumber'       => 1,
			'fields'           => $another_form['fields'],
		]
	);

	$repeater_exists = false;

	foreach ( $form['fields'] as $field ) {
		if ( 'repeater' === $field->type && $field->id === $field_id ) {
			$repeater_exists = true;
		}
	}

	if ( ! $repeater_exists ) {
		$form['fields'][] = $repeater;
	}

	return $form; 
}

add_filter( 'gform_form_post_get_meta_30', 'jb_add_repeater' );

function jb_add_repeater( $form ) {

$field_id = 1000;

$another_form = GFAPI::get_form( 35 );

foreach ( $another_form['fields'] as $field ) {

$field->id = $field_id += 1;

$field->formId = $form['id'];

if ( is_array( $field->inputs ) ) {

foreach ( $field->inputs as &$input ) {

$input['id'] = (string) ( $input['id'] + 1000 );

}

$repeater = GF_Fields::create(

[

'type' => 'repeater',

'description' => '',

'id' => $field_id,

'formId' => $form['id'],

'label' => 'Attendees:',

'addButtonText' => 'Add Attendee',

'removeButtonText' => 'Remove Attendee',

//'maxItems' => 5,

'pageNumber' => 1,

'fields' => $another_form['fields'],

]

);

$repeater_exists = false;

foreach ( $form['fields'] as $field ) {

if ( 'repeater' === $field->type && $field->id === $field_id ) {

$repeater_exists = true;

}

if ( ! $repeater_exists ) {

$form['fields'][] = $repeater;

}

return $form;

}

Gforms doesn’t have a counter system built in yet so if you want to use a counter with your repeater ( ex: Attendee #1, Attendee #2, etc… ) here is some SCSS code you can use to accomplish that.

.gfield_repeater_items            { counter-reset: section;
  .gfield_label                   { font-size: 1.6rem; }
  .gfield_repeater_item           { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px;
    .gfield_repeater_buttons      { display: none; margin-bottom: 20px;
      .add_repeater_item          { margin-right: 20px; }
    }

    &:before                      { counter-increment: section; content: "Attendee #" counter(section) ":"; color: black; display: block; margin-bottom: 15px; }

    &:last-child                  {
      .gfield_repeater_buttons    { display: block; }
    }
  }
}

.gfield_repeater_items { counter-reset: section;

.gfield_label { font-size: 1.6rem; }

.gfield_repeater_item { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px;

.gfield_repeater_buttons { display: none; margin-bottom: 20px;

.add_repeater_item { margin-right: 20px; }

}

&:before { counter-increment: section; content: "Attendee #" counter(section) ":"; color: black; display: block; margin-bottom: 15px; }

&:last-child {

.gfield_repeater_buttons { display: block; }

}

This will look something like this:

Helpful Javascript Prototype Functions

Sometimes the built in functionality for various Javascript primitives is not enough. Here is an assortment of useful Prototype functions. Enjoy!

/**
 * Clean all non numeric characters. Also keeping "."
 * usage: str.cleanNumber()
 */
String.prototype.cleanNumber = function() {

	var returnValue = this.replace(/[^0-9.-]/g,'');

	//let's make sure we do not return a NaN value
	if(isNaN(returnValue) || returnValue == ""){
		returnValue = 0;
	}

    return returnValue;
}


/**
 * Create a default string function to allow replacing all characters in a string
 */
String.prototype.replaceAll = function(search, replacement) {
	return this.replace(new RegExp(search, 'g'), replacement);
};


/**
 * Format a float as currency
 * usage: floatvalue.formatMoney(0, '.', ',');
 */
Number.prototype.formatMoney = function(c, d, t){
  var n = this, 
      c = isNaN(c = Math.abs(c)) ? 2 : c, 
      d = d == undefined ? "." : d, 
      t = t == undefined ? "," : t, 
      s = n < 0 ? "-" : "", 
      i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
      j = (j = i.length) > 3 ? j % 3 : 0;
     return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
   };

/**

* Clean all non numeric characters. Also keeping "."

* usage: str.cleanNumber()

String.prototype.cleanNumber = function() {

var returnValue = this.replace(/[^0-9.-]/g,'');

//let's make sure we do not return a NaN value

if(isNaN(returnValue) || returnValue == ""){

returnValue = 0;

}

return returnValue;

}

/**

* Create a default string function to allow replacing all characters in a string

String.prototype.replaceAll = function(search, replacement) {

return this.replace(new RegExp(search, 'g'), replacement);

};

/**

* Format a float as currency

* usage: floatvalue.formatMoney(0, '.', ',');

Number.prototype.formatMoney = function(c, d, t){

var n = this,

c = isNaN(c = Math.abs(c)) ? 2 : c,

d = d == undefined ? "." : d,

t = t == undefined ? "," : t,

s = n < 0 ? "-" : "",

i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",

j = (j = i.length) > 3 ? j % 3 : 0;

return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");

};

Multiple Custom Query with paginate_links

Sometimes I need pagination for multiple queries on a single page. Whenever possible I use the built in WordPress functions for this purpose. However, WordPress’ pageinate_links() is really meant for WP custom queries…and preferably one query per page.

Here is an example of how you can use this built in function for your own queries! We are using an example which involves three different email lists we need to display.

First, setup your queries:

global $wpdb;

$page_limit = 10;

$email_types = array('need', 'have', 'news');
$results = array();


foreach($email_types as $email_type){
	$results[$email_type] = array();
	$results[$email_type]['count'] = $wpdb->get_var("SELECT COUNT(email_id) FROM {$wpdb->prefix}email_{$email_type} ORDER BY CREATED DESC");

	$results[$email_type]['total'] = ceil($results[$email_type]['count'] / $page_limit);

	// Check if we are on the 2+ page of this type
	if(! empty($_GET['type']) && $_GET['type'] === $email_type){
		$results[$email_type]['current'] = max(1, get_query_var('paged'));
	}else{
		$results[$email_type]['current'] = 1;
	}

	$offset = ($results[$email_type]['current'] - 1) * $page_limit;
	$results[$email_type]['emails'] = $wpdb->get_results("SELECT * FROM {$wpdb->prefix}email_{$email_type} ORDER BY CREATED DESC LIMIT {$offset},{$page_limit}  ");
}

global $wpdb;

$page_limit = 10;

$email_types = array('need', 'have', 'news');

$results = array();

foreach($email_types as $email_type){

$results[$email_type] = array();

$results[$email_type]['count'] = $wpdb->get_var("SELECT COUNT(email_id) FROM {$wpdb->prefix}email_{$email_type} ORDER BY CREATED DESC");

$results[$email_type]['total'] = ceil($results[$email_type]['count'] / $page_limit);

// Check if we are on the 2+ page of this type

if(! empty($_GET['type']) && $_GET['type'] === $email_type){

$results[$email_type]['current'] = max(1, get_query_var('paged'));

}else{

$results[$email_type]['current'] = 1;

}

$offset = ($results[$email_type]['current'] - 1) * $page_limit;

$results[$email_type]['emails'] = $wpdb->get_results("SELECT * FROM {$wpdb->prefix}email_{$email_type} ORDER BY CREATED DESC LIMIT {$offset},{$page_limit} ");

}

Second, display your results: Note, I am leaving out a lot of the display code, but all the relevant pagination code should be here.

foreach($email_types as $key => $email_type){
	$active = '';
	if(! empty($_GET['type'])){
		if($_GET['type'] === $email_type){
			$active = 'active';
		}
	}else if($key === 0){
		$active = 'active';
	}

	echo '<div class="tab-pane fade show '.$active.'" id="archive-'.$email_type.'">';

	foreach($results[$email_type]['emails'] as $email){
		switch($email_type){
			case 'need':
				jb_display_need_email($email);
				break;
			case 'have':
				jb_display_have_email($email);
				break;
			case 'news':
				jb_display_news_email($email);
				break;
		}
	}


	jb_custom_email_pagination($results[$email_type]['total'], $results[$email_type]['current'], $email_type);


	echo '</div>';

}

foreach($email_types as $key => $email_type){

$active = '';

if(! empty($_GET['type'])){

if($_GET['type'] === $email_type){

$active = 'active';

}

}else if($key === 0){

$active = 'active';

}

echo '<div class="tab-pane fade show '.$active.'" id="archive-'.$email_type.'">';

foreach($results[$email_type]['emails'] as $email){

switch($email_type){

case 'need':

jb_display_need_email($email);

break;

case 'have':

jb_display_have_email($email);

break;

case 'news':

jb_display_news_email($email);

break;

}

jb_custom_email_pagination($results[$email_type]['total'], $results[$email_type]['current'], $email_type);

echo '</div>';

}

Notice at the bottom of this loop we are calling our pagination function for each list. The important thing to note here is that we are using a separate ‘type’ variable so we know which list we are paginating.

Lastly, here is the actual pagination function:

function jb_custom_email_pagination($total, $current, $type){
	echo '<div class="pagination-wrapper">
			<div class="pagination">'.paginate_links( array(
				'base' => str_replace( 9999, '%#%', esc_url( get_pagenum_link( 9999 ) ) ),
				'format' => '&paged=%#%',
				'prev_text' => __('<i class="fas fa-angle-left"></i>'),
				'next_text' => __('<i class="fas fa-angle-right"></i>'),
				'total' => $total,
				'current' => $current,
				'add_args' => array( 'type' => $type )
			)).'</div>
			</div>';
}

function jb_custom_email_pagination($total, $current, $type){

echo '<div class="pagination-wrapper">

<div class="pagination">'.paginate_links( array(

'base' => str_replace( 9999, '%#%', esc_url( get_pagenum_link( 9999 ) ) ),

'format' => '&paged=%#%',

'prev_text' => __('<i class="fas fa-angle-left"></i>'),

'next_text' => __('<i class="fas fa-angle-right"></i>'),

'total' => $total,

'current' => $current,

'add_args' => array( 'type' => $type )

)).'</div>

</div>';

}

ACF Gallery Saved to Specific Folder

Recently we had a client that wanted to make sure all of the files in one of their galleries was in a specific directory instead of the default upload/year/month directory.

Here is a simple function to make sure that happens, including updating all previous files uploaded to that gallery.

/**
 * Update the file path of Custom files so that they always are located in the Custom folder
 */
add_action('acf/save_post', 'jb_update_gallery_fields', 1);
function jb_update_gallery_fields( $post_id ) {

	// specific new field value
	$gallery = $_POST['acf']['field_234567890dfghj'];

	if(! empty($gallery)){
		$folder = sanitize_file_name( get_the_title($post_id) );
		$model_dir = '/Custom/'.$folder.'/';
		$uploads = wp_upload_dir();
		$path = $uploads['basedir'] . $model_dir;

		if (! file_exists($path)) {
			mkdir($path, 0777, true);
		}
		
		foreach($gallery as $attachment_id){
			$fullsize_path = get_attached_file( $attachment_id );
			
			//is this attachment in the Custom folder?
			if (strpos($fullsize_path, 'Custom') === false) {
				$new_filepath = $path.basename($fullsize_path);

				//Not in the Custom folder
				rename($fullsize_path, $new_filepath);
				update_attached_file( $attachment_id, $new_filepath );
			}
		}
	}
}

/**

* Update the file path of Custom files so that they always are located in the Custom folder

add_action('acf/save_post', 'jb_update_gallery_fields', 1);

function jb_update_gallery_fields( $post_id ) {

// specific new field value

$gallery = $_POST['acf']['field_234567890dfghj'];

if(! empty($gallery)){

$folder = sanitize_file_name( get_the_title($post_id) );

$model_dir = '/Custom/'.$folder.'/';

$uploads = wp_upload_dir();

$path = $uploads['basedir'] . $model_dir;

if (! file_exists($path)) {

mkdir($path, 0777, true);

}

foreach($gallery as $attachment_id){

$fullsize_path = get_attached_file( $attachment_id );

//is this attachment in the Custom folder?

if (strpos($fullsize_path, 'Custom') === false) {

$new_filepath = $path.basename($fullsize_path);

//Not in the Custom folder

rename($fullsize_path, $new_filepath);

update_attached_file( $attachment_id, $new_filepath );

}